Solved

Javascript in a user control not working

Posted on 2016-11-02
17
52 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 51

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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 51

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 51

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now