Kinda New to Jquery and hit an issue regarding returned HTML. I am using the .load() function to load HTML returned from a jsp file - its all working grand except the returned HTML doesnt seem to allow further Jquery functions to be called on it.
i have a click and toggle combination running for "#showgame" - this id is in the returned HTML but clicking on it does nothing when it should. Do i have to update anything to tell jquery that this id now exists on the page after load() call?
Regards,
Cormac
You need to use the live() function to bind the click event.
$("#myelement").live("click", function() { });
Live binds the event to current and future elements that match the selector.
Read more at http://api.jquery.com/live .
Related
I have a page when you click a button, it opens a Bootrstap 3 modal. This modal's function loads an Ajax call and returns a HTML on a DIV. This HTML has the fields to be used in x-editable. I declared all fields before:
$(document).ready(function() {
$('#Make').editable();
$('#Address').editable();
...
});
The Ajax response have all fields previously defined, but don't open the edit box.
Used console log with no errors. Seems it's not calling the function.
Thanks
solved my own problem. The element name has space on it. Removed and worked fine.
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
I'm attempting to run the following simple bit of code on an html snippet contained in a php file, loaded with jquery's .load() function:
$(".thumbnail").on("click", function(event){
alert("thumbnail clicked");
});
However, I can't seem to get it to work on this portion of my page. I have other calls to elements not loaded via ajax and they work fine with the .on() function. I was under the impression that .on() would recognize ajax loaded content.
My .thumbnail elements are pictures in img tags contained within a series of divs all loaded via ajax, jquery can't seem to find any of this content. All of my code is contained within the ready function.
Is there a way to get jquery to recognize these new elements?
Thanks.
You need a delegated event handler for dynamic content :
$('#container').load('somefile.php');
$('#container').on('click', '.thumbnail', function(event){
// do stuff
});
The closest non-dynamic parent would probably be the element you're loading the content into, and you need to attach the event handler to that element, filtering based on the .thumbnail class, like the code above.
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
I have a page that dynamically loads content with the jQuery load() function, so I need to use live() for each of my jQuery functions on this page. However, I am unable to get live() to work with jQuery plugins. For example, I want to use jQuery accordion:
$("#accordion").accordion();
But I cannot find the right syntax to get accordion to work with live(). I have tried:
$("#accordion").live("load", accordion());
$("#accordion").live("load", $("#accordion").accordion());
$("#accordion").live("load", $(this).accordion());
I either receive the "b is undefined" error, or "accordion is not defined."
You must use anonymous function
$("#accordion").live('load',function(){
$(this).accordion();
});
Edit:
If the accordion is already in the page when you first render it, then you shouldn't call it using live(), but by page load
$(function(){
$("#accordion").accordion();
});
This could partly answer your question:
I would suggest using livequery instead to do this:
$("#accordion").livequery(
function() { $(this).accordion(); },
function() { $(this).accordion("destroy"); }
);
The first function will initialize jQuery UI's accordion functionality on any $("#accordion") element that's added to the DOM, and the second one will destroy the accordion object when that same element is removed from the DOM.