0

Hello,
I have for example a <div id="main"></div> and inside this div tag I load html content from extrernal file using jquery with .load() method. I can see evething has loaded normaly inside this div tag, but can not access any html tag loaded from the external html via css or jquery. Any advice would be very usefull. Thank you!

2
Contributors
2
Replies
14
Views
3 Years
Discussion Span
Last Post by romanromeo89
0

sounds like the issue is related to the fact that you added data after the fact using ajax...

For example, you wouldnt be able to attach the click event using .click() because the elements havent been loaded yet. You would use the .on() method.. for example..

$('#divId).on('click', 'targetElement', function()....

What this does that that any targetElement added to the divId element will have the click() bound to it, even if the elements come in after the fact via ajax.

We really need to see your sample code, but thought this may put you on the right path in the meantime.

0

Thank for help,
I actually have this index file:

<?php ?>

<html>
<head>
<title>Med Manager</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>

<body>
    <div id="main_container">
        <div id="left_sidebar">
            <div id="add">           
                <button onclick="load_add_new_supplier()">Add supplier</button>
            </div>   
        </div>
        <div id="container"> 
            top menu
            <hr/>

            <main id="main">

            </main>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>
</body>

</html>

A button call function load_add_new_supplier(), stored in file ajax.js

ajax.js file:

function load_add_new_supplier(){
    $(document).ready(function(){
                   $('#main').load('view-ajax_add_new_supplier.php');
    });
}

And this function loads this content, view-ajax_add_new_supplier.php :

<form name="ajaxform" id="ajaxform" action="model-ajax_add_new_supplier.php" method="POST">
    <table>
      <tr>
        <td>afm:</td>
        <td><input type="text" name="afm"></td> 
      </tr>
      <tr>
        <td>type:</td>
        <td><input type="text" name="type"></td> 
      </tr>
      <tr>
        <td>name:</td>
        <td><input type="text" name="name"></td> 
      </tr>
      <tr>
        <td>address:</td>
        <td><input type="text" name="address"></td> 
      </tr>
      <tr>
        <td>phone:</td>
        <td><input type="text" name="phone"></td> 
      </tr>
      <tr>
        <td>fax:</td>
        <td><input type="text" name="fax"></td> 
      </tr>
      <tr>
        <td>comments:</td>
        <td><input type="text" name="comments"></td> 
      </tr>
    </table>
    <button id="add_button" onclick="sendform()" type="button">add</button>
</form>

which is a simple form. It works as I want. But I didn't manage to access any tag loaded from model-ajax_add_new_supplier.php neither with jquery selector or with css.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.