Question

My problem: I have a page, index.php, that dynamically loads some html contents, from admin_agent_area.php, into some divs (#adminarea) in index.php. This happens when clicking the link “#adduser” and a jquery function is handling the loading and inserting. Now, in admin_agent_area.php. I have some other divs (#usertable) that is loaded with a table when the admin_agent_area.php has been loaded.

id=#adduser is a link (< a >) in index.php, outside “adminarea”.

When clicking in the table an alert is presented.

The link #adduser is still visible after content has been loaded. When pressing it again the admin_agent_area.php is once again loaded and the table as well. Clicking inside the table now presents the alert two times after each other. This is bad, it should be only one time. I can see in Firebug that things are indeed happening twice when I want it to happen only once.

I have had similar problem and solved it by using .empty before loading the content. But when doing that, everything was on the same side.

index.php part of structure

< a id="adduser"> Add user < /a>

< div id = "adminarea">< /div>

admin_agent_area.php part of structure

< div id="modalarea">< /div>

< div id="usertable">< /div>

admin_agent_area.php
My javascript loaded with index.php

$(document).ready(function() { 
      $("#adduser").click(function () {
                $("#adminarea").empty();
                    $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) { }); 

            });
});

All content from admin_agent_area.php is loaded into div #adminarea in index.php. I thought that making sure i .empty it before loading the new content would, so to speak, reset entire #adminarea, like if I never had loaded anything before.

This is the javascript loaded together with admin_agent_area.php. When clicking a row in the table, this script is triggered:

$("table[id$='agents'] td:nth-child(1)").live('click',function(event)  

        {  
            $("#usertable").empty();
            alert("loadupdatagent");

            event.preventDefault();  

            var $td= $(this).closest('tr').children('td');  

            var $agentid=$td.eq(2).text();  

        $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){ 
            $("#modalarea").empty();
            $("#modalarea").html(data);
            $('#modalarea').css("visibility","visible");
        });

And as you can see, this is the script where the alert is.

id=#modalarea is the area where some content is supposed to be loaded once the table row has been clicked. It shouldn’t matter for the problem itself, but I can see in Firebug that the .get request is made twice as well.

How do I fix this problem? I don’t think the HTML code should be needed, please let me know and I will add it as well.

Answer 1

Ok, this was (for me) a tuff one.

When loading admin_agent_area.php it will load the .js file as well since the < script…> tag was defined in that file. When clicking “#adduser” several times the admin_agent_area.php and, hence, the .js file is loaded several times as well.

I don’t understand how event handlers are binded to elements, but in some way, each time I load I do get more event handlers for my elements. At least that’s how it looks like.

The solution for me was to load the .js file from index.php dynamically. Of some reason it doesn’t work loading the .js file in the < script….> of index.php, the scripts doesn’t seem to be visible for the dynamically loaded content. Don’t hesitate to explain this if you know about it. But I guess it’s not possible to first load a .js file if the elements are not available to bind event handlers to.

 $(document).ready(function() {
      var register_agent_page;   
      $("body").delegate("#adduser", "click", function (event) {                
                        if(register_agent_page==null){ 
                            $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) {
                                    register_agent_page = data;
                                    $.getScript("http://localhost/SMICAdmin/adminactivities/admin_agent_script.js");
                                    $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             

                            }); 
                        }else{

                            $("#adminarea").html(register_agent_page);                         
                            $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             
                        }
  });

I am making sure that I only load the page the first time, don’t know if it matters but it saves some requests. The .js file is loaded the first time I am clicking “#adduser” as well. Now, the .js file will be called only once.

What doesn’t work properly is to automatically load the data into user “#usertable” from the .js file when it has been loaded. First time is fine, but second time I hit “#adduser” the .js file is already loaded and I need to load the user table in a different way. Hence, I load the table and add it to div “#usertable” from within the javascript file loaded by index.php.

Puh!