JQuery :: Apply Effects/animations On Ajax Loaded Data From An XML File?
Sep 13, 2010
I am attempting to do two things and I'm missing a vital element: ajax call to an XML file to be inserted onto a page, FOLLOWED by selecting these newly created elements to apply event handlers on them. I am near certain that the problem is that the selectors are not 'seeing' these elments and it's an issue of running the event handler only AFTER these elements have been loaded.
How do you do this? I already have a $(document).ready(function() { in order which I naively thought would take care of this exact issue...
I've googled the heck out of this, and although I'm finding plenty of solutions, I'm having trouble understanding them. I'm very new to jquery, and brand new to ajax. My problem is, I have a php application using several jquery effects. I've just started learning ajax and it is going really well, this stuff is incredible! But all the ajax loaded data loses the jquery effects. I get that it is a DOM issue, and I've seen that others have used "live" (i think?) to fix this, but I honestly just have no understanding of how toimplementanything that I'm seeing.
This is part of my ajax...
And this is the main effect I need to get working.
Simple. The problem is that the effect works on elements already written in the main page, but not onthe elements that come from the asynchronized html! How can I apply the effect on the "new" code too?
I'm loading a (HTML) list from mySql via PHP into a main page using load. The main page is linked to a css file and a js file (jquery). The loaded data assigns the css file BUT does not seem to be able to find the js file as the click handlers in that file do not work. I'm new at this and this is probably a BASIC issue.
$('#mood').html always contains the value of the values food_rate and tax_rate had before I loaded the new values in. (Before Line 1 and 2 happen)I already red, about event bubbling and event delegation, but the html-elements fax_rate and food_rate exist from the beginning, and only their innerHTML does change.
I am trying to replace the names of each link in my html page with $f1 (Page) and replace some content with $f2 (Description).
How would I insert the data from this php file into my html page?
output.php:
mysql_connect(localhost,$username,$password); @mysql_select_db($database) or die( "Unable to select database"); $query="SELECT * FROM Pages"; $result=mysql_query($query);
I have got my ajax file calling the php file properly and executing some code in it, but nothing will get returned with json_encode().
Right now I am skipping form validation and just trying to get a response back of any sort:
Currently my site just shows the 'processing...' string but will change my css class to indicate a sucess.
Here is my ajax calling the php file:
When I change .html(data.msg) to something like html("<p>hello world</p>") I get the string back. So this line is working, but just not recieving 'data.msg' from my php file.
Is Json considered the better file format for loadind data via Jquery AJAX? I am going to use it either way, but from a cutting edge stand point, is JSON looked at a more cutting edge since it loads faster. 2. And for that matter is anyone using css3 and E4X? All these seem to require the latest versions of all browsers. Since my goal is to be cutting edge I was thinking to do some stuff in the above listed that require only the latest browser if it is detected, if not use what works in most all browsers? What are cutting edge web app developers really doing at this time?
I m getting problem while creating a dynamic website. In Ajax I have good tutorial book. but it missing, "how to create XML file filled with data which comes from SQL server. How to retrieve the data from XML file.
I'm writing a little application with JSF 2.0 + jQuery. My page contains a simple input form, a submit button and a div containing one div for each string that the user type in the input text field. i'm using JSF 2.0 ajax to send the request to the server and rerendering only the div-container, with the updated content. Initially the div contains a single div with a text example for the user. Every div inserted by the user has the style-class "user", so with jquery I manipulate all off them through a simple function.
Here my code:
But i've encountered this problem when I started using ajax: my jquery function doesn't work on the new content, so I started trying to resolve the problem with live() method as suggested in the FAQ and on several posts
So my code changed a little:
This code doesn't work at all after the submit event, so for test purpose only i've changed the event to click and ,using the event generated from the mouse click, it's working.
But obviously i need to apply my jquery function right after the ajax request and without the user's partecipation.
I'm testing this code on Firefox 3.6.13, but i need it to work correctly also on IE8, Chrome 8 and Opera 10
What's wrong in my code?I have bound the wrong event to the div-container and instead I have to bind the submit-event to the form?
I am having problems with slideUp/slideDown effects on elements that I add to page with a AJAX callback. slideUp/Down works on elements that are present on the page load, but doesn't work on all elements added later with AJAX.
These items can be added with ajax... Then I have checkboxes that I can filter some items by using jQuery slideUp/Down. If checkbox is clicked some items are hidden or shown. But as said abowe it doesn't affect the newly added items!
I'm trying to use cluetip jquery plugin inside a message_container div which will be updated once in a while through ajax. The plugin works just fine in any other div, but it seems that in message_container div the already loaded external javascripts are not present ie the plugin doesn't work. Do you have any ideas what would be a proper solution for this issue?
After the apply button is clicked, the data entered by the user disappeared in the text form. How to keep the data appearing on the text form? The server use jsp and the Spring framework and the client use the Prototype javascript library.
After the apply button is clicked, the data entered by the user disappeared in the text form. How to keep the data appearing on the text form? The server use jsp and the Spring framework and the client use the Prototype javascript library.
I have an ajax function which passes form field values to a PHP script which in turn saves the data to my database. all works great.
I now need to add a file input to my form and pass the file upload ot the same PHP script.
I have read an article [url] which explains how to do this but this would suggest it is a completely separate function.
My question is, is there anyway I can expand my existing function (below) to inlude the file upload process to save having 2 functions doing the same process?
I have a php script which contains various links which get handled by a jQuery function which in turn passes parameters to and loads another php script. The php script that gets loaded queries a large MySQL database and returns a set of results in an HTML table. Where there is more than 1 page of results the php script provides page numbers which can be clicked on to bring up further pages of results. Where there are more than 20 pages a small algorithm displays an abbreviated set of page numbers,This obviously worked fine when the script was running on its own but now it's being loaded using jQuery it's preumably of no use. Can anyone suggest a way of tackling the problem, I did take a look at various pagination plugins but they didn't seem to be what I was looking for based on what I've said above.
I have my site all set up with a horizontal accordion menu and a content area into which I load a DIV via jQuery from an external php-file.
Let's say I have the content of one category loaded and I offer two links to switch between subcategories. Now of course I could simply have the content in different DIVs - both loaded and only one at a time visible and toggle. But the markup is always the same, only the text in different. So I would prefer not to repeat the markup and instead define the text through a php-variable and an if-else-construction. To achieve a result, I would need to reload (or rather reparse) the already loaded php-file with the new condition when clicking on the subcategory.
Is there a way to "unload" the ajax-loaded file or reload it? I tried simply loading it again and also removing the DIV before that. But it didn't work. Also now not solely the DIV is loaded but the whole page reloaded. Neither
Code JavaScript:
Nor
Code JavaScript:
would do it.
I have been mostly working with php and prefer it in these cases also in terms of progressive enhancement.
I want an identical effect that has three buttons -- print, email, text that does the same thing on the site.I can handle the server-side code (PHP), but I want to know how I can get that exact effect? My JavaScript is a bit above beginners, and I see they are using Prototype with some other effects.Now, on Firefox, I had saved the webpages but when I tried click on either of the 3 buttons, the JavaScript effect did not work. Can anyone show me how to implement something similar on my site?
