?
Solved

jquery load() problem

Posted on 2010-01-07
16
Medium Priority
?
446 Views
Last Modified: 2012-05-08
Hi, I'm not sure if this is a problem, or a limitation of jQuery or my understanding.

I have a page which calls an external .js file with all my JS in it.

I am loading some HTML using jQuery.load(), and in that file is an element, let's say #myElement , and in the .js file I have some jQuery which displays an alert when #myElement is clicked.

I'll put it another way to be clear.  

1. I have a page, which includes a .js file, which includes this jQuery $("#myElement").click(funciton(){alert('HI');});
2. If the user clicks a particular tab, some HTML is loaded with jQuery.load(), and displayed in the page.
3.The loaded page includes <input type="button" id="myElement")>
4. If the user clicks #myElement, an alert box with 'HI' should appear.

My problem is that it isn't.  If I include the jQuery in the file that is loaded it works fine, but when I put it back in the .js file that is loaded with the first page, it won't.

I'm assuming this is some kind of binding issue, but I could have sworn that using load() does register all HTML with the DOM.  I thought I have done this succesfully in the past.

Is what I am experiencing a normal limitation of jQuery, or is there a way around it.

Apologies if my explanation makes no sense.

Many Thanks

Jason
0
Comment
Question by:Jay1607
  • 10
  • 5
16 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 26206934
do you have a link or code ;)
0
 

Author Comment

by:Jay1607
ID: 26206969
Hi HainKurt, thank you for taking a look.

plase see attached

"ONE" is included in the .js file of my "Main Page".

"TWO" is included in a file which is LOADING INTO "Main Page" using jQuery.load()

So..
I have 3 files.
1. scripts.js
2. Main HTML File, which loads scripts.js
3. Secondary file, which includes the the button, and is loaded into the Main HTML File with the load() function.

I hope this makes sense.. let me know if you need more.

Thanks again HainKurt

Jason
<!--ONE-->
$("#testClickMe").click(function(){
   alert('HI');
});

<!--TWO-->
<input type="button" id="testClickMe" value="Click Me" />

Open in new window

0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26206990
can you please post the code for this piece "and is loaded into the Main HTML File with the load() function."
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 61

Expert Comment

by:HainKurt
ID: 26206997
what happens if you add

$("#testClickMe").click(function(){
   alert('HI');
});

piece after load (?) function... idea is load the document and call above JQuery code instead of adding it to document.ready function...
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207000
check this sample to bind/unbind events at run time

http://docs.jquery.com/Events/unbind

if above post does not help...
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207008
after having a look at the link posted @ 26206997, I guess it should work for you...
0
 

Author Comment

by:Jay1607
ID: 26207122
Hi HainKurt, I am not sure I understand your suggestions...

Whether I put it before or after the load() is not a problem.  I can get it working fine, but only if I put the javascript inside the file that is loaded.

However, what I want to do (more architectural than anything) is to have all my javascript for this particular page in a single .js file, even the javascript that is required for elements loaded into the page with load().

The problem is, if have have the script in the .js file, then load some html int the page using load(), the javascript does not fire when the event occurs.
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207194
please post the code for loading the html...

what I mean is this
you have

document.ready (
  some functions here
)

turn this into

document.ready ({
  BindAll()
})

function BindAll(){
  some functions here
}

and after Load function (waiting for you to post this piece of code), call BindAll() again...
0
 

Author Comment

by:Jay1607
ID: 26207241
Gotcha.. I will give that a try..

My load functon is:

$("#tab-registration").click(function(){
                  if (loadedRegistration == 'FALSE'){                                                  
                        $.throbberShow({image: "/_css/images/throbber_3.gif", parent: "#content-registration"});
                        $("#content-registration").load('tab_Registration.cfm', { nocache : tstamp, event_id : eventID });                                    
                        loadedRegistration = 'TRUE';
                  }
            });
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207272
just try this for now

$("#tab-registration").click(function(){
                  if (loadedRegistration == 'FALSE'){                                                  
                        $.throbberShow({image: "/_css/images/throbber_3.gif", parent: "#content-registration"});
                        $("#content-registration").load('tab_Registration.cfm', { nocache : tstamp, event_id : eventID });                                    
                        loadedRegistration = 'TRUE';
$("#testClickMe").click(function(){
   alert('HI');
});
                  }
            });
0
 

Author Comment

by:Jay1607
ID: 26207313
OK, I think I see what you are saying now..

I tried this, but didn't work.  Generally the script worked fine .. loaded etc.. but clicking on #testClickMe still didn't fire the alert.
0
 
LVL 61

Accepted Solution

by:
HainKurt earned 1000 total points
ID: 26207393
ok got it ;)


<script type="text/javascript">
$(document).ready(function(){

var bindBehaviors = function() {
$("#btnStatic").click(function(){ 
  alert('HI html'); 
});
$("#btnAjax").click(function(){ 
  alert('HI ajax'); 
});

}; // bind behaviours

bindBehaviors();

$("#btnLoadAJAX").click(function(){ 
  $('#example-placeholder').html('<p><img src="images/ajax-loader.gif" width="220" height="19" /></p>');
  $('#example-placeholder').load("sample.html", function(){bindBehaviors();});
});

});
</script>

<input type="button" id="btnLoadAJAX" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder">
  <p>Placeholding text</p>
</div>

-------------- loaded by ajax ---------------------------

loaded by ajax jquery...<br>
<input type="button" id="btnAjax" value="ajax button" />

Open in new window

0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207399
I hope above is clear enough... the second part is the sample.html

oops,

<input type="button" id="btnLoadAJAX" onclick="example_ajax_request()" value="Click Me!" />
-->
<input type="button" id="btnLoadAJAX" value="Click Me!" />

no harm but confusing, forgot to remove it...
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26207401
check here too : http://docs.jquery.com/Tutorials:AJAX_and_Events

to get more info about above solution...
0
 
LVL 2

Assisted Solution

by:HaloWebProjects
HaloWebProjects earned 1000 total points
ID: 26278249
there is a simple solution for this, you are using click bind, for element which is not in DOM yet so thats why it dont work.. jquery 1.3 has a new tool for it, called live, that you may use for binding to elements which are not in the DOM yet and the bind will be persistent

ex:

$('#element_to _be_inserted_to_dom_ltr').live("click", function() {
   alert('H');
});

works like a charm...
0
 

Author Closing Comment

by:Jay1607
ID: 31674407
Both great solutions.. the live() is certainly easier, and the one I am going for in this instance.

Reading up on it, it is a great feature, but does have some limitations and 'caveats', so there are times when HainKurt's approach would be the better one.

HainiKurt, thank you so much for your great assistance.  Very much appreciated.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month15 days, 22 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question