• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 217
  • Last Modified:

Javascript in a user control not working

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
AnneSKS
Asked:
AnneSKS
  • 7
  • 5
  • 3
2 Solutions
 
Julian HansenCommented:
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
 
AnneSKSAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
AnneSKSAuthor Commented:
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
 
leakim971PluritechnicianCommented:
could you put the javascript in the main page, not in the usecontrol ?
0
 
AnneSKSAuthor Commented:
Unfortunately no, it has to go in a usercontrol.
0
 
leakim971PluritechnicianCommented:
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
 
AnneSKSAuthor Commented:
Hi Leakim,
What do I put in the onblur event of the control, do I still keep CheckMark(this)?
Cheers
0
 
Julian HansenCommented:
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
 
leakim971PluritechnicianCommented:
What do I put in the onblur event of the control, do I still keep CheckMark(this)?

yes
0
 
AnneSKSAuthor Commented:
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
 
leakim971PluritechnicianCommented:
Did you try my solution ? What is missing ? This is the same solution Julian send to you after me...
0
 
Julian HansenCommented:
@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
 
AnneSKSAuthor Commented:
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
 
AnneSKSAuthor Commented:
Thank you for your help
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 7
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now