My objective is to create a web game where a country name is given and the user must enter the correct capital of that country. A new row is then inserted with the country and answer and whether it's correct and a new country is shown. I have both the random country selector and insert new row working when I press the button with the id of "pr2__submit".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YourName 20200000</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="jquery/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="./capital_game.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Oswald:wght#700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<style>
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 850px;
border-collapse: collapse;
}
th, td {
padding-bottom: 15px;
text-align: left;
border-bottom: 2px solid #D3D3D3;
}
</style>
</head>
<body>
<script src="jquery/js/jquery-1.9.0.min.js"></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="./country_capital_pairs.js"></script>
<script src="./capital_game.js"></script>
<!--Your HTML here-->
<h1 style="font-size:70px; text-align: center; font-family: 'Bakbak One', cursive;" >Name the capital <i class="far fa-flag"></i></h1>
<script>
function randomCountry(){
let x = Math.floor(Math.random() * pairs.length);
document.getElementById("pr2__question").innerHTML = pairs[x].country;
let y = pairs[x].capital;
}
</script>
<script>
function focusInput() {
document.getElementById("pr2__answer").focus();
document.getElementById("pr2__answer").value = "";
}
</script>
<script>
function newRow() {
let guess = document.getElementById("pr2__answer").value;
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
break;
}
</script>
<table id="myTable" style="font-size:200%;" class="center">
<tr style="border-bottom: 3px solid #330066; font-family: 'Oswald', sans-serif;">
<th>Country</th>
<th>Capital</th>
<th>Answer</th>
</tr>
<tr>
<td id="pr2__question"></td>
<td><input id="pr2__answer" type="text" placeholder="Your answer" autofocus><br></td>
<td> <button id="pr2__submit" onclick="newRow(); randomCountry(); focusInput();">See Answer</button> </td>
</tr>
<tr>
<td id="lastQuestion"></td>
<td id="lastAnswer">No entry to show</td>
<td id="correctAnswer"></td>
</tr>
</table>
<script>
randomCountry();
</script>
<script>
var inputText = document.getElementById("pr2__answer");
inputText.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pr2__submit").click();
}
});
</script>
</body>
</html>
But when I try to add an if statement to determine whether the correct answer was input it does not work, and the random country selector and and insert new row stop working.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YourName 20200000</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="jquery/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="./capital_game.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Oswald:wght#700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<style>
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 850px;
border-collapse: collapse;
}
th, td {
padding-bottom: 15px;
text-align: left;
border-bottom: 2px solid #D3D3D3;
}
</style>
</head>
<body>
<script src="jquery/js/jquery-1.9.0.min.js"></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="./country_capital_pairs.js"></script>
<script src="./capital_game.js"></script>
<!--Your HTML here-->
<h1 style="font-size:70px; text-align: center; font-family: 'Bakbak One', cursive;" >Name the capital <i class="far fa-flag"></i></h1>
<script>
function randomCountry(){
let x = Math.floor(Math.random() * pairs.length);
document.getElementById("pr2__question").innerHTML = pairs[x].country;
let y = pairs[x].capital;
}
</script>
<script>
function focusInput() {
document.getElementById("pr2__answer").focus();
document.getElementById("pr2__answer").value = "";
}
</script>
<script>
function newRow() {
let guess = document.getElementById("pr2__answer").value;
if (guess === y) {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
break;
}
}
</script>
<table id="myTable" style="font-size:200%;" class="center">
<tr style="border-bottom: 3px solid #330066; font-family: 'Oswald', sans-serif;">
<th>Country</th>
<th>Capital</th>
<th>Answer</th>
</tr>
<tr>
<td id="pr2__question"></td>
<td><input id="pr2__answer" type="text" placeholder="Your answer" autofocus><br></td>
<td> <button id="pr2__submit" onclick="newRow(); randomCountry(); focusInput();">See Answer</button> </td>
</tr>
<tr>
<td id="lastQuestion"></td>
<td id="lastAnswer">No entry to show</td>
<td id="correctAnswer"></td>
</tr>
</table>
<script>
randomCountry();
</script>
<script>
var inputText = document.getElementById("pr2__answer");
inputText.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pr2__submit").click();
}
});
</script>
</body>
</html>
Related
Why the button "proba2" adds row in the table, but the button "Insert", who is in the table - adds row, which disappears at the function end?
My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Parameter AutoCgen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table,
th,
td {
padding: 10pt;
border-style: solid;
border-width: 1pt;
border-collapse: collapse;
text-align: center;
white-space: nowrap;
margin: auto;
}
table {
width: auto;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type=text] {
background-color: transparent;
border-width: 0px;
}
</style>
<script>
'use strict';
var proba = function() {
for (var r of document.getElementsByTagName('table')[0].rows)
for (var d of r.cells) console.log(d.innerHTML);
}
var ins_after = function(obj) {
obj = obj || window.event;
var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
var c3 = r.insertCell(2);
c1.innerHTML = 'drugo_ne6to';
alert(c1);
}
</script>
</head>
<body>
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>
<button onclick="proba();">proba1</button>
<button onclick="ins_after(this);">proba2</button>
</body>
</html>
The two buttons have the same one callback function on onclick event.
I try this in Chrome and Mozilla and the result is the same.
When I press "Insert" the new row appears in the table, I use alert to can see this, because after the function end, the row disappears again.
Also when I add several rows with button "proba2" and after that try the button "Insert" - it adds new row, then all new created rows disappears at the callback function end.
Apologize if this is trivial, but I'm new to JS.
It is disappearing because your button is in a form, so it is refreshing the page each time.
Try and add event.preventDefault(); at the end of your function to prevent the default functionality of the button in the form.
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Parameter AutoCgen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
padding: 10pt;
border-style: solid;
border-width: 1pt;
border-collapse: collapse;
text-align: center;
white-space: nowrap;
margin: auto;
}
table {
width: auto;
}
tr:nth-child(even) {background-color: #f2f2f2;}
input[type=text] {
background-color: transparent;
border-width: 0px;
}
</style>
<script>
'use strict';
var proba = function () {
for (var r of document.getElementsByTagName('table')[0].rows)
for (var d of r.cells) console.log(d.innerHTML);
}
var ins_after = function (obj) {
obj = obj || window.event;
var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
var c3 = r.insertCell(2);
c1.innerHTML = 'drugo_ne6to';
event.preventDefault();
//alert(c1);
}
</script>
</head>
<body>
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>
<button onclick="proba();">proba1</button>
<button onclick="ins_after(this);">proba2</button>
</body>
</html>
A button inside a form has by default type="submit" and by clicking on it you will submit the form and reload the page, resetting your table rows (check the accepted answer here Disable form auto submit on button click)
To avoid this kind of behavior add type="button" to your "Insert" button inside the table like this:
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button type="button" onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>
I am stuck with this problem for so many day and i havent found any solution can any one help me solve this please. I have two buttons in my client page as shown HERE which listen to a server on port 3000. The button gets their values from a html form, so different clients have different values. At present i am able to click the buttons based on their ID that is if one client clicks a button with id sq1 the button with same id gets clicked automatically.
But what i want is when i click the button with value 1 the button with same value show be clicked automatically
app.js
const io = require('socket.io')(3000);
io.on('connection', function (socket) {
console.log('a client has connected');
socket.on('clicked', function() {
io.emit('clicked');
});
socket.on('clicked1', function() {
io.emit('clicked1');
});
});
console.log('socket.io server started at port 3000');
button.html
<!doctype html>
<html>
<head>
<title>Testing socket.io</title>
<style>.tictac{
width:100px;height:100px;
padding: 10px;
font-weight: bold;
background:#16ed07;
color: #000000;
cursor: pointer;
border-radius: 10px;
border: 1px solid #D9D9D9;
font-size: 150%;
}
</style>
</head>
<body>
<form>
<input type="button" id="sq1" NAME="sqrone" class="tictac" onClick="onClickHandler(this)"/>
<input type="button" id="sq2" NAME="sqrtwo" class="tictac" onClick="onClickHandler(this)"/>
</form>
<h2 id="alert"> waiting...</h2>
<script type="text/javascript">
var square1 = document.getElementById("sq1");
square1.value = localStorage.getItem("sq1");
var square2 = document.getElementById("sq2");
square2.value = localStorage.getItem("sq2");
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on('connect', function() {
document.getElementById("sq1").addEventListener("click", function () {
socket.emit("clicked");
});
document.getElementById("sq2").addEventListener("click", function () {
socket.emit("clicked1");
});
});
socket.on('clicked', function() {
//if condition
console.log('clicked');
document.getElementById("alert").innerHTML = "1 clicked";
onClickHandler(sq1);
});
socket.on('clicked1', function() {
//if condition
console.log('clicked1');
document.getElementById("alert").innerHTML = "2 clicked";
onClickHandler(sq2);
});
</script>
<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->
</head>
<body bgcolor="#3C4C55">
<style>.tictac{
width:50px;height:30px;padding: 5px; font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;
</style>
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table border="15" cellpadding="5" align="center" style="background-color:orange" >
<tr>
<td>
<input type="number" id="sq1" name="sqrone" placeholder="Value" class="tictac" />
<input type="number" id="sq2" name="sqrtwo" placeholder="Value" class="tictac" />
</td>
</tr>
</table>
</br></br>
<div>
<input type="submit" value="Submit" onclick="saveVal()">
</div>
<script type="text/javascript">
function saveVal() {
var squ1 = document.getElementById("sq1").value;
localStorage.setItem("sq1", squ1);
squ1 = localStorage.getItem("sq1");
var squ2 = document.getElementById("sq2").value;
localStorage.setItem("sq2", squ2);
squ2 = localStorage.getItem("sq2");
}
</script>
</form>
</center>
</div>
</body>
</html>
I refer the following code from stack-overflow itself.but it will not working, anyone can tell what should I update this code.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
with these simple concept am struggling so far.so please help me.
If i type ap or apple means the correspondent values only should
display other than should hide
Note , not certain if expected result is to toggle td elements ? As js at Question appear to toggle tr elements ? To toggle td elements where text input matches td text, try adding .find("td") before call to .show() to substitute filtering td elements for parent tr elements
If input "app" only td containing text "Apple" should be displayed
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.find("td").show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
code is not working because your "search.js" file need jquery
in you code Jquery file missing with jquery it's working fine
it must be
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
check this fiddle
Added jquery-1.9.1.js in html..
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
Fiddle
I have a page that updates and delete based on user action edit works fine, but my delete link doesnt work, when ever I click on the delete link it doesnt do anything
Plz help me with what Im doing wrong in this code if possible show me where to edit and how...
I have two pages for this first is
casher.php
<?php
require_once('../auth.php');
?>
<html>
<head>
<title>Silay Institute</title>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen" />
<!--sa poip up-->
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
<link rel="stylesheet" href="febe/style.css" type="text/css" media="screen" charset="utf-8">
<script src="argiepolicarpio.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<style>
#mainhhh {
background: none repeat scroll 0 0 #FFFFFF;
border: 8px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px #4E707C;
font: 11px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
margin: 5em auto;
position: relative;
text-align: left;
width: 1000px;
}
#mainhhh h1 {
background: none repeat scroll 0 0 #0092C8;
border-bottom: 1px solid #007DAB;
color: #FFFFFF;
font-size: 14px;
margin: 0;
padding: 5px 10px;
text-shadow: 0 1px 0 #007DAB;
}
</style>
</head>
<body>
<div id="mainhhh">
<h1>
<a id="addq" href="index.php" title="click to enter homepage" style="background-image:url('../images/out.png'); background-repeat:no-repeat; padding: 3px 12px 12px; margin-right: 10px;"></a>
<label for="filter">Filter</label> <input type="text" name="filter" value="" id="filter" />
<a rel="facebox" href="addcasher.php" id="addq">Add Casher</a>
</h1>
<table cellpadding="1" cellspacing="1" id="resultTable">
<thead>
<tr>
<th style="border-left: 1px solid #C1DAD7"> Name </th>
<th>ID Number</th>
<th>Work</th>
<th>Gender</th>
<th>Status</th>
<th>Birthday</th>
<th> Action </th>
</tr>
</thead>
<tbody>
<?php
include('../connect.php');
$result = mysql_query("SELECT * FROM casher");
while($row = mysql_fetch_array($result))
{
echo '<tr class="record">';
echo '<td style="border-left: 1px solid #C1DAD7">'.$row['fname'].' '.$row['mname'].' '.$row['lname'].'</td>';
echo '<td><div align="left">'.$row['idnumber'].'</div></td>';
echo '<td><div align="left">'.$row['work'].'</div></td>';
echo '<td><div align="left">'.$row['gender'].'</div></td>';
echo '<td><div align="left">'.$row['status'].'</div></td>';
echo '<td><div align="left">'.$row['bday'].'</div></td>';
echo '<td><div align="center"><a rel="facebox" href="editcprofile.php?id='.$row['id'].'" title="Click To Edit">Edit Profile</a> | delete</div></td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({ type: "GET", Data:{id:del_id} url: "deletecasher.php", data: info, success: function(){
} });
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
</body>
</html>
deletecasher.php
<?php
// This is a sample code in case you wish to check the username from a mysql db table
include('../connect.php');
if($_GET['id'] && is_int($_GET['id'])
{
$id = (int) $_GET['id'];
$sql = "delete from casher where id='$id'";
mysql_query( $sql);
}
?>
Any input with sample appreciated
Off topic: I suggest you do this to avoid an SQL injection:
if($_GET['id'] && is_int($_GET['id'])
{
$id = (int) $_GET['id'];
Try to remove href="#" on the delete button and see if it calles the delete funciton!
You are not passing id to your php file. Please use the data attribute of ajax call.Use this code for ajax.
$.ajax({
type: "GET",
Data:{id:del_id}
url: "deletecasher.php",
data: info,
success: function(){
}
});
I cannot seem to make my javascript .click() method work with my dynamically created divs. In this code I have divs created each under the class name "class1" but my click method does not seem to detect their existence. Here is my code:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
}
// window.onload = populate;
$(function () {
$("container2").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<div id="myBox">Hello World!</div>
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
#Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
And here is what it returns (taken from google chrome):
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this list short and relevant to the content and title of this specific page." />
<title>OneEighty Asset Manager
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<p></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<!-- end #menu -->
<div id="wrapper">
<div class="btm">
<div id="page">
<h1>
<img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
<div id="content">
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
}
// window.onload = populate;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container2").on("click", ".class1", function () {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
<select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
</div>
<!-- end #content -->
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
</div>
</div>
<div id="footer">
<p>
Copyright (c) 2009 1eightyintra.com. All rights reserved.
</p>
</div>
<!-- end #footer -->
</body>
</html>
Because the element doesn't exist in the DOM on page load, you need to use an event delegate, such as on:
$(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
Or for pre-1.7 jQuery, use delegate:
$(function () {
$("body").delegate(".class1", "click", function () {
alert("The div was clicked.");
});
});
click only binds handlers to elements that were present in the DOM when you called it.
Instead, use the jQuery on method:
$(document).ready(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
You will need to re-apply the click handler to the newly created divs.