SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38

Thread: Ajax help!!!

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax help!!!

    I am building a page with ajax a jquery. I have built the page with a scrolling nav and it works fine. I am taking the next step and loading the html snipet into the DOM with ajax because I have a few navs, one for each section. I got it to load fine but the scrolling jquery nav doesn't work anymore. The markup in the page is perfect it just no longer works. I am new to all this scripting so there must be something I don't know in order to make this work. All the proper scripts are waiting for the markup but there seems to be some sort of disconnect. Can anyone help me with this. (loading markup into a page that uses other scripts)

    The page is local now so I don't have a url. If I you need to see the page I can set it up to get this working.

    Thanks all

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Could you please post the JS source you are using

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/scrollable-horizontal-projectnav.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/scrollable-buttons-projectnav.css" />

    <script type="text/javascript">
    $(document).ready(function(){

    $(".scrollable").scrollable();

    });

    </script>



    <script type="text/javascript">
    $(document).ready(function(){

    //Full Caption Sliding (Hidden to Visible)
    $('.boxgrid.captionfull').hover(function(){
    $(".cover", this).stop().animate({top:'380px'},{queue:false,duration:160});
    }, function() {
    $(".cover", this).stop().animate({top:'400px'},{queue:false,duration:160});
    });

    });
    </script>

    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<img src='images/load.gif' alt='loading...' />";

    // load() functions
    var loadUrl = "identity_nav.html";
    $(".identity").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });
    });
    </script>

    thanks so much for trying to help

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also can't seem to put all the scripts in one ready function. They must be separate to work.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am also noticing that the source doesn't show the inserted markup from the ajax load(). In firebug It is there but the source it is not...?

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I placed the .scrollable script inside the loaded page and it works now, but I am now having trouble loading the rest of the navs.
    Here is the script

    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";

    // load() functions
    var loadUrl = "identity_nav.html";
    $(".identity").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });

    // load() functions
    var loadUrl = "web_nav.html";
    $(".web").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });

    // load() functions
    var loadUrl = "print_nav.html";
    $(".print").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });

    // load() functions
    var loadUrl = "package_nav.html";
    $(".package").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });
    });
    </script>

    I getting the package nav for every click... the last script.
    Do I need to separate each?

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I separated each and it works but this is becoming what looks like a lot of code. Is there a way to shorten this up?

    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";

    // load() functions
    var loadUrl = "identity_nav.html";
    $(".identity").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";

    // load() functions
    var loadUrl = "web_nav.html";
    $(".web").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });

    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
    // load() functions
    var loadUrl = "print_nav.html";
    $(".print").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });

    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){

    $.ajaxSetup ({
    cache: false
    });
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
    // load() functions
    var loadUrl = "package_nav.html";
    $(".package").click(function(){
    $("#projectnav").html(ajax_load).load(loadUrl);
    });
    });
    </script>

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone tell me why when I take this same script above and put it in an external js file I get an error but when directly in the page it is okay.

    The error tells me I am missing an {
    here$.ajaxSetup ({
    cache: false
    });

    It seems fine to me and works fine when directly in the page
    ....?

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The error tells me I am missing an {
    here:
    $.ajaxSetup ({
    cache: false
    });

    sorry about that

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Good to hear you got it working, sorry for the late reply as well. Had a full day at work, try the following. I haven't tested it but it should work fine

    Code JavaScript:
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
     
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
     
        // Returns the URL based on the class given
        var getURL = function(obj){
            switch(obj.attr('class').toLowerCase()){
                case "identity":
                    return "identity_nav.html";
                break;
                case "web":
                    return "web_nav.html";
                break;
                case "print":
                    return "print_nav.html";
                break;
                case "package":
                    return "package_nav.html";
                break;
                default:
                    return;
            }
        };
     
        // Run the Ajax query
        $(".identity").click(function(){
            $("#projectnav").html(ajax_load).load(getURL(this));
        });
     
        // END DOCUMENT READY
    });

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't seem to be working. It just sits there and loads. any idea why?

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    // JavaScript Document


    $(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";

    // Setup the ajax methods
    $.ajaxSetup({
    cache: false
    });

    // Returns the URL based on the class given
    var getURL = function(obj){
    switch(obj.attr('class').toLowerCase()){
    case "identity":
    return "identity_nav.html";
    break;
    case "web":
    return "web_nav.html";
    break;
    case "print":
    return "print_nav.html";
    break;
    case "package":
    return "package_nav.html";
    break;
    default:
    return;
    }
    };

    // Run the Ajax query
    $(".identity").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
    });

    // load() functions
    var loadUrl = "web_nav.html";
    $(".web").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
    });

    // load() functions
    var loadUrl = "web_nav.html";
    $(".web").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
    });

    // load() functions
    var loadUrl = "print_nav.html";
    $(".print").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
    });

    // load() functions
    var loadUrl = "package_nav.html";
    $(".package").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
    });


    // END DOCUMENT READY
    });

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry just say a mistake but still not working. // JavaScript Document $(document).ready(function(){ // Loading image var ajax_load = "
    "; // Setup the ajax methods $.ajaxSetup({ cache: false }); // Returns the URL based on the class given var getURL = function(obj){ switch(obj.attr('class').toLowerCase()){ case "identity": return "identity_nav.html"; break; case "web": return "web_nav.html"; break; case "print": return "print_nav.html"; break; case "package": return "package_nav.html"; break; default: return; } }; // Run the Ajax query $(".identity").click(function(){ $("#projectnav").html(ajax_load).load(getURL(this)); }); // load() functions $(".web").click(function(){ $("#projectnav").html(ajax_load).load(getURL(this)); }); // load() functions $(".web").click(function(){ $("#projectnav").html(ajax_load).load(getURL(this)); }); // load() functions $(".print").click(function(){ $("#projectnav").html(ajax_load).load(getURL(this)); }); // load() functions $(".package").click(function(){ $("#projectnav").html(ajax_load).load(getURL(this)); }); // END DOCUMENT READY });

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was a little messed up hope this is better

    Code:
    // JavaScript Document
    
    
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
       
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
       
        // Returns the URL based on the class given
        var getURL = function(obj){
            switch(obj.attr('class').toLowerCase()){
                case "identity":
                    return "identity_nav.html";
                break;
                case "web":
                    return "web_nav.html";
                break;
                case "print":
                    return "print_nav.html";
                break;
                case "package":
                    return "package_nav.html";
                break;
                default:
                    return;
            }
        };
     
        // Run the Ajax query
        $(".identity").click(function(){
            $("#projectnav").html(ajax_load).load(getURL(this));
        });
    	
    	  //  load() functions    
         $(".web").click(function(){  
         $("#projectnav").html(ajax_load).load(getURL(this));
        });
    	
    		  //  load() functions   
         $(".web").click(function(){  
    	   $("#projectnav").html(ajax_load).load(getURL(this));
        });
    	
    	  //  load() functions   
         $(".print").click(function(){  
    	 $("#projectnav").html(ajax_load).load(getURL(this));
        });
    	
    	  //  load() functions   
         $(".package").click(function(){  
    	$("#projectnav").html(ajax_load).load(getURL(this));
        });
    	
    	
        // END DOCUMENT READY
    });

  15. #15
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry about that, forgot about the jQuery identifiers. You don't need to declare the same code multiple times as it does the same thing

    Code JavaScript:
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
     
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
     
        // Returns the URL based on the class given
        var getURL = function(obj){
            switch(obj.attr('class').toLowerCase()){
                case "identity":
                    return "identity_nav.html";
                break;
                case "web":
                    return "web_nav.html";
                break;
                case "print":
                    return "print_nav.html";
                break;
                case "package":
                    return "package_nav.html";
                break;
                default:
                    return;
            }
        };
     
        // Run the Ajax query
        $(".identity, .web, .print, .package").click(function(){
            $("#projectnav").html(ajax_load).load(getURL(this));
        });
     
        // END DOCUMENT READY
    });

    The above code will work fine

  16. #16
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still just loading? I am I missing something?

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd also like it to fadeIn in possible. How is that done? I know .fadeIn() but when I tried it it didn't work.

  18. #18
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    $(".identity, .web, .print, .package").click(function(){
        $("#projectnav").html(ajax_load).load(getURL(this), function(response){
            $(this).html(response).fadeIn(1000);
        });
     
        return false;
    });

  19. #19
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still just loading
    Code:
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader'><img src='images/load.gif' alt='loading...' /></div>";
       
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
       
        // Returns the URL based on the class given (I think this part is the problem)
        var getURL = function(obj){
            switch(obj.attr('class').toLowerCase()){
                case "identity":
                    return "identity_nav.html";
                break;
                case "web":
                    return "web_nav.html";
                break;
                case "print":
                    return "print_nav.html";
                break;
                case "package":
                    return "package_nav.html";
                break;
                default:
                    return;
            }
        };
     
      $(".identity, .web, .print, .package").click(function(){
        $("#projectnav").html(ajax_load).load(getURL(this), function(response){
            $(this).html(response).fadeIn(1000);
        });
       
        return false;
    });
       
        // END DOCUMENT READY
    });

  20. #20
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Is there a link to which i can view the script live?

  21. #21
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go. Took me a minute to upload as there are a number of files.

    http://www.imiworldwide.com/kaes/portfolio.html

    I am using the script you wrote with the switch action. As you can see it just loads and loads.

    Let me know

    Thanks too for sticking with this

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code:
    obj.attr('class').toLowerCase()
    Problem: obj has no attr method, as obj is an HTMLLIElement

    Try using one of these instead:

    Code:
    $(obj).attr('class').toLowerCase()
    or

    Code:
    obj.className.toLowerCase()
    or elsewhere:

    Code:
    getURL($(this))
    Last edited by paul_wilkins; Jan 12, 2011 at 16:24.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    My fault again, work is making me really tired lately. Try this

    Code JavaScript:
    switch($(obj).attr('class').toLowerCase()){

  24. #24
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works! Thanks so much.

    The fadein isn't working though.

  25. #25
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you also tell me why I cannot put all the scripts into one document.ready?


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
  •