eval will dynamically execute JavaScript code, please note that using it is frequently debated because it can be used to maliciously execute code, but in this case I'm getting it to dynamically call a function which is pretty straightforward.

Let's say I have two tabs, abc and def.  I would then create four functions:

function abc_OnSelect() {}
function abc_OnUnload() {}
function def_OnSelect() {}
function def_OnUnload() {}

The code below will execute the appropriate function when a tab is loaded or unloaded.  I could also add some code in there to have the _OnUnload function return a false if there is some condition that should prevent the new tab to load.

Make sense?

Could you also post your form code?

One thing I just noticed - when I have nested tabs this writes the text on all the sub-tabs too.

My parent tab container has an id of "tab-container" and the child is called "tab-container-admin".

I just saw that was an older version of my code.  Instead of $("#tab-container") I just used the class selector on all jeasyui-tab elements.  It works great.

This worked perfectly!  Thanks!

I'll second the recommendation for using another browser to debug.  The tools that are built into Chrome are amazing for helping to debug this kind of thing.

The easy way to see what's going on is just to drop the url into your address bar.  What does GetJSONData.aspx return?

You could also put custom code into the onLoadError event for the DataGrid.

My users have started to complain about this, too

Sorry, I had forgotten about this.

Code:

     $("#tab-container").tabs({

        "onSelect": function(title){

            if(lastTab != null){
                eval(lastTab + "_OnUnload()")
            }

            eval(util_Simplify(title) + "_OnSelect()");
            lastTab = util_Simplify(title);

        }            
     });

util_Simplify goes through a string and puts everything to lower case and removes all spaces.  The next version of my code will have objects that manage the content for each tab, and that can be handled easily with the code above by changing the _OnUnload() to .OnUnload().

Is there any way to add some text next to the tabs?  Our users have requested that we write some data (user name, server time, etc.) into the UI and we have a lot of blank space in our tab area.

I have tried adding a span behind the <div> tags, but the span content gets written to the bottom of the page and is not in the tab bar.

The attached image shows where we'd like to write text "Message".

I have a very strange issue in Chrome where a textarea in a dialog seems to cache the previous value, but IE7 works exactly as you would expect.  I have attached the file I'm working on.

To reproduce this:

1. Enter a JSON string in the "JSON" field.  This one works well for this purpose:

{"a":"b","c":"d"}

2. Click the "From JSON" button to translate the string into the propertyeditor.

3. Select one of the rows then click "Edit" to bring up the dialog.

4. Change the value then click "OK"

Note that there is a dependency on jquery.json-2.3.min.js in order to parse the strings.

I'll gladly post it after one quick refactor in the next few days.

I have a dropdown that controls the "filter" on a datagrid.  The value of the select object is passed into the URL, and then the datagrid is reloaded with the new parameter:

Code:

    parameters = {
        country: activecountry["Name"]
    };
    
    var url = repository + "?type=repository&action=AMT.GetAllocationSummary&parameters=" + $.toJSON(parameters);
    
    // call init function on datagrid
    $("#" + datagrid).datagrid({
        "url": url
    });

Is there a simpler way to operate on the grid with a new URL and the load method instead of completely recreating it?

I was able to work around this by adding the onSelect event assignment into the onSelect event of the parent tab.

I have nested tabs, and it looks like the first tab in each tab group is loading when

Tab A1
  - Tab B1
  - Tab B2
Tab A2
  - Tab C1
  - Tab C2
  - Tab C3
Tab A3
  - Tab D1
  - Tab D2

When a page with these tabs loads, the onSelect event will fire for D1, but A1 and B1 are actually the visible tabs

Unfortunately that's not an option for me - the server API is restricted.

I have limited the grid to four columns and it is now loading quickly.  I can work around this.