Solved

Javascript in a user control not working

Posted on 2016-11-02
17
89 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 56

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
Independent Software Vendors: 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!

 

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 56

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 56

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

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.

Question has a verified solution.

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

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

685 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