Solved

Javascript in a user control not working

Posted on 2016-11-02
17
107 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
[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
  • 7
  • 5
  • 3
17 Comments
 
LVL 58

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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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 58

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 58

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

627 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