I have two ASP pages. One head.master which has some contents as well as contents which are retrieved from the Default.aspx page. Because I can get script URL from the head.master page, I have it setup there along with the HTML/JQuery contents like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
... //other contents here
<asp:ContentPlaceHolder id="ContentPlaceHolderSearch" runat="server">
<!-- Search stuff goes here -->
</asp:ContentPlaceHolder>
... //other contents here
</form>
</body>
</html>
In my Default.aspx page I have the contents like this:
<%# Page Language="VB" MasterPageFile="head.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" title="WESTMED Medical Group - Top Doctors in New York" %>
<%# Register Assembly="Ektron.Cms.Controls" Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
<%# OutputCache Duration="900" VaryByParam="none" %>
<asp:Content ID="topContent" ContentPlaceHolderID="topContent" Runat="Server">
... //other stuff goes here
</asp:Content>
<asp:Content ID="ContentPlaceHolderSearch" ContentPlaceHolderID="ContentPlaceHolderSearch" Runat="Server">
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
</asp:Content>
Looking at the output HTML source of the page I see the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form method="post" action="/" id="aspnetForm">
... //other contents goes here
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
... //other contents goes here
</form>
</body>
</html>
But when I press the button nothing happens. I press the enter key nothing happens. I can enter special characters and it doesn't do the validation. I looked at other ASPX questions and I am thinking the script does not load before the contents. Please help me resolve this issue.
Console screenshot:
Answer for everyone else's benefit:
As you have found, in our chat, your CMS is already using jQuery under another alias.
The link you found was:
https://stackoverflow.com/questions/13438464/joomla-2-5-jquery-cannot-call-method-of-null
But if another jQuery is already in your CMS you will want to use that version instead.
Never assume anything when dealing with someone else's code. Use something like Fiddler2 to view what your browser is pulling down.
Related
Function: Enter a phone number (ex: 555-555-5555) into a text field. The text field prints the number out flat (hidden by CSS). Then Javascript picks up that number by ID and splits it apart by the hyphens and injects the array split up into a FoneFinder URL search string to display the results from that site in a pop-up window.
Problem: The pop-up is working fine, however when I click on the link to spawn the link it opens in the main page as well as the pop-up. The main page should not change.
The pop-up code works fine on other pages and doesnt overwrite the main page. It has to be how the javascript is injecting the html link into the page that is messing it up, but I cant figure out why.
Any help or insights would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
$("#target_num_search").html(" <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=NewWindow(this.href,'FoneFinderLookup','740','680','yes');>!BETA!FoneFinder Search!BETA!</a>");
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
what you need to add is the following:
$('#target_num_search').on('click', 'a', function (event) {
event.preventDefault();
var url = $(this).attr('href');
NewWindow(url,'FoneFinderLookup','740','680','yes');
})
This way you can remove the onclick attribute and move the function call to js. See the working jsfiddle
you should return false for prevents default action to go link 'href' when onlick event.
(please notes , - comma operator to whatever Function returns... It's just hack. don't use.)
BTW,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
var html_tpl = " <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=\"return NewWindow(this.href,'FoneFinderLookup','740','680','yes'), false\" target='_blank'>!BETA!FoneFinder Search!BETA!</a>";
$("#target_num_search").html(html_tpl);
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>
I created a basic code but makeCode() doesn't seem to be invoked. I have added imported the book.js and jquery.min.js under "Scripts/jQuery/book.js". By keying a value in the input, makeCode will be invoked.
You need to ensure the DOM is ready or else elements may not be loaded into it yet.
$(function(){
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
I don't know what the book function does internally, but if this has any DOM references then this also needs to be called after the DOM is ready.
http://jsfiddle.net/6oxu38gt/
Javascript belongs at the bottom of the page before </body> and your jQuery commands should be inside a dom ready wrapper (though not strictly required when at the bottom of the page).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
border: 1px solid black;
}
</style>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
<!-- javascript at the end, and load jquery first -->
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript">
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$(function(){
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
</body>
</html>
jQuery DOM must be ready.. Think of the document ready function as a self-executing function which fires after the page elements have loaded.
Place your javascript within document.ready code, as below...
$(document).ready(function() {
//do jQuery stuff when DOM is ready
});
So, for your example:
<script type="text/javascript">
$(document).ready(function() {
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
Thanks all for the help!!!
The issues are:
1) ensure the DOM is ready
$(document).ready(function() {
//do jQuery stuff when DOM is ready
});
2) Changed the sequence of
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
The final result is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
}
</style>
<script type="text/javascript" src="~/Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery/book.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var book = new Book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>
I am trying to do a JavaScript in my WebSite that when i click a button a popup appears, but the Aspx reload the webpage everytime I click a button, the javaScript before the refresh works, but the page is reloaded and the page come back as it was without the popup. Is there any way to make the page do not refresh when I press a HTML button without affecting my aspx button functions?
Here is the HTML/ASPX:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jqueryui.js"></script>
<script type="text/javascript" src="../Scripts/myjqTest.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div id="header">
<li><asp:LinkButton ID="loginoptionsButton" CssClass="loginoptionsButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="loginoptionsButton_Click">LOGIN</asp:LinkButton></li>
<li><asp:LinkButton ID="signuplogoutButton" CssClass="signuplogoutButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="signuplogoutButton_Click">CADASTRAR-SE</asp:LinkButton></li>
</div>
<div id="content">
<button id="TestJS" class="">Test</button>
<div id="Popup" class=""></div>
</div>
</form>
</body>
</html>
Here is the JS:
var test = document.getElementById("Popup");
test.addEventListener("click", function () {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
});
Try this:
test.addEventListener("click", function (event) {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
event.preventDefault();
});
I have this javascript:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function ageProb() {
var DatePicker1 = $find("<%= RadDatePicker1.ClientID %>");
DatePicker1.get_dateInput()._textBoxElement.style.backgroundColor = "yellow";
DatePicker1.get_dateInput().focus();
}
</script>
When I run the code I get this error:"Impossible to modify the Controls collection because the control contains code blocks (like <% ... %>)"
If I move the Javascript into the Form section (I found this advice googling around) then the error does not occurs but I am under the impression that the function does not get the call:
ScriptManager.RegisterStartupScript(this, GetType(), "ageProb", "ageProb();", true);
I do I fix this problem?
Do this and it will work, but you should put it in the body:
<body>
<form id="form1" runat="server">
<asp:Panel runat="server">
<script type="text/javascript">
function ageProb() {
var DatePicker1 = $find("<%= RadDatePicker1.ClientID %>");
DatePicker1.get_dateInput()._textBoxElement.style.backgroundColor = "yellow";
DatePicker1.get_dateInput().focus();
}
</script>
</asp:Panel>
</form>
</body>
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="JavaScript" type="text/JavaScript">
CheckBrow();
</script>
function CheckBrow()
{
if((navigator.appName == "Microsoft Internet Explorer") ||(navigator.appName == "Netscape"))
{
HhdnBrowsertype.value=0;
}
else
{
alert("please open the application in IE or Fire fox browser")
HhdnBrowsertype.value=1;
}
}
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:HiddenField ID="HhdnBrowsertype" runat="server" />
</div>
</form>
</body>
</html>
Here is my JavaScript function. Now I need to execute this function on page load.
Here I will check the browser type based on the hidden field value 0 or 1.
I will check this hidden field value on page load
protected void Page_Load(object sender, EventArgs e)
{
// here i need to call my javscript function
// can any one tell me the syntax
If(HhdnBrowsertype.Value==”1”)
{
// here go my page load function
}
}
Can anyone tell me how I can call this JavaScript function on page load? I am using VS 2005.
try this
<body onload="CheckBrow()">
or you can use.
Page.ClientScript.RegisterStartupScript(typeof(string), "CheckBrow", "CheckBrow();", true);