Solved

Javascript in a user control not working

Posted on 2016-11-02
17
81 Views
Last Modified: 2016-11-20
Hi,
I had a form with a text box and a javascript function on the Onblur event of the textbox that checks if the value is a valid number.
It worked fine.
I moved the textbox and javascript function into a user control, and now the javascript function is not firing on the OnBlur event.

Does the function has to be called, differently, or placed in a different location?

Thank you for your help

User control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="sks_SectionUpd.ascx.cs" Inherits="Sapphire_MarkingPlatform.Control.Assessment.Builder.sks_SectionUpd" %>

<asp:Panel ID="pnlSection" runat="Server" Width="98%" CssClass="Panel_SectionUpd">

    <asp:Panel ID="pnlSectionDesc" runat="server" Width="95%" CssClass="PanelSectionBox">
        <sks:RichTextBox ID="txtTitleDesc" runat="server" ShowCharUsed="false" TextBoxWidth="98%" Width="100%" />
    </asp:Panel>

    <hr style="width: 98%" />
    <asp:TextBox ID="txtMark" runat="server" Width="20%" CssClass="time" onblur="CheckMark(this)" />
    <asp:Label ID="lblMarkAvailable" runat="server" CssClass="rimage" Visible="true" />
    <asp:Label ID="lblMark" runat="server" Visible="False" />

</asp:Panel>


<script type="text/javascript">

    function CheckMark(obj) {
        var txtMark = document.getElementById(obj.id);

        var Mark = txtMark.value;
        var Val = Mark.match(/^\d{0,10}(?:\.\d{0,2}){0,1}$/);

        if (!Val) {
            alert(Mark + " is not a valid mark");
            txtMark.value = "";
            txtMark.focus();
        }
    }
</script>

Open in new window

0
Comment
Question by:AnneSKS
  • 7
  • 5
  • 3
17 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41871656
That code works fine when I test it.

Can you do the following
1. Check the console (F12) on the page and see if there are any errors reported there
2. Either provide a link to the page OR post the generated HTML for the page (View source - cut + paste) and paste the content here
0
 

Author Comment

by:AnneSKS
ID: 41871679
Hi Julian,
Yes, I know it was working fine when it was in a page, it's when I moved it to a user control that it stopped working

I checked the console and could not find any error, however I am not too sure I am necessarily , looking at the right place.

I have attached the generated HTML page.

Thank you for your help :)

Anne
Javascript-check-error.txt
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41872961
I noticed you've the  CheckMark twice in the page.
Else it work fine here : https://jsfiddle.net/oqa18nm8/

Look like you've a least twice your control in the page.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:AnneSKS
ID: 41873162
Hi Leakim,
It does work for me as well when the control and javascript function are in a page.
It does not work when the control is in a usercontrol. This is the problem.

Thank you for your help.

Below is the full user control, I don't think I have CheckMark twice:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="sks_SectionUpd.ascx.cs" Inherits="Sapphire_MarkingPlatform.Control.Assessment.Builder.sks_SectionUpd" %>

<asp:Panel ID="pnlControl" runat="Server"  Width="98%" > 
    
    <asp:Panel ID="pnlParameter" runat="Server" visible="false">
        <asp:Label ID="lblAssessID" runat="server" />
        <asp:Label ID="lblOrgID" Text="true" runat="server"  />
        <asp:Label ID="lblSectionNo" runat="server" />
        <asp:Label ID="lblMarkAvail" runat="server" />
        <asp:Label ID="lblTotalSection" runat="server" />
        <asp:Label ID="lblQID" runat="server" />
        <asp:Label ID="lblSectionStatus" runat="server" />
        
     </asp:Panel>

<asp:Panel ID="pnlSection" runat="Server" Width="98%" CssClass="Panel_SectionUpd">
 
        <asp:Label ID="lblCounter" runat="server" CssClass="Label_110_Blue_Bold" />

        <asp:ImageButton ID="btnHelp" runat="server" ImageUrl="~/App_Themes/Default/Images/Icons/VideoHelp.png" OnCommand="btnHelp_File" TabIndex="-1"
        ToolTip="This video explains how to enter information in the section builder" CssClass="rimage" CommandArgument="Help AdvSetting 1" />
                        
        <div class="clear"></div>
    
        <asp:Panel ID="pnlSectionDesc" runat="server"  Width="95%" CssClass="PanelSectionBox">
            <sks:RichTextBox ID="txtTitleDesc" runat="server"  ShowCharUsed="false" TextBoxWidth="98%"  Width="100%" />
        </asp:Panel>

    <hr style="Width:98%"/>
    <table>
        <tr>
            <td style="Width:20%; padding:2%">
                <asp:Label Text="Total marks:" runat="server" />
            </td>
            <td style="Width:80%; padding:2%">
                <asp:TextBox ID="txtMark" runat="server" Width="20%" CssClass="time" onblur="CheckMark(this)"/>
                <asp:Label ID="lblMarkAvailable" runat="server" CssClass="rimage" visible="true"/>
                <asp:Label ID="lblMark" runat="server" visible="False"/>
            </td>
            <td>

            </td>
        </tr>

        <tr>
            <td style="Width:20%; padding:2%">
                <asp:Label ID="lblTimeRequired" Text="Time required:" runat="server"/>
            </td>
             <td style="Width:80%; padding:2%">
                 <asp:Panel ID="pnlTemplateInfo" runat="server">
        <asp:Label ID="lblTemplate" runat="server" visible="False"/>
        <tlk:RadButton ID="btnPerQuestion" runat="server"  ToggleType="Radio"  GroupName="Timing" Text="Per question" AutoPostBack="False" 
        ButtonType="ToggleButton" CssClass="AllocLabel" ForeColor="#004273"/>
        &nbsp &nbsp
        <tlk:RadButton ID="btnPerSection" runat="server"  ToggleType="Radio"  GroupName="Timing" Text="Per section"  AutoPostBack="False"
        ButtonType="ToggleButton" CssClass="AllocLabel" ForeColor="#004273"/>    
        &nbsp &nbsp &nbsp &nbsp
                         
                <asp:Label Text="hh:" runat="server" />
                <asp:TextBox ID="txtHour" CssClass="time"  Width="30px" runat="server" onblur="CheckHour(this)"/>
                 <asp:Label ID="lblHour" runat="server" visible="False"/>
                <asp:Label Text="mm:" runat="server" />
                <asp:TextBox ID="txtMinute" CssClass="time" Width="30px" runat="server" onblur="CheckMinute(this)"/>
                 <asp:Label ID="lblMinute" runat="server" visible="False"/>
                     </asp:Panel>
            </td>
        </tr>

    </table>
     <hr style="Width:98%"/>

        <div class="clear"></div>
            <asp:Label ID="lblDisplayTemplate" runat="server"  Visible="False"/>
        <asp:Panel ID="Panel2" runat="server"  Width="95%" CssClass="PanelSectionBox">
        <sks:RichTextBox ID="txtComment" runat="server"  LabelText="Comment:" ShowCharUsed="false" TextBoxWidth="98%"  Width="100%" />
        </asp:Panel>

        <asp:Panel ID="pnlSubmit" runat="server" Width="99%" CssClass="center_text">
        <sks:Submit ID="ctlSubmit" runat="Server" 
            ShowSave="true" ShowDelete="true" ShowPrevious="false" ShowNext="False"
             OnSave="ctlSubmit_btnEvent" OnDelete="ctlSubmit_btnEvent" />
    </asp:Panel>
    </asp:Panel>
     
</asp:Panel>


            <script type="text/javascript">

                function CheckMark(obj) {
                    var txtMark = document.getElementById(obj.id);

                    var Mark = txtMark.value;
                    var Val = Mark.match(/^\d{0,10}(?:\.\d{0,2}){0,1}$/);

                    if (!Val) {
                        alert(Mark + " is not a valid mark");
                        txtMark.value = "";
                        txtMark.focus(); // not working
                    }
                }

                function CheckHour(obj) {
                    var txtHour = document.getElementById(obj.id);

                    var Hour = txtHour.value;
                    var Val = Hour.match(/^\d{0,10}(?:\.\d{0,2}){0,1}$/);

                    if (!Val) {
                        alert(Hour + " is not a valid Hour");
                        txtHour.value = "";
                        txtHour.focus(); // not working
                    }
                }

                function CheckMinute(obj) {
                    var txtMinute = document.getElementById(obj.id);

                    var Minute = txtMinute.value;
                    var Val = Minute.match(/^\d{0,10}(?:\.\d{0,2}){0,1}$/);

                    if (!Val) {
                        alert(Minute + " is not a valid Minute");
                        txtMinute.value = "";
                        txtMinute.focus(); // not working
                    }
                }
            </script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873170
could you put the javascript in the main page, not in the usecontrol ?
0
 

Author Comment

by:AnneSKS
ID: 41873172
Unfortunately no, it has to go in a usercontrol.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 41873193
try this :
<script type="text/javascript">
               function CheckMark(txtMark) {

                    var Mark = txtMark.value;
                    var Val = Mark.match(/^\d{0,10}(?:\.\d{0,2}){0,1}$/);

                    if (!Val) {
                        alert(Mark + " is not a valid mark");
                        txtMark.value = "";
                        txtMark.focus(); // not working
                    }
                }

Open in new window

0
 

Author Comment

by:AnneSKS
ID: 41873372
Hi Leakim,
What do I put in the onblur event of the control, do I still keep CheckMark(this)?
Cheers
0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41873453
The HTML you posted works - but you say it does not work inside a User Control

We need to see what the html looks like from a non-working page.

The onblur will always fire and if CheckMark exists on the page it will be called so either
OnBlur is not being set
OR
CheckMark is not visible on the page

BTW
If you do this
CheckMark(this)
...
function CheckMark(obj)

Open in new window


Then you can access the value by
obj.value

Open in new window

You don't need to get the element again with getElementById. In other words this
    function CheckMark(obj) {
        var txtMark = document.getElementById(obj.id);

        var Mark = txtMark.value;

Open in new window

Becomes this
function CheckMark(obj) {
  var Mark = obj.value;

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873563
What do I put in the onblur event of the control, do I still keep CheckMark(this)?

yes
0
 

Author Comment

by:AnneSKS
ID: 41874810
Thanks Julian,

it is working with obj.value.

I still don't understand why document.getElementById(obj.id) was working when the function and textbox was in the form and not the usercontrol.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41874900
Did you try my solution ? What is missing ? This is the same solution Julian send to you after me...
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41874956
@AnneSKS,

Leakim is correct - he did make the suggestion first - although from my side I was not trying to point to that as the solution - merely a suggestion. Can I re-open the question for you to regrade?

The reason it may not have worked with a user control is if your user control did not have an id - which would have meant that the getDocumentById would have failed - whereas using the element passed in would not.
0
 

Author Comment

by:AnneSKS
ID: 41875676
Yes please Julian, reopen the question.

However what I found as well is that I had the script in the user control instead of the form, and when I moved the script to the form, it worked.
0
 

Author Closing Comment

by:AnneSKS
ID: 41895096
Thank you for your help
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

856 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