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>
Related
I am trying to make a search using an input submit type field. Once user enters something, it should look through the value in the divs. If it matches one of them then it should highlight that div background in yellow, if it doesnt we add the new value in the bottom of the div list.
I was able to highlight the background when it matches, but the highlight only stays for a second and disappears.Also, it doesn't match the second element of the list "Machine Learning". For the second part for adding in the bottom of the list, I tried push the new value in the list but that didn't work either.
Any suggestions ?
HTML and JS:
`
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for(var i=0; i<courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
if(searchCourse == coursecheck){
course.style.backgroundColor = 'yellow';
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Please try this:
function searchList() {
var searchCourse = document.getElementById("search").value,
courseList = document.getElementById("courselist").getElementsByTagName("div"),
found = false;
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
//Get the the div content (course) and trim it
var coursecheck = course.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
if (searchCourse === coursecheck) {
course.style.backgroundColor = 'yellow';
//Match found so we don't need to add new element
found = true;
} else {
//Reset the background color
course.style.backgroundColor = 'transparent';
}
}
//New element add it to the list
if(!found) {
var newDiv = document.createElement("DIV");
newDiv.innerHTML = searchCourse;
document.getElementById("courselist").appendChild(newDiv);
}
return false;
}
Demo: https://jsfiddle.net/iRbouh/jpor2eb3/
I hope this will help.
Please check this code.
JavaScript
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
console.log(coursecheck)
if (searchCourse == coursecheck) {
course.style.backgroundColor = 'yellow';
}
}
return false;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div>Machine Learning </div>
<div>Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Can you add a data-value attribute on the divs? if so you can do something like this:
function searchList() {
var searchCourse = document.getElementById("search").value,
highlight = document.querySelectorAll("[data-value='" + searchCourse + "']")[0] // <~~ only want the first
highlight.style.backgroundColor = 'yellow';
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div data-value='Machine Learning'>Machine Learning </div>
<div data-value='Image Processing'>Image Processing</div>
<div data-value='Design and Analysis of Algorithms'>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
If you make the button a link with an href='#something' then it won't page reload, or add an event listener to the button and do event.preventDefault()
I have a form on main page, by pressing a specific button on it - new window() opens with a table in it, and by double clicking the line in the table it should transfer data from table into input fields of my form, but it doesn't.
But if i run everything from one page it works fine.
So how should i modify my code so it can transfer data from new window
Main page:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="NewWindow()">Banks</button>
<br /><br />
Bank Name:
<br />
<textarea id='bank' cols=56 rows=6></textarea>
Bank Adress:
<br />
<textarea id='bic' cols=56 rows=6></textarea>
<script>
var textarea_bank = document.getElementById('bank'),
textarea_bic = document.getElementById('bic');
function comm(obj) {
textarea_bank.value = obj.cells[0].innerHTML;
textarea_bic.value = obj.cells[1].innerHTML;
}
function NewWindow()
{
myChildWin = window.open("test.html", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
</script>
</body>
</html>
Window with table(test.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<table id="mySuperTBL">
<tr>
<td><b>BankName</b>
</td>
<td><b>BIC</b>
</td>
</tr>
<tr id='1' ondblclick='comm(this)'>
<td>Bank</td>
<td>Adress</td>
</tr>
</table>
</body>
</html>
Very simple, You should create two files. the second one is "stam.html" (this will be the child window):
Editing - bi-directional communication :-)
for the example the file will open itself (keep this file as "stam.html"). If this the parent, it will set the message to the child. else - it will set text to the parent.
<!DOCTYPE html>
<html>
<head>
<title>Bla!</title>
<script type='text/javascript'>
var m_ChildWindow = null; //
function OpenChildWIndow() {
m_ChildWindow = window.open ("stam.html");
}
function SetDataToChild(data) {
if (m_ChildWindow) {
m_ChildWindow.document.getElementById('body').innerHTML += "Dear son:" + data;
} else {
opener.document.getElementById('body').innerHTML += "Dear Daddy:" + data;
}
}
function Init() {
var button = document.getElementById('cmdSendMsg');
if (opener) {
button.innerHTML = "send message to daddy";
}
}
</script>
</head>
<body id='body' onload = "Init();">
<button onclick='OpenChildWIndow();'>Click to open child</button>
<br>
<button onclick='SetDataToChild("Hello <br>");' id='cmdSendMsg'>Click to add data to child</button>
</body>
</html>
Here you have two buttons. the first will open the new window, the second one will add "hello" to it.
You should use query string, the below code shows how you can send an id of value 1 to the test.html
function NewWindow()
{
myChildWin = window.open("test.html?id=1", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
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.
Have been trying to add a custom button for about 2 hours and I just can't get it to work. I don't know much about javascript maybe that's why. I did manage to get the button to show up and open a popup, but that's as far as I got.
I want the button to insert t he following into the HTML section of tinymce:
'
Here is my dialog.js file:
tinyMCEPopup.requireLangPack();
var InsertQuoteDialog = {
init: function () {
var s = tinyMCEPopup.editor.selection.getContent({ format: 'text' });
if (s.trim().length > 0) {
document.forms[0].blizzQuote.value = s.trim();
}
},
insert: function () {
var s1 = '<p class="blizzardQuote" ';
s1 += Encoder.htmlEncode(document.forms[0].blizzQuote.value.trim()) + '</p>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, s1);
tinyMCEPopup.close();
}
};
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
tinyMCEPopup.onInit.add(InsertQuoteDialog.init, InsertQuoteDialog);
And my Dialog.htm file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#example_dlg.title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
<form onsubmit="InsertQuoteDialog.insert();return false;" action="#">
<p>Blizzard Quote</p>
<p>Blizzard Quote: <input id="blizzQuote" name="blizzQuote" type="text" class="text" /></p>
<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{#insert}" onclick="InsertQuoteDialog.insert();" />
</div>
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>
Basically when I click on insert nothing happens.
Thanks.
A quick look at the javaScript console should show you that you are getting a JavaScript error on the dialog with the Encoder object not being known.
Simply include the JS file that defines Encoder on your dialog and it should all be good.
Is there a command line tool or online service that can convert javascript unicode notation code to utf-8?
E.g. I got this json code, but it is hard to edit in common text editor.
{"name":"leon zhang","city":"\u4e0a\u6d77"}
I want to convert it to:
{"name":"leon zhang","city":"上海"}
You use the below javascript function to convert unicode to utf-8
function encode_utf8( s ){
return unescape( encodeURIComponent( s ) );
}( '\u4e0a\u6d77' )
You can also try it out in firebug console. It works.
<!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=gb2312" />
<title>UTF-8 To Unicode</title>
<style type="text/css">
<!--
td {
height: 24px;
line-height: 24px;
}
#content {
margin-top: 2px;
}
-->
</style>
</head>
<script type="text/javascript">
function encodeGB2312(){
var c = document.all.content.value;
var re = /(%)+/g;
var result = escape(c);
document.all.content.value = result.replace(re, "\\");
document.all.content.focus();
document.all.content.select();
}
function clearContent(){
document.all.content.value = "";
document.all.content.focus();
}
</script>
<body>
<h3 align="center">UTF-8 To Unicode</h3>
<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" style="text-align:center;">
<tr>
<td>Input what you want to convert：</td>
<td><input type="text" name="content" id="content" size="50"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="encoding" value="Start Conversion" onclick="encodeGB2312()"/>
<input type="button" name="clear" value=" Cancel" onclick="clearContent();"/></td>
</tr>
</table>
</body>
</html>
This is a sample of convert utf-8 to unicode, do it in turn.