I have a page xyz.jsp which having a script on page load and its working fine.
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
but if i am calling this page on abc.jsp on jquery .load page is rendering but
$("#hiddenLoginButton").click(); is not working.
dont know the reason why its not coming.
please tell me that its working onload of xyz.jsp but if i calling that page on abc.jsp it not working
Adding code which is in abc.jsp:
function newstyle(){
$("#test").load("xyz.jsp");
};
so, newstyle calling onload on abc.HTML rendering fine but
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
which is in xyz.jsp not working fine if i am calling that on abc.jsp..i hope its clear now.
.load() is an ajax request so if you are loading elements from other page then direct binding of events to the element won't work. So workaround to this is event delegation which you have to delegate the event to the existing parent item which is loading the html from other page.
$(document).find('#hiddenLoginButton').click();
You can delegate it to the closest parent which was available at the time of page load:
$('#ID or .Class of the parent item').find('#hiddenLoginButton').click();
like:
$('#wrapper').find('#hiddenLoginButton').click();
side note:
if you are able to post some rendered html then that would be much better to see what is going on and what will be suggested to overcome this.
Try with .trigger like
$("#hiddenLoginButton").trigger('click');
and we assumed that you have called the function loginRegOverlay() on page load
AND I have noticed that you wrote code in xyz.jsp and you want to trigger it on abc.jsp then include that xyz.jsp at abc.jsp
inlcude('xyz.jsp');
and plz makesure that those buttons ids are unique bec xyz is loads on abc and due to duplicate in ids they wont work,you can give them same class and fire it as once
You can use .live or .on method for event delegation
$("#hiddenLoginButton").live('click', function(){});
Related
I have a webpage with a link to make an AJAX request. When the following .js comes back the toggleClass function does not work.
$(document).ready(function(){
$("td").click(function(){
$(this).toggleClass("br");
});
});
If I replace toggleClass("br") with something like addClass("br") then that does work.
Furthermore, toggleClass works fine if I put the .js into the html page or if I run it from the console. It seems that something about both toggleClass and AJAX requests together stops this code from working but I have no Earthly idea as to why that might be.
UPDATE
I've figured out the problem. I had accidentally included jQuery two times and so javascript from AJAX requests was being run twice. Hence why only toggleClass was "not working" while addClass and removeClass were.
The only mystery left is why this was only the case when the .js came from an AJAX request as opposed to when it was in the HTML itself.
Assuming you want the click handler to be on an element that is populated by the AJAX query, you have to late bind the event to a DOM element that exists before the AJAX query fires. Let's say you have the following HTML:
<html>
<body>
<table id="populatedByAjax"></table>
</body>
</html>
...and you know you're going to populate the table via AJAX. Then we need to declare our jQuery selector like this:
$("#populatedByAjax").on("click", "td", function(){
$(this).toggleClass("br");
});
That makes sure that the click event is bound to any current or future td elements in the selector #populatedByAjax
Use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.
$(document).on('click', '#td', function() {
$(this).toggleClass("br");
});
I have a webpage with AJAX loaded content. If I click on "export" the content reloads and generate an HTML a-Element using PHP:
<a style=\"display:none;\" id=\"menue-export-link\" href=\"download/".$this->select->downloadcsv."\"></a>
Now I want to start the download automatically, so I wrote the following JavaScript code to start the download on a-Element load:
$(document).ready(function () {
$(document).on('load', '#menue-export-link', function() {
console.log('click export');
$('#menue-export-link').click();
$('#menue-export-link').remove();
});
});
But nothing happens, does somebody have any idea?
First of all there is no load or onload event for html anchor elements.
So as #The F said you have to trigger the download in your ajax success callback. Remember to find and trigger it after you have appended the html in your DOM. For more on jQuery ajax http://api.jquery.com/jquery.ajax/
And now comes triggering the download part. Triggering the click event which causes the navigation is a bit trickier. The following question answers that very well jQuery: how to trigger anchor link's click event and
How can I simulate an anchor click via jquery?
Your js is triggered when your main page is loaded and #menue-export-link probably does not exist to that time. If using $.ajax to load that link, place your javascript inside the success callback to make sure that your link exists or is being loaded before triggering your code.
$(document).on("click", "#menue-export-link", function() {
console.log("click export");
});
So I have three images that when you click on them brings up a larger image. A really basic gallery I made. Any way when im changing content on the page with the .load(), it doesnt register the click any more for the div.
How to I reload the jquery or reload the event handlers?
Here is what I was trying
function recheckTheImageClickers(){
$('#img1').on('click', function(){
change1();
});
});
I tried to run this function after the ajax to see if it would re-bing the $img1 to a click function but no luck.
Any ideas?
I worked it out, I wasn't running the function in the success part of .load(). It works now.
This looks like a perfect spot for jQuery's live or delegate (both now deprecated in favor of using on with more parameters):
$(parentSelector).on('click', '#img1', function(){ change1(); });
As long as your parentSelector is outside of the AJAX refreshed DOM elements, and #img1 is a child of said parent, this should work without needing to re-execute it.
I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.
See Jquery's trigger function
Jquery Trigger
You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();
Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524
One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })
Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.
I have a number of jQuery scripts that select elements within the area that I run a partial page refresh on.
I am using this css tricks code snippet to refresh that part of the page:
$('#refreshbutton').click(function() {
var url = "http://myUrl.com/indexTest.php?ID=" + Math.random();
setTimeout(function() {
$("#maindisplay").load(url+" #maindisplay>*","");
}, 100);
});
The problem is that the elements within #maindisplay are changed, thus are considered new elements in the dom. Since the scripts that select those elements and attach functions to them run at domready and not during the partial refresh, this poses a problem.
So far I have been unable to find a way to reattach the scripts to the elements within #maindisplay after I partially refresh it.
My question is: What is the optimal way to reattach the scripts to the refreshed area of the page.
Thank you for any advice.
You need to use the live() function to attach your click handler.
You have the following options that I can think of:
Put the attach in a function and call that function on page refresh
Use the .live() functionality
Use .delegate() functionality
Put the Javascript reference to the functionality in a reference in the refresh so that it executes as a part of that refresh
Put the function in the callback
make it part of your setTimeout
some other creative method I did not think of...
Just a note: I would look at the .delegate() with contextual selection added in recent versions (available in 1.4.2 for instance).
Does load() not take a callback function as it's second argument? Why not reattach event handlers to the elements with that function?
$('#result').load('ajax/test.html', function() {
//reattach event handlers here.
});