JQuery not working in user control [modified]
-
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> -
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>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
-
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
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
-
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>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