jQuery UI Slider not working with usercontrol ! RSS

• • Reply
  

  j.scorpion

  Member

  24 Points

  28 Posts

  jQuery UI Slider not working with usercontrol !

  Aug 17, 2010 04:07 PM|LINK

  Hi all 

  I am using a jQuery UI Slider, which is working fine when I use it directly on web form, but when I am using it from usercontrol, it does not return the values to text boxe (txt_amount). Same Code is working file directly on web form.

  My code is as following.

  ----------------------

  JQuery.js

  ----------------------

  
  

  <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">$(document).ready(function() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">    $("#slider").slider({ min :1, max:100000, values: [1,75000], </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">    slide: function(event, ui) {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $("#amount").val('£' + ui.values[0] + ' - £' + ui.values[1]);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $("#MinPrice").val(ui.values[0]);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $("#MaxPrice").val(ui.values[1]);}</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">    });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">     }); </div>

  
  

  $(document).ready(function() {

      $("#slider").slider({ min :1, max:100000, values: [1,75000], 

      slide: function(event, ui) {

  $("#amount").val('£' + ui.values[0] + ' - £' + ui.values[1]);}

      }); 

   }); 

  -------------------------

  WebControl.ascx

  -------------------------

  
  

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

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"

      rel="stylesheet" type="text/css" />

  <script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script type="text/jscript" src="ucl.js"></script>

  <div>

      <table width="100%">

          <tr>

              <td id="slider">

              </td>

          </tr>

          <tr>

              <td>

                  <asp:TextBox ID="txt_amount" runat="server" AutoPostBack="true" OnTextChanged="amount_OnTextChanged"></asp:TextBox></td>

          </tr>

      </table>

  </div>

  JQuery asp.net

• • Reply
  

  MetalAsp.Net

  All-Star

  112168 Points

  18255 Posts

  Moderator

  Re: jQuery UI Slider not working with usercontrol !

  Aug 17, 2010 04:16 PM|LINK

  Where do you have the .ready() function?  In the user control or the container page?  It's going to be either: $("#<%= amount.ClientID %>") or $('#<%= UserControl1.FindControl("amount").ClientID %>').  One of these two should work, I think.

  C# <--> VB.Net Translator  |  jQuery Widgets
• • Reply
  

  j.scorpion

  Member

  24 Points

  28 Posts

  Re: jQuery UI Slider not working with usercontrol !

  Aug 17, 2010 04:31 PM|LINK

  Hi

  Thanks for your reply

  ready() function is in a separate js file, and I tried its reference on container and usercontrol both. 

  I tried $("#<%= amount.ClientID %>") and $('#<%= UserControl1.FindControl("amount").ClientID %>') as well, but does not make any difference.

• • Reply
  

  MetalAsp.Net

  All-Star

  112168 Points

  18255 Posts

  Moderator

  Re: jQuery UI Slider not working with usercontrol !

  Aug 17, 2010 08:34 PM|LINK

  <%= doesn't work in external js files. You can declare a var in the aspx file itself and set it to the <%= part which you can use in the jQuery code that's in your js file.
  

  C# <--> VB.Net Translator  |  jQuery Widgets
• • Reply
  

  mylok

  Member

  436 Points

  176 Posts

  Re: jQuery UI Slider not working with usercontrol !

  Aug 18, 2010 04:10 AM|LINK

  Instead :

  $("#amount")

  use:

  $("[ID$=amount]")  or $("[ID$=txt_amount]")  

  • Marked as answer by j.scorpion on Aug 18, 2010 06:44 AM
• • Reply
  

  j.scorpion

  Member

  24 Points

  28 Posts

  Re: jQuery UI Slider not working with usercontrol !

  Aug 18, 2010 06:43 AM|LINK

  mylok

  Instead :

  $("#amount")

  use:

  $("[ID$=amount]")  or $("[ID$=txt_amount]")  

  
  

  it worked.... :)

  Dear MetalAsp.Net and mylok thanks alot for your help....

  cheers