Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

call jquery in HTML with server side controls

Posted on 2012-08-16
12
Medium Priority
?
710 Views
Last Modified: 2012-08-17
I added a textbox(asp.net) in my page. I also added jquery librrary using jquery ui.js files

How would I call jquery  with asp.net controls(server side like textbox)

The jquery Im working on is the datepicker. It just not seem to work and display the date
when I click the textbox.

In the example Im following it uses <input type = "text" id = "datepicker">
I 'd like to know the implementation in a server side control.

textbox ID = "Textbox19"


thanks
0
Comment
Question by:zachvaldez
12 Comments
 
LVL 5

Assisted Solution

by:frmqit
frmqit earned 400 total points
ID: 38302379
Just add the script below on top of your html.

<script>
   $(document).ready(function () {       
        $( "#Textbox19" ).datepicker();
    });
</script>

Open in new window


The function gets executed on page loaded event, so after server returned the final html.
With $( "#Textbox19" ).datepicker(); your input gets set as datepicker. The # is used as indicator for a id followed by the id. So $("#Textbox19") points at the html-element with id="Textbox19". With .datepicker(); you tell the browser to set that element as datepicker.

Hope it helps.
0
 

Author Comment

by:zachvaldez
ID: 38302466
I have several date fields in the page. Should each textbox be address repeatedly using the function or is there a way to call teh function so it be usesable in each case. Thanks
0
 

Author Comment

by:zachvaldez
ID: 38302586
Btw, it does not work. It works if I add property ClientIDMode = "Static"  however when I run it causes an error but does not stop the program :
ClientIDMode is not a member of System.Web.UI.Webcontrols.Textbox
ClientIDMode is not a member of UI
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38303018
Np howmany texboxes you have for using with datepicker

just add all
<script>
   $(document).ready(function () {       
        $( "#Textbox19" ).datepicker();
        $( "#Textbox20" ).datepicker();
        $( "#Textbox21" ).datepicker();
        $( "#Textbox22" ).datepicker();

    });
</script>

Open in new window


all would work without problem
0
 
LVL 18

Assisted Solution

by:Rajar Ahmed
Rajar Ahmed earned 280 total points
ID: 38303470
try this,
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27811717.html

<script>
        $(document).ready(function () {        
            $('input[id^="YourTxtBoxIDFormat"]').each(function () {
                    $(this).datepicker();
            });
        });
    </script>

Open in new window

0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 400 total points
ID: 38303507
Better way to add the class to textbox which you want to be date
e.g.
<input type="textbox1" class="datepicker">

<script>
   $(document).ready(function () {      
        $( ".datepicker" ).datepicker();
       
    });
</script>

So datepicker is enable for all textbox who has the class "datepicker"
0
 

Author Comment

by:zachvaldez
ID: 38303525
Btw,we forgot to address, that it only work if I set the textbox property clientidmode=static but produces compile error like I pointed out earlier post.
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38303707
Hi,

The Control.ClientIDMode property is supported in .NET 4.0 framework.
More Info
http://www.devexpress.com/Support/Center/p/B147970.aspx
http://forums.asp.net/t/1664512.aspx/1

Between you dont need clientmode to work on either of our approach since
1.My approach will match the string similar to that of given id inside jquery and it doesnot matter how your rendered textbox id it may be. Its  like Contains Keyword in .net.
2.Well,classname never going to change and yes its simple.

So, you dont need clientidmode at all .

Meeran03
0
 

Author Comment

by:zachvaldez
ID: 38305053
as a reminder, Im not using
<input type="textbox1" class="datepicker">
but rather server side controls Textbox
0
 

Author Comment

by:zachvaldez
ID: 38305114
<script>
        $(document).ready(function () {        
            $('input[id^="YourTxtBoxIDFormat"]').each(function () {
                    $(this).datepicker();
            });
        });
    </script>

what is "YourTxtBoxIDFormat" here?
0
 

Author Closing Comment

by:zachvaldez
ID: 38305214
I'd like the frmqit first response but sonawikiran's answer brought it to another level,simple and easy approach-  using class in the implementation.thanks
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38305236
hi zachvaldez,
 
   As a note, all server control will be converted to html control after rendering so asp:textbox control will be input textbox of html control. You can check this on viewsource .
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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…
Suggested Courses

810 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