Question

list item is not moving from one list box to another . I tried to debug script with firefox but it never goes inside the button.click . I am not sure what am I doing wrong . Thanks for your help.

I have a master page :
then I have a content page where I added:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/UiEffect/dragdrop.js" type="text/javascript"></script>   
</asp:Content>

Here is my html in content page HTML: List box item I am getting from DB using Databind()

<div class="question">

       <asp:ListBox ID="Allitem" runat="server" Rows="7" Width="200px" ></asp:ListBox>

        <input id="ibtnLeft" type="image"  src="../Images/LeftArrow.png" />
        <input id="ibtnRight" type="image" src="../Images/rightArrow.png" />
       <asp:ListBox ID="selectedItem" runat="server" Rows="7" Width="200px"></asp:ListBox>
    </div>

and here is my j-query for dragdrop.js external file:

$("#ibtnRight").click(function ($e) {
    $("select[id$='Allitem'] option:selected").appendTo($("select[id$='selectedItem']"));
    $("select[id$='Allitem'] option:selected").remove(); $e.preventDefault();
});

$("#ibtnLeft").click(function ($e) {
    $("select[id$='selectedItem'] option:selected").appendTo($("select[id$='Allitem']"));
    $("select[id$='selectedItem'] option:selected").remove(); $e.preventDefault();
});

Answer 1

The code in ‘dragdrop.js’ needs to run after the DOM has loaded, or the selectors may miss their targets that haven’t yet been created.

$(document).ready(function(){
  // run initializing code here
});

Also as @Chris has pointed out, the id’s may not render as you think they are. In that case, you can use inline dynamic javascript on the page itself in a script tag:

<script type="text/javascript">
  $(document).ready(function(){
    $('#<%= Allitem.ClientID %>').doSomething();
  });
</script>