Question

within a ascx (usercontrol) I have a created a tab section which contains a number of fields

<div id="divTabs" style="height:320px;">
<ul class="tabs">
    <li><a href="#person">Person</a></li>
    <li><a href="#vehicle">Vehicle</a></li>
    <li><a href="#property">Property</a></li>
    <li><a href="#location">Location</a></li>
    <li><a href="#event">Event</a></li>
    <li><a href="#queryfields">Query Fields</a></li>
    <div class="panelbuttons" id="btnadvClose"><img alt="Close Advanced Search" runat="server" src="~/images/closeButton.png"  /></div>
</ul>
<!-- tab "panes" -->
<div id="person">
<div class="searchdiv">
        <span class="smLabel">Last Name</span><br />
        <input type="text" name="LastName" value="" size="30" />
    </div>
    <div class="searchdiv">
        <span class="smLabel">First Name</span><br />
        <input type="text" name="FirstName" value="" size="30" />
    </div>
    <div class="searchdiv">
        <span class="smLabel">Middle Name</span><br />
        <input type="text" name="MiddleName" value="" size="12" />
    </div>

…edited for brevity

what I would like is to have a input field (represented further down in the code) update with the value entered into the textbox and once the user tabs out of that field

To do this I used the following jQuery code

    function fieldUpdate() {

    var currentValue = $(this).val();
    var field = $(this).attr("name");

    if (currentValue != "") {
        $("#tbsearchterm").append(field + ":" + currentValue + "+");
    }
}

    //person
$(function () {
    //only evaluate input text field
    $("#person :input[type=text]").focusout(fieldUpdate);
});

I initially built this on a test page without the tabs and the above code works fine. However when I add the code to the UiTabs I get nothing. I have even tried to add just an alert to see if I could get the focusout event to fire but nothing.

I’d appreciate any pointers on what I need to do differently to get this to work within the jQuery UI tabs.

thanks in advance

Answer 1

It appears that the main control was nested within side of an ajax update panel. As a result this panel was preventing the code from firing the update. Adding pageLoad() function to the header of the script resolved this issue.

function pageLoad(){
    $(function () {

    $(function () {
        $("#divTabs").tabs();
    });

    function fieldUpdate() {

        var currentValue = $(this).val();
        var field = $(this).attr("name");

        if (currentValue != "") {
            alert(field + ":" + currentValue);
        }
    }
}