Advanced Search

Results 1 to 4 of 4

Thread: Re-Apply Jquery on ajax load of HTML

  1. #1
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re-Apply Jquery on ajax load of HTML

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem: I am trying to incorporate:

    1. Ajax loading html content into div container
    2. featured slideshow load on ajax

    the content of html is load well but the jquery of featured slideshow doesn't work. You can see here :

    working featured slideshow
    Not working featured slideshow load by ajax

    as you can see in working featured slideshow, when you are mouseover the fragment is working, but when load by ajax the script doesn't work

    here is the ajax script i used
    Code:
    <a href="#" onmouseover="javascript:ajaxpage('ajaxfiles/hotel.html', 'rightcolumn'); loadobjs('css/style.css', 'css/slide.css', 'js/jquery1.3.2-min.js', 'js/jquery-ui1.5.3-min.js', 'js/featured.js')">See Hotel</a>
    and this jquery script for featured slideshow (featured.js)
    Code:
    $(document).ready(function(){
    		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
    	});

    Big Thanks in advance

  2. #2
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content : Javascript is not load/working

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem: hi all, please help me. when i load my page by dynamic ajax content, the content is load well,css is also working. but the problem is my java script is not working. i have a test link here:


    load without script ajax

    load by ajax

    any thoughts why the JS is not working?

    i really need this dynamic ajax content to load it..many thanks for your help.
    dhanykoe

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    AJAX doesn't automatically import javascript in the same way as loading the page into its own window or an iframe will. Usually there are workarounds though.

    I don't really get what your script is doing. Looks like some kind of a menu. Generally those sorts of scripts initialize onload of the DOM (document.ready in jQuery) or onload of the page. There are no load events when importing via AJAX. There is an onreadystatechange event and it's used to determine when the requested content is available. When it is, it's injected into the page. Right after that is often the opportunity to initialize that content to a script or scripts. But there are also other strategies. Chief among those is instead of initializing any content, have the script it listen for events. If these events occur on content that fits certain criteria, it can react in the manner it previously would have had it initialized that content.

    Both of these methods involve having your other script(s) and style(s) already on the 'top' page.

    The document ready code in this case appears to be in featured.js and is the only thing in that script:

    Code:
    $(document).ready(function(){
    		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
    	});
    Which appears to use the jQuery UI tabs method to make some kind of rotating nav setup. Here's what I would suggest. Get rid of the highlighted:

    Code:
    <div id="leftcolumn">
    <a href="#" onmouseover="javascript:ajaxpage('ajaxfiles/tour.html', 'rightcolumn'); loadobjs('css/style.css', 'css/slide.css', 'js/jquery1.3.2-min.js', 'js/jquery-ui1.5.3-min.js', 'js/featured.js')">See Hotel</a>
    Put those styles and scripts (except for 'js/featured.js) on the 'top' page. Then in ajaxload.js around line #34:

    Code:
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    Make that like so:

    Code:
    function loadpage(page_request, containerid){
    	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
    		document.getElementById(containerid).innerHTML=page_request.responseText;
    		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
    	}
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dhanykoe (09-24-2012)

  5. #4
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Dear Jhon

    Thanks a lot for your help on explanation above, really helpful and now the JS is working.

Similar Threads

  1. Replies: 4
    Last Post: 08-26-2012, 02:21 PM
  2. Resolved [jquery UI] how to apply in .php or html?
    By hosam in forum JavaScript
    Replies: 3
    Last Post: 01-28-2012, 12:23 AM
  3. Reapply javascript on Ajax load of HTML
    By jacobcatalyst in forum JavaScript
    Replies: 0
    Last Post: 02-25-2009, 09:39 PM
  4. apply AjAX in my form
    By cstan in forum JavaScript
    Replies: 11
    Last Post: 11-27-2006, 02:45 PM
  5. Replies: 1
    Last Post: 07-28-2006, 08:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •