Luiz Henrique Luiz Henrique - 1 month ago 16
Javascript Question

JavaScript does not work on pages other than my MasterPage and pages that aren't linked to it

Sorry for the bad english :P

I'm using ASP.NET

I'm trying to use a JavaScript that I've found on the Internet to set masks to my telephone and cellphone text fields, but the JS code just work at the fields that are located at my MasterPage. I don't have much experience with JS (almost none) and I have no idea how to resolve this since there is no error at my Logcat.

I tried to reference it at my MasterPage's head, body and inside the ContentPlaceHolder.

Here is the JS code:

function mascara(o, f) {
v_obj = o
v_fun = f
setTimeout("execmascara()", 1)
}
function execmascara() {
v_obj.value = v_fun(v_obj.value)
}
function mtel(v) {
v = v.replace(/\D/g, "");
v = v.replace(/^(\d{2})(\d)/g, "($1)$2");
v = v.replace(/(\d)(\d{4})$/, "$1-$2");
return v;
}
function id(el) {
return document.getElementById(el);
}
window.onload = function () {

id('txtTelefone').onkeypress = function () { //Located at MasterPage - working
mascara(this, mtel);
}
id('txtCelular').onkeypress = function () { //Located at MasterPage - working
mascara(this, mtel);
}
id('telefoneContato').onkeypress = function () { //Located at Contact Page - not working
mascara(this, mtel);
}
id('txtCelularUser').onkeypress = function () { //Located at User Page - not working
mascara(this, mtel);
}
id('txtTelefoneUser').onkeypress = function () { //Located at User Page - not working
mascara(this, mtel);
}
}


As I said before I tried to reference my JS file in some places, the codes that I tried were:

<script src="<%# Page.ResolveClientUrl("../Componentes/js/mascaras.js") %>"></script>

<script src="../Componentes/js/mascaras.js"></script>


As you can see, the fields are located in diferent pages, I also tried to put the code directly at the pages but I had no luck.

I think that I don't need to post my entire MasterPage here, then I'll put just the head, but if exists a need I will edit the post.

<head runat="server">
<title></title>

<link rel="shortcut icon" href="../imagens/icone.ico" type="image/x-icon" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />


<link href="../Componentes/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="../Componentes/fontawesome/css/font-awesome.min.css" rel="stylesheet" media="screen" />
<link href="../Componentes/css/MasterPage.css" rel="stylesheet" />
<link href="../Fontes/Fontes.css" rel="stylesheet" />
<script src="../Componentes/bootstrap/js/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="../Componentes/bootstrap/js/bootstrap.min.js"></script>

<%--Mask Scripts--%>
<script src="<%# Page.ResolveClientUrl("../Componentes/js/mascaras.js") %>"></script>
<script src="../Componentes/js/mascaras.js"></script>


<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
</head>




EDIT 1

Tried this:

id('<%= txtTelefoneContato.ClientID %>').onkeypress = function () { //Located at Contact Page - Still not working
mascara(this, mtel);
}
id('<%= txtCelularUser.ClientID %>').onkeypress = function () { //Located at User Page - Still not working
mascara(this, mtel);
}
id('<%= txtTelefoneUser.ClientID %>').onkeypress = function () { //Located at User Page- Still not working
mascara(this, mtel);
}


The reference to the script is at MasterPage head. But the problem still the same

EDIT2

Im receiving this when I inspect my page:

Error image 1


Error image 2

Thank you in advance

Answer

You have to use it like this when accessing elements with JavaScript that have master pages. And it's also better to use it even without master pages. If you should change the ID in you don't have to change it also in your script.

id('<%= txtTelefoneUser.ClientID %>').onkeypress

If you look at the HTML source you will see that the ID of the element has been changed from txtTelefoneUser to something like this ContentPlaceHolder_txtTelefoneUser. Aspnet adds a prefix to ensure every element has a unique ID. You will see the same usage of prefix in elements that repeat data like GridView/Repeater/DataList etc.

UPDATE

If you put the javascript in an external file you can put a reference to it on the master page like this (assuming Componentes is a folder in the root):

<script src="/Componentes/js/mascaras.js" type="text/javascript"></script>

However putting <%= txtTelefoneUser.ClientID %> in an external file will not work, only on an .aspx page. To make that work declare those elements as variables an assign them on the aspx page while using them in the external js file.

Below a demo:

In the external javascript file:

var myElement;
function myFunction() {
    myElement.value = "Success!";
}

and then on the .aspx page:

<script type="text/javascript">
    myElement = document.getElementById("<%= TextBox1.ClientID %>");
</script>