Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. JQuery not working in user control [modified]

JQuery not working in user control [modified]

Scheduled Pinned Locked Moved ASP.NET
javascriptcsharpsysadmindebuggingtools
4 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    afsal qureshi
    wrote on last edited by
    #1

    Hi, I am just trying to learn JQuery. I want to try out a basic JQuery example. Adding items from one list box to another. It works fine in the normal aspx page (I pasted it in Default.aspx in root directory). I placed JQuery Libraries in a folder Javascript under root. This works fine. Then I created a WebUserControl and placed the same code and I registerd this user control in default.aspx. The page loads , but when I click on Add it does not move items from one list to another. While in the aspx page, I checked the Watch and innerHTML of the context->childNodes has values "Delhi, Bombai ..........". Same as OuterHTML. But in the user control with the same code as pasted below. innerHTML is "" and OuterHTML is "<HTML4F>" Please throw some light to this See the code below:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="User_Controls_WebUserControl" %>

        <!--Add JQuery reference -->
    <script src="../Javascript/jquery-1.4.1.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            debugger;
            //If you want to move selected item from fromListBox to toListBox
            $("#add").click(function () {
                debugger;
                $("#fromListBox  option:selected").appendTo("#toListBox");
            });
            //If you want to move all item from fromListBox to toListBox
            $("#addAll").click(function () {
                $("#fromListBox option").appendTo("#toListBox");
            });
            //If you want to remove selected item from toListBox to fromListBox
            $("#remove").click(function () {
                $("#toListBox option:selected").appendTo("#fromListBox");
            });
            //If you want to remove all items from toListBox to fromListBox
            $("#removeAll").click(function () {
                $("#toListBox option").appendTo("#fromListBox");
            });
    
        });
    

    </script>

    <table>
    <tr>
    <td><asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="6">
    asp:ListItemDelhi</asp:ListItem>
    asp:ListItemChennai</asp:ListItem>
    asp:ListItemPune</asp:ListItem>
    asp:ListItemKolkata</asp:ListItem>

    A N 2 Replies Last reply
    0
    • A afsal qureshi

      Hi, I am just trying to learn JQuery. I want to try out a basic JQuery example. Adding items from one list box to another. It works fine in the normal aspx page (I pasted it in Default.aspx in root directory). I placed JQuery Libraries in a folder Javascript under root. This works fine. Then I created a WebUserControl and placed the same code and I registerd this user control in default.aspx. The page loads , but when I click on Add it does not move items from one list to another. While in the aspx page, I checked the Watch and innerHTML of the context->childNodes has values "Delhi, Bombai ..........". Same as OuterHTML. But in the user control with the same code as pasted below. innerHTML is "" and OuterHTML is "<HTML4F>" Please throw some light to this See the code below:

      <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="User_Controls_WebUserControl" %>

          <!--Add JQuery reference -->
      <script src="../Javascript/jquery-1.4.1.js" type="text/javascript"></script>

      <script language="javascript" type="text/javascript">
          $(document).ready(function () {
              debugger;
              //If you want to move selected item from fromListBox to toListBox
              $("#add").click(function () {
                  debugger;
                  $("#fromListBox  option:selected").appendTo("#toListBox");
              });
              //If you want to move all item from fromListBox to toListBox
              $("#addAll").click(function () {
                  $("#fromListBox option").appendTo("#toListBox");
              });
              //If you want to remove selected item from toListBox to fromListBox
              $("#remove").click(function () {
                  $("#toListBox option:selected").appendTo("#fromListBox");
              });
              //If you want to remove all items from toListBox to fromListBox
              $("#removeAll").click(function () {
                  $("#toListBox option").appendTo("#fromListBox");
              });
      
          });
      

      </script>

      <table>
      <tr>
      <td><asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="6">
      asp:ListItemDelhi</asp:ListItem>
      asp:ListItemChennai</asp:ListItem>
      asp:ListItemPune</asp:ListItem>
      asp:ListItemKolkata</asp:ListItem>

      A Offline
      A Offline
      Abhijit Jana
      wrote on last edited by
      #2

      afsal qureshi wrote:

      Are you sure there is no changes in javascript script file path after moving your code to user control ?

      Cheers ! Abhijit Jana | MVP Web Site : abhijitjana.net | Follow Me @ twitter Read my Latest Article :Mastering Debugging in VS 2010

      A 1 Reply Last reply
      0
      • A Abhijit Jana

        afsal qureshi wrote:

        Are you sure there is no changes in javascript script file path after moving your code to user control ?

        Cheers ! Abhijit Jana | MVP Web Site : abhijitjana.net | Follow Me @ twitter Read my Latest Article :Mastering Debugging in VS 2010

        A Offline
        A Offline
        afsal qureshi
        wrote on last edited by
        #3

        I don't think so. I picked up the Src value from the source selector popup. For Clarification, JQuery-1.4.1.js resides in stays in Javascript folder in root. User Control stays in User Control folder and default page stays in the test folder. Also if path is inorrect we would have got a javacript runitime error

        modified on Saturday, August 28, 2010 1:33 PM

        1 Reply Last reply
        0
        • A afsal qureshi

          Hi, I am just trying to learn JQuery. I want to try out a basic JQuery example. Adding items from one list box to another. It works fine in the normal aspx page (I pasted it in Default.aspx in root directory). I placed JQuery Libraries in a folder Javascript under root. This works fine. Then I created a WebUserControl and placed the same code and I registerd this user control in default.aspx. The page loads , but when I click on Add it does not move items from one list to another. While in the aspx page, I checked the Watch and innerHTML of the context->childNodes has values "Delhi, Bombai ..........". Same as OuterHTML. But in the user control with the same code as pasted below. innerHTML is "" and OuterHTML is "<HTML4F>" Please throw some light to this See the code below:

          <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="User_Controls_WebUserControl" %>

              <!--Add JQuery reference -->
          <script src="../Javascript/jquery-1.4.1.js" type="text/javascript"></script>

          <script language="javascript" type="text/javascript">
              $(document).ready(function () {
                  debugger;
                  //If you want to move selected item from fromListBox to toListBox
                  $("#add").click(function () {
                      debugger;
                      $("#fromListBox  option:selected").appendTo("#toListBox");
                  });
                  //If you want to move all item from fromListBox to toListBox
                  $("#addAll").click(function () {
                      $("#fromListBox option").appendTo("#toListBox");
                  });
                  //If you want to remove selected item from toListBox to fromListBox
                  $("#remove").click(function () {
                      $("#toListBox option:selected").appendTo("#fromListBox");
                  });
                  //If you want to remove all items from toListBox to fromListBox
                  $("#removeAll").click(function () {
                      $("#toListBox option").appendTo("#fromListBox");
                  });
          
              });
          

          </script>

          <table>
          <tr>
          <td><asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="6">
          asp:ListItemDelhi</asp:ListItem>
          asp:ListItemChennai</asp:ListItem>
          asp:ListItemPune</asp:ListItem>
          asp:ListItemKolkata</asp:ListItem>

          N Offline
          N Offline
          Not Active
          wrote on last edited by
          #4

          Have you checked the ids that are being rendered are the same you are looking for? Remember the name mangling that ASP.NET applies. You can check it like this

          $("select[id$='fromListBox'])


          I know the language. I've read a book. - _Madmatt

          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • World
          • Users
          • Groups