Jquery Calender script into .js file

Question

0.00/5 (No votes)

See more:

I have this script on .aspx file

JavaScript

$(document).ready(function() {
    $('#<%=txtdateofjoin.ClientID %>').datepicker(
          {

              dateFormat: 'dd/mm/yy'
          }

         );

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        $('#<%=txtdateofjoin.ClientID %>').datepicker(
          {

              dateFormat: 'dd/mm/yy'
          }

         );

    }
});

Its working and i tried to make this script as .js file

1) i have Created .js file
2) I dropped a Jquery plugins
3)

JavaScript

/// <reference path="jquery-1.8.3.min.js" />


$(document).ready(function() {
    $('#<%=txtdateofjoin.ClientID %>').datepicker(
          {

              dateFormat: 'dd/mm/yy'
          }

         );

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        $('#<%=txtdateofjoin.ClientID %>').datepicker(
          {

              dateFormat: 'dd/mm/yy'
          }

         );

    }
});

named as CustomCalender.js

and I dropped CustomClender.js file to my .aspx but this script not Working.

Why it doen't work? how to rectify it ?

Posted 11-Dec-14 19:07pm

King Fisher

Updated 11-Dec-14 20:05pm

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 1:15am

Have you checked the Developer Tool Console window?

King Fisher 12-Dec-14 1:24am

how to check that? Am i doing Right?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 1:34am

Do you have FireBug installed on FireFox? Else just press F12 in any browser and load the page again, left that F12 Window open. And see that there is one Console Tab on that window. Click and see what errors are listed there.

King Fisher 12-Dec-14 1:51am

i have that but the Console Tab is Empty

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 2:07am

After opening that window, did you reload the page again?

King Fisher 12-Dec-14 2:24am

I got This Error:

Error: Syntax error, unrecognized expression: #<%=txtdateofjoin.ClientID %>

throw new Error( "Syntax error, unrecognized expression: " + msg );

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 2:32am

Okay. That means you have error.

Why do you have the date picker defined inside the EndRequestHandler? Please remove that and test once. I hope, that is not necessary.

King Fisher 12-Dec-14 2:53am

I removed this:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('#<%=txtdateofjoin.ClientID %>').datepicker(
{

dateFormat: 'dd/mm/yy'
}

);

}

still the Same Error

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 3:33am

I have answered. Please see. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-12-11T21:33:00

Solution 1

Hey King,

I got the problem. Actually, you are trying to ClientID, which is unknown to JavaScript. When you place the same code in the Page, it is actually converted to the appropriate ID of the Control, because .NET Engine converts that while rendering. You can check how it converts the code to render the actual ID in Developer Tool's Script Tab. Click on that Tab, see the inline script file.

But if you write the same code in External js file, it cannot convert that code. You can check following the same procedure. See that the code is as it is. So, the Error.

So, I suggest you to keep the code inside the Page itself. Else, you have to either replace the <%=txtdateofjoin.ClientID %> with the actual ID of control after rendering (you can check that in the rendered HTML, by inspecting the element). You can also make ClientIDMode to static, so that the ID will not change and you can only use $('#txtdateofjoin') anywhere.

Posted 11-Dec-14 21:33pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 11-Dec-14 21:35pm

v2

Comments

King Fisher 12-Dec-14 4:12am

Thanks .But I have Controls in ContentPlaceHolder ,so can't i make this as Externel File?
Do i have to keep the Script in .aspx page itself?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 5:18am

As I said, if you want to have them in external file, you have to set ClientIDMode = static. Try with that.

King Fisher 12-Dec-14 5:47am

Not Woring :(

I referred this
http://www.mindfiresolutions.com/ClientIDMode-on-AspNet-40-1151.php

it says ClientIDMode property on DotNet Framework 4.0 but I have 3.5 :(

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:06am

Okay, then just go to the rendered html and check what is the ID of that TextBox. Just copy that and replace in the external js file.

King Fisher 12-Dec-14 6:08am

external file is working when its an normal .aspx page (means without Master Form)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:18am

Yeah, that will. Because the ID remains the same. When you use Master Page, it will change the ID appending the Content Place Holder ID at the beginning.

King Fisher 12-Dec-14 6:26am

nope
<asp:TextBox ID="txtFromDate" ClientIDMode="Static" runat="server">

external File:

$(document).ready(function() {
$('#txtFromDate').datepicker(
{

dateFormat: 'dd/mm/yy'
}

);

});

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:38am

Dude, I said yes, because you said it works when you use only aspx page, no Master.

But as you said, you are working with 3.5, so ClientIDMode won't work with you. I think you are not getting me.

Let me explain again...

1. As you are in 3.5, ClientIDMode won't work for you. So, remove that.
2. If you want to use Master Page, then go to the rendered HTML of Page in browser and locate that TextBox and copy its ID. Go to External js file and replace with correct ID.
3. If you don't want to use Master Page, then directly use the ID.

King Fisher 12-Dec-14 6:40am

Thanks :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:42am

Is it working now?

King Fisher 12-Dec-14 6:47am

Yeah dude .
1)I Right Clicked the Page on Browser
2) choosed View Page Source
3)Located that Textbox which Id named as "ctl00_ContentPlaceHolder1_txtFromDate"
4) pasted at Externel File.
Thanks dude :) you helped me a lot :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:55am

That is what I was talking about. Good work dude. :)

King Fisher 12-Dec-14 7:01am

Yes it is .but its take my whole Day :(

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 7:07am

No issues. At the end of the day, you learnt many things.

1. You explored what FireBug or Developer Tool is.
2. You explored how to use Console and Script Windows. There are many things to explore here. You can debug the script also.
3. You learnt about the ClientIDMode and what is it functionality.
4. Also, how Master Page changes the ID.

These will definitely help in long run. You can't imagine the power of a Developer Tool in debugging and finding the solution. At least now, you got started. There are many things to explore.

King Fisher 12-Dec-14 6:44am

Its working :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:45am

Awesome. Please accept the answer. :)

Thanks. Nice talking to you. :)

King Fisher 12-Dec-14 6:48am

of course :)

King Fisher 12-Dec-14 6:49am

sorry I disturbed a lot ,I'm Beginner

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 6:55am

Hey... No need to sorry. I enjoyed. Don't feel that I am disturbed or something like that. :)

Cool. :)

King Fisher 12-Dec-14 7:04am

you are cool guy :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 7:17am

hehe. :) Yeah, always. If you want, you can connect with me on social networks (details on my Code Project Profile).

Or just contact me on my Blog - http://taditdash.wordpress.com/.

King Fisher 12-Dec-14 7:22am

you looking handsome :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 7:46am

haha. :) Thanks. :)

King Fisher 12-Dec-14 8:22am

Can you look here:

http://www.codeproject.com/Questions/852811/Jquery-Dialogbox-in-webforms?arn=0

King Fisher 12-Dec-14 6:36am

I checked the console it says :

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;