Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Got jScript error after I added a regular expression validator to a textbox in gridview's edit template

Posted on 2015-01-06
32
Medium Priority
?
98 Views
Last Modified: 2015-06-12
Hi, I'm using vs2012
I have a gridview where the last column is a datetime column and I also have changed this column from boundfield to a Templatefield.  I used the script from here http://forums.asp.net/t/1668230.aspx?JQuery+Datepicker+for+edit+item+template+textbox+in+gridview 
and the calendar pops up nicely until I added a regular expression validator to the edit template.  I got the following error when I click the Edit button on the grid.  The code highlited is " $("input[type=text][id*=txtExpDate]").datepicker();" and the error is:
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'

Attached is my gridview controls code, including the validator setting.  If I remove the validator then it works fine again with the popup calendar.

Thank you.
grid.html
0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 9
  • 5
32 Comments
 
LVL 41

Expert Comment

by:guru_sami
ID: 40534693
I would check the rendered html and see if something else is named txtEXPDate
Try adding a CssClass to the textbox and find the control via $('.someclassname ') for troubleshooting purpose.
0
 

Author Comment

by:lapucca
ID: 40536349
Hi,
No, there is no duplicate name of txtExpDate.  I'm attaching the site.master file.  Thank you for your help.
Site.txt
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 40537058
I would add a check on length before assigning the datepicker like:

if($("input[type=text][id*=txtExpDate]").length>0)
  $("input[type=text][id*=txtExpDate]").datepicker();
0
Learn Veeam advantages over legacy backup

Every day, more and more legacy backup customers switch to Veeam. Technologies designed for the client-server era cannot restore any IT service running in the hybrid cloud within seconds. Learn top Veeam advantages over legacy backup and get Veeam for the price of your renewal

 

Author Comment

by:lapucca
ID: 40538548
Hi, I did as you suggested but at run time when I click on that date column in Edit mode, I get the same error and VS highlite the same loc.   There is date in that column no doubt.  But somehow there is a conflict between the validator control and the jQuery datepicker.

    <script>
    $(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
        bindPicker();
    });
    function bindPicker() {
        if ($("input[type=text][id*=txtExpDate]").length > 0)
            $("input[type=text][id*=txtExpDate]").datepicker();
    }
</script>
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 40540938
When you are in the edit mode, can you view source and share the html from the browser.
0
 

Author Comment

by:lapucca
ID: 40562520
Hi, Sorry it took a while but I was called to work on something else.
Attached is the Source code from Browser.  The code works fine until I added the Regular expression validator control.  You can see the first row of the grid (table) int he source, there is the validator.  This source is taken when I was in Grid's Edit mode, after the pop up jScript error.  appreciate your help, thank you.
ValidatorJscriptError.html
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40568338
replace :
    <script>
        $(document).ready(function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
            bindPicker();
        });
        function bindPicker() {
            if ($("input[type=text][id*=txtExpDate]").length > 0)
                $("input[type=text][id*=txtExpDate]").datepicker();
                      
        }
</script>

Open in new window

by :
    <script>
        jQuery(document).ready(function ($) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
            bindPicker();
        });
        function bindPicker() {
            if (jQuery("input[type=text][id*=txtExpDate]").length > 0)
                jQuery("input[type=text][id*=txtExpDate]").datepicker();
                      
        }
</script>

Open in new window

0
 

Author Comment

by:lapucca
ID: 40570809
Hi Lea,
I replace with your code and gets the same jscript error at the same LOC,
jQuery("input[type=text][id*=txtExpDate]").datepicker();

Also, I want to bind to datepicker even if it's a blank field.  I guess I would remove the if lenght> 0 LOC.   Thank you.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40570837
we can't help you without having a link to your page
0
 

Author Comment

by:lapucca
ID: 40570962
This is an Intranet site so I can't provide you with access.  i did submit the source code from browser, that doesn't work?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40571509
I don't see your project attached anywhere, just a page, I don't want to search all the plugins one by one, I would prefer that you to open a port on your router during some minutes :)
0
 

Author Comment

by:lapucca
ID: 40571648
Lea,
I understand that it will be more clear with the entire project/solution submitted.  This is a ldap program that access our AD directory an modifies some accounts.  I don't think it's a good idea to either give you access or upload the project.  Even if I remove some sensitive code/information, I'm afraid if I left out something sensitive than that would be a problem.  Okay, please close ticket.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40571658
you can just create a separate site, test site... I was assuming you already have one, you should.
0
 
LVL 41

Accepted Solution

by:
guru_sami earned 1000 total points
ID: 40571845
Can you try searching the element by a css class selector instead of id.

Another way to debug is looking at the object itself and see what element is it point to e.g.

var txtedit = $("input[type=text][id*=txtExpDate]");

Open in new window


Set break point in firebug or IE dev tools and see what is txtedit.
0
 

Author Comment

by:lapucca
ID: 40573273
I look at txtedit property but it just lists a lot of functions.
txtEdit.png
0
 

Author Comment

by:lapucca
ID: 40573338
Attached is the screen shot of the context field of txtedit.  Please let me know if there is other field that you would like me to expand and take screen shot.  I'm not sure what I'm looking for.  Thank you.
txtedit2.png
0
 

Author Comment

by:lapucca
ID: 40573414
I suspect the previous state wasn't selecting the txtbox becuase it can't just use asp.net id.  I believe it needs to use the client id. How to change this select statement to incorporate the clientId  of txtExpDate?  Something like txtExpDate.ClientID

       function bindPicker() {    
                $("input[type=text][id*=txtExpDate]").datepicker();
        }

Thank you.
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 40573530
Usually you do like
: <%=txtExpDate.ClientID%>

But I don't think you will be able to use ClientID because the input is inside of a GridView.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 40573944
if (jQuery("input[type=text][id*=txtExpDate]").length > 0) // <---- this line say : if you found the field do a datepicker with it (next line)
                jQuery("input[type=text][id*=txtExpDate]").datepicker();

Open in new window

0
 

Author Comment

by:lapucca
ID: 40573990
Lea,
In Debug mode, it shows that the correct textbox in Gridview Edit mode is selected.  Please see the 2 attached screen shot.   In the VS Intellisense also shows up datepicker when I type the :.: after the select statement,  $("input[type=text][id*=txtExpDate]")

Because of the Validator control, this creates the MS jScript error.   Thank you.
txtedit3.png
txtedit4.png
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40574001
doesn't look like a jQuery object...
could you do the same screen copy with code in place from my comment ID: 40568338 ?
0
 

Author Comment

by:lapucca
ID: 40574079
Lea, I searched for 40568338 here and it brings me right back to this question.  How do I get there?  

I'm not sure what do you mean about it doesn't look like a jQuery object.  It seems t me it got passed the "if" select statement.  The screen shots I submitted is for the object selected using "($("input[type=text][id*=txtExpDate]")"  
the object selected array, [0], when expanded seems to return the correct textbox object selected, the default value of "1/29/2014", is the correct date and the name, "+            name      "ctl00$MainContent$gridAccounts$ctl11$txtExpDate"      String
seems right to me too.  

Thank you.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40574091
replace :
    <script>
        $(document).ready(function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
            bindPicker();
        });
        function bindPicker() {
            if ($("input[type=text][id*=txtExpDate]").length > 0)
                $("input[type=text][id*=txtExpDate]").datepicker();
                      
        }
</script>

Open in new window

by :
    <script>
        jQuery(document).ready(function ($) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
            bindPicker();
        });
        function bindPicker() {
            if (jQuery("input[type=text][id*=txtExpDate]").length > 0)
                jQuery("input[type=text][id*=txtExpDate]").datepicker();
                      
        }
</script>

Open in new window

0
 

Author Comment

by:lapucca
ID: 40575665
Lea,
Your new code got rid of jScript error, but, it also got rid of the pop up calendar.  When I click txtExpDate cell, the calendar no longer pops up.  
Thank you.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40575709
that's a good thing, that just mean, the field is not present in the page when you run the code
  <script>
        jQuery(document).ready(function ($) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
            bindPicker();
        });
        function bindPicker() {
            if (jQuery("input[type=text][id*=txtExpDate]").length > 0) 
            {
                jQuery("input[type=text][id*=txtExpDate]").datepicker();
              }
           else {
               alert("field not found !!");
           }        
        }
</script>

Open in new window

with Chrome browser, do a  right click near the field, choose view source and post it here after removing sensitive data if needed
0
 

Author Comment

by:lapucca
ID: 40575927
Lea,
I tested the new code you provided in both Chrome and IE.  It seems that the textbox field is not found when the gridview is not in edit mod, which is correct, because the alert box would pop up.   Once I clicked the Edit on the grid then no alert pops up.  Also, in Chrome and Firefox no jScript error but in IE it still shows up .

Also in IE I can put break point in the script.  It does break at this line, which means it does find the field.  But it also gives jscript error when I run this loc.
jQuery("input[type=text][id*=txtExpDate]").datepicker();

Thank you.
0
 

Author Comment

by:lapucca
ID: 40575958
Attached is the Firebug console with error when I run the script.  It doesn't recognize datepicker()?
firebug-err.png
0
 

Author Comment

by:lapucca
ID: 40580434
Lea,
What about getting rid of the Regular Expression Control form asp.net that's causing the jscript error and instead is it possible to write a jscript to run after user enters a date manually instead of using the date picker?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40580438
0
 

Author Comment

by:lapucca
ID: 40628564
Please close this.  I found an alternative solution.  I validate in the code behind and display an error message if there is an issue.  thank you.
0

Featured Post

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!

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

618 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