I have a simple html page with jquery for updating the contents of the different menu items from a php script on my server but the scripts written for the ajax loaded elements are not working.
how do i correct this.
please.
You're trying to apply your code for elements that do not yet exist in your document and that are created dynamically.
If you're using jQuery, read this: http://api.jquery.com/on/
Yeah thats what i taught was the problem but i actually called the functions onload of those very elements an it didn't still work
Use .on() method, when generating elements dynamically..
$(document).on('event','selector',callbackFfunction(){
});
Example
$(document).on('click','button.yellow-button', function(e){
});
Let me know if it not works.
Related
I am using jQuery and put this code in my javascript:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}
But its giving me this error: fadeOut is not a function.
This will happen if you're using the "slim" version of jQuery. Only the "full" version of jQuery includes animation effects.
Try grabbing the "full" version of jQuery from the jQuery downloads page and including that in your page (or including a full version of jQuery from a CDN from your page).
Do you have another javascript library on that page? It seems you have the hide function, and the $ defined (prototype, for example, also has an hide function).
If that is the case, try:
jQuery("#item_0").fadeOut("slow");
I had this error because I was using a slim version of jQuery. If you download the full version you should be okay.
Even if the selector didn't return any items in the collection the function call would have worked (not generated this error anyway) if jQuery was loaded correctly. Either there is a conflict in the page, or it didn't load at all. You can try
jQuery(myDiv).fadeOut("slow");
or look into why jQuery hasn't been loaded.
P.S.: don't forget the # in the selector if selecting by id.
Also, you probably forgot a # in the selector (unless you've got something like <item_1 /> in the markup).
var myDiv = '#item_' + itemID;
jQuery uses CSS selectors to search for elements, so without the #, you'd get every element with the tag item_x instead of the ID.
It happened to me because of slim version of Jquery library. Full version of Jquery library includes animation.
Jquery CDN available at https://code.jquery.com/
It looks like jquery is not correctly attached to the page.
Check your linking to jQuery.
Try keeping it inside
$(document).ready(function(){
// your code. and don't forget the '#' in front of item.
});
Looks like you're trying to call the function before jQuery / the DOM loads.
You have liDiv instead of myDiv. Try:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}
On moving a .html template to a wordpress one, I found this popping up regularly.
Two reasons, and the console error can be deceptive:
The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,
Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!
I want to change the content of a div (#mydiv) via AJAX.
To do that I create a button (#change-button) inside #mydiv that trigger the following jQuery script
$(#change-button).on("click", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
Basically I replace the text in #mydiv with the new page's one.
This code works fine for the first time, but if I click again on the freshly loaded #change-button jQuery doesn't fire anymore.
I understand the theory: the new #mydiv that has been injected by .load() is not seen by the DOM, so the jQuery script doesn't work.
I found at least two similar questions on SO, but none was properly answered and overall none seems to solve my problem. Can anyone explaining clearly the best practice in these cases.
Here is the other questions:
Update DOM after insert in jQuery
.on()-Function does not rebuild DOM
Thank you
Use delegation like this:
$("body").on("click","#change-button", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
I think problem is because y our contents are dynamically loaded, so they are not present at the time of event binding. That's why it's not firing.
You can use delegation like bellow
$(document).on("click",'#change-button',function(){})
I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.
I'm trying to use jQuery to change some styling on my page. The page is made dynamically by executing another JavaScript file.
Right now I have
$(window).load(function(){
$('p').css('font','green');
});
Which does nothing.
$(document).ready(function() will change the static part of the page, but not the generated part.
If I just type $('p').css('font','green'); in the console, the expected results will happen. What is going on?
I'm guessing you are asking to be able to bind events to objects?
If so, look up the jQuery live() function: http://api.jquery.com/live/
If you are simply trying to apply CSS Styles to the page, you're better off relying on actual CSS style sheets.
Instead of listening for the document ready event, can you listen to an event fired by a workcomplete script building the page?
Or can you test for something in the page to indicate it's done every 100ms and then fire such an event yourself?
I'm trying to load a page that is basically an edit form inside a
dialog (ui.dialog). I can load this page fine from an external (I'm
using asp.net) page.
The problem is that inside of my "popup" form, I need to $(function()
{my function here}); syntax to do some stuff when the page loads,
along with registering some .fn extensions for some dynamic dropdowns
using ajax calls.
I have created my <script type="text/javascript" src="jquery.js"> but
I don't think these are being included, and also my $(function) is not
being called.
Is this possible to do or do I need to find another way of
accomplishing what I need to do?
If you really need to load that form via AJAX you could to do all the Javascript stuff in $.ajax callback itself.
So, you load the popup form like this:
$.ajax({
//...
success: function(text) {
// insert text into container
// the code from $(function() {});
}
});
The script isn't getting run because the document's ready event has already been fired. Remove your code from within the
$()
Use the livequery plugin.
It allows you to bind events to elements that might be loaded later: http://brandonaaron.net/docs/livequery/