[RESOLVED]jquery on user control not working

Hi,

I am trying to use datetimepicker in a user control with jquery. The code is as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testPage.ascx.cs" Inherits="MyPro.testPage" %>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function () {
     

        jQuery('.timepicker').timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });

    });
</script>

       <asp:TextBox ID="txtStartTimeForDate1" runat="server" CssClass="timepicker" /> 


When i use the same block in regular html page, it works perfect but when I try to use the same thing in my user control ascx page, it doesn’t do anything. But the interesting thing is if i use the jquery from the website link where i downloaded, it works
in ascx page. Can anyone please tell me why is that and how to make it work on my user control without using the jquery directly from the website?

I also tried using following block in the scripts section:

<script type="text/javascript">
    jQuery(document).ready(function () {
     

        jQuery("#<%=txtStartTimeForDate1.ClientID%>").timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });

    });
</script>

But nothing happens in user control. :(

The code looks as if it would work properly.

Are you sure that all of your jQuery references (scripts) are being loaded properly and are being targeted at the proper locations? You can generally check this by using the Developer Tools (F12) within your browser and checking the Console.

You might also try using the ‘$’ syntax, which is a bit more common although I doubt it will make any difference as it is probably an issue with a file being improperly referenced :

<script type="text/javascript">
    $(function () {
        $('.timepicker').timepicker({ hourGrid: 10, minuteGrid: 10, timeFormat: 'hh:mm tt'});
    });
</script>

Using a class is going to be the easiest way to target elements like these within ASP.NET as opposed to IDs which will generally require the use of the ClientID property to access the appropriate ID.

Yes i have used "$" sign before but nothing happened. If i use the same thing in html page which is also in the same project solution, it works but it doesn’t work in ascx page. :(

Have you tried including the jQuery code within your User Control? It’s likely that it may not simply be wiring up your picker to the element in the user control at the right time. Could you consider posting a very basic example of your markup? It might
make it a bit easier to troubleshoot.

Here is the overall code in the user control that I have been trying.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testPage.ascx.cs" Inherits="MyPro.testPage" %>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {   
        jQuery("#<%=txtStartTimeForDate1.ClientID%>").timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });
    });
</script>
       <asp:TextBox ID="txtStartTimeForDate1" runat="server" CssClass="timepicker" /> 

Like as I said, in the script section, I tried using ".timepicker" instead of "#<%=txtStartTimeForDate1.ClientID%>" and "$" instead of JQuery. But nothing happens. But in html, the same thing works. The code in my html is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>


<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtStartTimeForDate1').timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });
    });
</script>
<input type="text" name="txtStartTimeForDate1" id="txtStartTimeForDate1" value="" />
</html>

I don’t know why is this happening.

Have you tried using the Developer Tools (F12) within your browser and checking the Console to see if any errors are present? It might help point you in the right direction as to what might possibly be going wrong.

You could also consider throwing an alert within your jQuery code to actually ensure that it is being hit.

I did put the breakpoints and tried that way but didn’t give any errors..

And the Console area of the Developer Tools didn’t indicate any errors either?

I didn’t see anything when i tried in console in the browser as well. I am not used to with checking with console area of the Developer Tools though. So I might be doing wrong. Since I have that text box and when i put or click the textbox, it should pop
up the time picker which is not happening. So I am not sure how to check it in console.

Your code seems to be absolutely fine. To resolve the problem, you should check exact error that causing the issue in opening timepicker.

In Firefox,You can check it using firebug addon.

In chrome, You can check it using directly pressing ctrl+shift+j key combination.

SuchiSayami

I didn’t see anything when i tried in console in the browser as well. I am not used to with checking with console area of the Developer Tools though. So I might be doing wrong. Since I have that text box and when i put or click the textbox, it should pop up
the time picker which is not happening. So I am not sure how to check it in console.

It will vary slightly depending on the browser that you are using.

Generally, you’ll just need to press F12 within your browser to launch either a Developer Tools section or a new window with your Developers Tools in them. Within this area, you should see a tab that says "Console" and will need to click it to display the
results of the Console. After this area is present, simply refresh your page and see if any errors are present within there.

If opening timepicker had problem, it won’t even show when i tried it in hmtl, will it? The same code when i tried in html page is working great. Just in the ascx page, it didn’t do anything. But again, if i give website path for the same jquery file, it
works in ascx page.

Now I can see the error. It gave some syntax error. But the same jquery was working for html page. And also if i use the website path, the same jquery doesn’t give any errors. Strange.

Problem solved… I registered the jquery script in the code behind and no more errors.

Leave a Reply