JQuery :: Re-bind To DOM After DIV Content Replace - Ajax?
May 7, 2009
I would like to ask you for help with some behavior with replace DIV content. I understood why it happens but I dont know or I dont clearly understood how I can fight against. When I use ajax jquery call $load and replace DIV with new html content I lost DOM binding for new html elements. I read some articles on internet or on docs.jquery.com and found why.Because new DIV content was load after all page is loaded so I must somehow register new elements into DOM structure, and also i did found manual how solve my trouble on
I am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in.
I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me.
Is there a way to do this for a while. Say I have a dynamic page that generates some td elements. The syntax here is freemarker but you can easily envision your favorite serverside text generating language instead.
<table id="records"> <thead><th>Name</th></thead> <tbody> [#list records as record] <tr> <td class="trigger" id="trigger_${record.ID}" onclick="showDetails (${record.ID})">${record.name}</td> </tr> [/#list] </tbody> </table> <script type="text/javascript"> function showDetails(recordID) { // normally an ajax post but you get the idea window.location = '/record?recordID=' + recordID } </script>
Now I want to get that onclick out of there and bind it using jquery, but I haven't been able to figure out if there is a way to get the parameter there. Apart from putting it in some attribute and looking at it. Is there a cleaner way?
<script type="text/javascript"> $(document).ready(function() { $('#records td.trigger').click(function() { window.location = '/record?recordID=' + ??? how do i get that }); }); </script>
I know I could look at the elements attributes, something like this.attr("id").substring().etc().etc() .. but sometimes there are many parameters to the javascript fn to generate the post and that approach doesn't seem to viable. and there isn't really a standard attribute to use that makes sense for that anyway.
I have previously developed two scripts, both of which work really well, however I want to amalgimate them together if possible? My first script loads the content specified into a single div, replacing the content depending on which function is called, it also displays a loading gif during a timeout of 2 seconds. Here is the page:
I haven't seen much mention of this on the web, and only recently discovered it works.... not sure if this is somehow bad practice or just a lesser known trick, but lately I've been chaining .ready() at the end of .html() when I want to bind events to new ajax data. I presume it's much more efficient than live(), and avoids racing issues. E.G.: $.ajax({ type: 'POST', url: 'myPage.html', success: function(c){ $(".response").html(c).ready(function() { bindNewEvent(".response a"); }); }); function bindNewEvent(o) { $(o).click(funciton() { ...etc... }); }; There's infinite docs about using .ready() to process the document, but not returning HTML. Passing the above along should anyone find it useful or have insight onto why it's seemingly not mentioned elsewhere.
I'm trying to load some html content into a page via the ajax .load() method (wrapped within the $(document).ready() function).After I execute this, I'd like to bind all new span elements from the loaded content to a context menu plugin like this:
$("#selector").contextMenu({ menu: ''myMenu'' },
[code]....
Unfortunately since the span elements are coming from the ajax request,I don't think I can bind a normal event handler as per the plugin. [URL] how to use event bubbling in this situation.
Tried searching but couldn't seem to come up with the language to yield any relevant results. My problem is as follows:I have a block of links inside of which are < smaller > tags which hold a generated piece of text. When a user clicks on one of these links (a.clip) I need the text within #fade to be replaced with the text inside of the < smaller > tags within that link.This is the code I have which only partially works...
$(".clip").click(function(){ var title = $('smaller').html(); $('#fade').html(title);
I'm very new to javascript, I'd like to do is replace "sdfsdf" with "New Stuff". <html xmlns="[URL]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type ="text/javascript" src="../../js/jquery.js"></script> <script type="text/javascript"> $('#quizResults').html('<p>New stuff</p>'); </script> </head> <body> <div id="quizResults"><p>sdfsdf</p></div> </body> </html>
I am trying to define an "onclick" event to a form button, so that when I click this button, content from another webpage will overwrite this page (not open a new webpage). I've tried the below code (sample) which is not working. <form action="/script" method="post"> <..other elements../> <input type="button" name="jump" value="Jump" /> </form> <script type="text/javascript"> $(':button[name="jump"]').click(function() { $(document).load('/path/to/another_page.html'); }); </script>
<span class="date" title="May 14, 2009">14 May 2009</span> and I'd like JQuery script to output it as this:<span class="date" title="">May 14, 2009</span> Basically, I'm checking the browser language and I want to display all dates in US date format to all users with EN-CA and EN-US browser language (and UK format to all other users). Please let me know if there is a better way of doing it, I couldn't find anything.
I have a div ( id="rightheader") and inside there is a table. The following code replace all content of the table with empty space and then remove the table header.
is there a way in jQuery to bind variables to function calls similar as prototype.js does it? See [URL]
E.g. in the slideUp method of jQuery you can specify a callback that is called after the effect has finished. I would like to bind a variable to this call so that it is used inside of this callback as a closure.
I have a site which is rendering some CMS-driven content with empty paragraphs. I'd like to remove these spaces dynamically with jquery. I'm trying this but it doesn't work:
How to just replace all occurences of '<p> </p>' within nothing (i.e. remove them)?
Im working on a 2nd case .I need to replace the content of the welcome box
<div id="welcome"> Today is<br /> Tuesday, May 29, 2007[code]....
with generated text that displays the current date, and the name of a famous person born on that date.Including comments that describe each of the variables used in writing this code and the functions that the code accesses.
how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
I have page with an Ajax request which returns an entire <hml>..</html> page and I would like to use this response data to replace the current page. I wrote the following :
I have a web page describing a procedure using generic names. At the top of the page I have a text box. When the user enters a specific name in the text box, I would like the page to redisplay the procedure using the name entered in the box. For that I started like this: Code:
how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
i try to use ajax with jquery, but i have a problem to make a "while" function inside my jquery file, to replace the former content of a div with the new one :at the beginning i load all the content through php, with a "while" function and then i create the links :
I have some javascript that works in IE, but not in Firefox:Basically, I just want to replace the contents of a span element. Nothing fancy. But all my google searches come up blank, and I'm having a bit of a brain fart.Can anyone show me what is the proper cross-browser method to dynamically replace the text inside a span element?(I did it originally with replaceChild, but after about 500 calls to the js function, the page reloads, and that is not good.
I load content to div using ajax. In that new loaded content are anchors which make another ajax requests, but they don't work. I suppose that it's caused by $(document).ready();
For example:
Anchor with class '.dokosika' in loaded content doesn't work as I want to...
I 'm having an ajax function that polls a server for a response. This response is in fact an html page which is dynamically constructed on the server. What I want is to be a able to replace my current html page ( not only the body ) with the html I am receiving as response from the server. I tried using document.write or innerHTML on html element but none of these does not seem to work. Here is a sample of the code I am using. code..
