Access oldPanel hidden HTML variable in jQuery-UI Tab

Question

I am using jQuery 1.6.2 and jQuery-ui 1.9.0. I have some tabs like these:

<li><a href="#document-tab" onclick="return documentTabGet('CRFilingDocument.do', null);">Documents</a></li>
<li><a href="#litigant-tab" onclick="return litigantTabGet('CRFilingLitigantDetail.do', null)">Litigants</a></li>
<li><a href="#scheduling-tab" onclick="return schedulingTabGet('CRFilingScheduling.do', null);">Scheduling</a></li>

I have setup a beforeActivate function

jQuery("#reviewtabs").tabs({ 
    select:
        function (event, ui) {
            return CheckSomething();
        },

    show: 
        function (event, ui) { 
            //do some stuff
        },
    beforeActivate: 
        function( event, ui ) {
        return CheckSomething();
    }

});

On the JSP that renders one of those tabs I would like to check a hidden HTML input in the beforeActivate. In Chrome console I can see the HTML from typing ui.oldPanel, how get access to the hidden fields value? I have tried ui.oldPanel.find("dirtyCheck").value and it comes back undefined.

Thanks,

Tom

Answer 1

Ok, if ui.oldPanel is not undefined, we need to know what dirtyCheck is. Is it the input id ? the input css class ? or something else ?

If dirtyCheck is the id of the <input id="dirtyCheck" type="hidden" value="..."/> you are looking for, you can get its value using an id selector and the .val() method :

ui.oldPanel.find('#dirtyCheck').val();

If dirtyCheck is its css class, use a css selector and the .val() method :

ui.oldPanel.find('.dirtyCheck').val();

If the returned value is still undefined, double-check that your input is really in the ui.oldPanel :) and give us the html where the input is.