Solved

JQuery Tab Null Value Error

Posted on 2014-10-10
1
262 Views
Last Modified: 2014-10-13
I have a JQuery Tab Container.  One of the tabs I have a aspx page with a search box that filers results. When I call the page from the Tab Container and run the filter I get an " Unable to set property 'value' of undefined or null reference" error message. However, when I run the search page independently I do not get any errors.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/jquery-ui.min-1.11.1.js"></script>
  <script>
      $(function () {
          $("#tabs").tabs({
              beforeLoad: function (event, ui) {
                  ui.jqXHR.error(function () {
                      ui.panel.html(
                        "Couldn't load this tab. Please try again!");
                  });
              }
          });
      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
  <div id="tabs" runat="server">
      <ul>
        <li><a href="Search.aspx" id="link1" runat="server">Search</a></li>
        <li><a href="#tab2" id="link2" runat="server">Links</a></li>
        <li><a href="#tab3" id="link3" runat="server">Calendar</a></li>
      </ul>
  <div id="tab1" runat="server" />
  <div id="tab2" runat="server" />
  <div id="tab3" runat="server" />
  </div>
    </form>
</body>
</html>

Open in new window


<head>
<script type = "text/javascript">
    var ddlText, ddlValue, ddl, lblMesg;
    function CacheItems() {
        ddlText = new Array();
        ddlValue = new Array();
        ddl = document.getElementById("<%=PersonList.ClientID %>");
        lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
        for (var i = 0; i < ddl.options.length; i++) {
            ddlText[ddlText.length] = ddl.options[i].text;
            ddlValue[ddlValue.length] = ddl.options[i].value;
        }
    }
    window.onload = CacheItems;

    function FilterItems(value) {
        ddl.options.length = 0;
        for (var i = 0; i < ddlText.length; i++) {
            if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                AddItem(ddlText[i], ddlValue[i]);
            }
        }
        lblMesg.innerHTML = ddl.options.length + " matches";
        if (ddl.options.length == 0) {
            AddItem("No matches", "");
        }
    }

    function AddItem(text, value) {
        var opt = document.createElement("option");
        opt.text = text;
        opt.value = value;
        ddl.options.add(opt);
    }
</script>
</head>
<body>
            <div id="PersonFind">
                <asp:TextBox ID="Search" Width="300px" onkeyup="FilterItems(this.value)" runat="server" /><asp:Button ID="FindPerson" Text="Find" runat="server" OnClick="FindPerson_Click" />
                <br />
                <asp:Label ID="lblMessage" runat="server"></asp:Label>
                <br />
                <asp:ListBox ID="PersonList" Width="300px" AutoPostBack="true" OnSelectedIndexChanged="PersonList_SelectedIndexChanged"  SelectionMode="Single" Height="300px" runat="server" />
            </div>
</body>

Open in new window

0
Comment
Question by:RecipeDan
1 Comment
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 40374334
You can simplify select/listbox add . for example:   htmlSelect.add(new Option(text, dvalue));

In your case :

function AddItem(text, value) {
        if (ddl) {
                       ddl.options.add(new Option(text, value) );
        }
    }
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question