This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes Where to put jquery scripts when using ajax enabled tabs? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Where to put jquery scripts when using ajax enabled tabs?" Watch "Where to put jquery scripts when using ajax enabled tabs?" New topic
Author

Where to put jquery scripts when using ajax enabled tabs?

Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Hi

I am using Jquery U.I tabs as a plugin to my site. I thought because I am using them as ajax content that after each time a person clicks on the tab that the previous tab is destroyed not hidden.

So right now when a user clicks on one of my tabs it calls up some files to be loaded up. In these files there are custom jquery javascript files plus jquery plugin I am using. So everything loads up and all is well when the user clicks on a tab.

Now if the user clicks on another tab all the scripts are loaded up for that tab. Now if the user comes back a tab they previously clicked on then all those scripts get reloaded up again and this screws up my site. Since anything they do will happen X amount of times where X is how many times they clicked on that tab.

If they loaded up the tab 10 times and the scripts where loaded up 10 times. Every request they do to the server, or anything popup they click will happen 10times. I do not want this.

I am not sure what to do. I tried to put caching enable caching for the tabs to stop this but there are some times where I need to reload a tab up. Like for instance Tab A has settings that effect Tab B. If the user changes something in Tab A and then loads up Tab B then Tab B should be re-requested again. But I do not know how to do this and this probably will recreate my old problem of the scripts be reloaded up again.

So I have no clue where to put them. I do not think I can put them on page load since most of the controls would not exist at this time and binding would not happen.

Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61082
    
  66

I think you might be confusing the way that the Ajax tabs work with the way that iframes work.

When jQuery makes the Ajax request for a tab's contents, that content is not loaded into a separate window the way that it would be with an iframe. Rather, whatever is fetched from the server as the response is simply loaded into the current DOM and becomes part of the same page.

So yes, if the response contains script, it will be executed on the same page multiple times.

I do hope that your tab responses aren't full HTML pages, are they? They should be HTML fragments suitable for placement within the page.

You can do one of two things:
  • Pre-load all scripts that the tab contents will need in the "main" page so that they're there when the tabs get loaded. This is what I tend to do, and the .live() method is essential for this.
  • Put logic in the scripts to detect whether they've already been loaded, and skip re-defining anything if so.


  • [Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
    Michael Hubele
    Ranch Hand

    Joined: Dec 17, 2005
    Posts: 182
    Bear Bibeault wrote:I think you might be confusing the way that the Ajax tabs work with the way that iframes work.

    When jQuery makes the Ajax request for a tab's contents, that content is not loaded into a separate window the way that it would be with an iframe. Rather, whatever is fetched from the server as the response is simply loaded into the current DOM and becomes part of the same page.

    So yes, if the response contains script, it will be executed on the same page multiple times.

    I do hope that your tab responses aren't full HTML pages, are they? They should be HTML fragments suitable for placement within the page.

    You can do one of two things:
  • Pre-load all scripts that the tab contents will need in the "main" page so that they're there when the tabs get loaded. This is what I tend to do, and the .live() method is essential for this.
  • Put logic in the scripts to detect whether they've already been loaded, and skip re-defining anything if so.



  • Ya probably. I don't know I just thought for some reason that all contents from that tab is destroyed on a click of a new tab.

    No I don't use Full Page Html. I have one main page that contains the html tags like <html>, <body> and in this I have all tabs that has links to my Asp.net MVC controller views. When the tab is clicked it contacts the server and the server returns PartialView(with all html code that is needed for this tab).

    This PartialView currently contains all the needed scripts for this page and it might call other PartialView that I house other html code that is common to my pages on my site(to reduce duplicate code).


    So your saying to take all my plug in scripts and custom scripts from all my tabs(4 tabs in total) and put them all in my main html page and then change all my events to "live"?

    I used "live" only a bit but I know it is used for controls that you will add dynamically will get binded even if the script has run. I also thought I read some forum post saying using too many of them can slow down your site but I never looked into it and I am not sure what this person meant by many. Also how does that work for things that require binding of plugins. Like I use for instance a color picker on my site. How do I make that use "live"?

    As for the second way I don't know how I could make something that looks to see if it is loaded up or not.

    Thanks.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61082
        
      66

    Michael Hubele wrote:I don't know I just thought for some reason that all contents from that tab is destroyed on a click of a new tab.

    The HTML for a tab is replaced when you click the tab a second time. But that won't "replace" any script -- script isn't part of the DOM. Once script is loaded into the page, it's there for the life of the page.

    By the way, using Firebug for Firefox let's you observe exactly what's going on with the DOM.

    So I your saying to take all my plug in scripts and custom scripts from all my tabs(4 tabs in total) and put them all in my main html page and then change all my events to "live"?


    yeah, pretty much. I also make use of the LiveQuery plugin's match handlers.

    I read some forum post saying using too many of them can slow down your site but I never looked into it and I am not sure what this person meant by many


    Me either. It does require some heavy-duty processing -- but I've never noticed any performance degradation as a result.

    Also how does that work for things that require binding of plugins. Like I use for instance a color picker on my site. How do I make that use "live"?

    You can't. But that's where a match handler comes in handy.

    As for the second way I don't know how I could make something that looks to see if it is loaded up or not.



    Michael Hubele
    Ranch Hand

    Joined: Dec 17, 2005
    Posts: 182
    Bear Bibeault wrote:
    Michael Hubele wrote:I don't know I just thought for some reason that all contents from that tab is destroyed on a click of a new tab.

    The HTML for a tab is replaced when you click the tab a second time. But that won't "replace" any script -- script isn't part of the DOM. Once script is loaded into the page, it's there for the life of the page.

    By the way, using Firebug for Firefox let's you observe exactly what's going on with the DOM.

    So I your saying to take all my plug in scripts and custom scripts from all my tabs(4 tabs in total) and put them all in my main html page and then change all my events to "live"?


    yeah, pretty much. I also make use of the LiveQuery plugin's match handlers.

    I read some forum post saying using too many of them can slow down your site but I never looked into it and I am not sure what this person meant by many


    Me either. It does require some heavy-duty processing -- but I've never noticed any performance degradation as a result.

    Also how does that work for things that require binding of plugins. Like I use for instance a color picker on my site. How do I make that use "live"?

    You can't. But that's where a match handler comes in handy.

    As for the second way I don't know how I could make something that looks to see if it is loaded up or not.





    So you still recommend the live way?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61082
        
      66

    I've used both, but I tend to use the "live" approach unless I have a good reason not to.
    Michael Hubele
    Ranch Hand

    Joined: Dec 17, 2005
    Posts: 182
    Bear Bibeault wrote:I've used both, but I tend to use the "live" approach unless I have a good reason not to.


    Ok

    I will try this way and see how it goes.

    So how do I do this "....But that's where a match handler comes in handy. "?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61082
        
      66

    Check out the LiveQuery plugin.
    Michael Hubele
    Ranch Hand

    Joined: Dec 17, 2005
    Posts: 182
    Bear Bibeault wrote:Check out the LiveQuery plugin.


    Hmm I can't seem to find any examples show how to do it on plugins.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61082
        
      66

    http://docs.jquery.com/Plugins/livequery
    Michael Hubele
    Ranch Hand

    Joined: Dec 17, 2005
    Posts: 182


    Hmm I still not sure how to get it to work with jquery plugins.

    Like I have a color picker

    So it looks like this to bind it regularly



    so I tried



    but these do not work so I am not sure how to do it.

    Thanks
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61082
        
      66

    That doesn't even remotely match anything in the documentation.

    With the LiveQuery plugin, you can detect when the elements coming into being so you can wait to apply the picker behavior until the elements are created.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Where to put jquery scripts when using ajax enabled tabs?