Member Avatar for romanromeo89

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
  • 126 Views
  • 29 Minutes Discussion Span
  • Latest Post Latest Post by romanromeo89

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

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.

Member Avatar for romanromeo89

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.