I have created a web app. I have tried my level best to trace out why does the div named more gets hidden when the an item is searched(you can see my efforts from the comments and alerts) but I was unable to trace it. I will be thankful if anyone can guide me. Thanks
<!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" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/favicon.png" />
<script type="text/javascript">
var nexturl ="";
var lastid ="";
var param;
<!--Trace more-->
function myFunction() {
param = $('#search').val();
//alert("I am an alert box!");
if (param != "") {
$("#status").show();
//alert("Show ");
var u = 'https://graph.facebook.com/search/?callback=&limit=5&q='+param;
$("#data").empty(); //empty the data div
//alert("Wait for 5 sec?");
setTimeout(function(){
getResults(u)},
200);
//getResults(u);
//alert("When myFunction runs show more line 20");
$("#more").show();
}
$("#more").click(function () {
$("#status").show();
//alert("Show ");
$("#more").hide();
pageTracker._trackPageview('/?q=/more');
var u = nexturl;
getResults(u);
});
}
</script>
<title>Facebook Status Search - Search Facebook Status in Real Time</title>
<meta name="description" content="Facebook status search, search status facebook, facebook status real time, Fahad Uddin Facebook status search, Facebook update search">
<meta name="distribution" content="global">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cuteTime.min.js"></script>
<script type="text/javascript" src="ofs.js"></script>
<script type="text/javascript" src="ga.js"></script>
<link rel="stylesheet" href="font/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body style="margin:0px;padding:0px;">
<div id="container">
<div id="header" style="height:39px; background-color:#3B5998; margin-bottom: 10px; ">
<div id="logo" style="display:inline;">
<h1 style="display:inline; font-family: 'klavika_boldbold_tf';color: #FFFFFF;padding-left:50px;padding-left: 50px;font-size:30px;" ><a style="color:#fff;" href="http://www.fbstatussearch.com">facebook status search</a></h1>
</div>
<div style="margin-bottom:10px;float:right;">
<form action="" method="get" id="searchform" onsubmit="return false;">
<input name="q" type="text" id="search" onClick="this.select();" size="32" maxlength="128" class="txt" style="padding: 0 5px;" >
<input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">
</form>
</div>
</div>
<div id="data_container">
<div id="data">
<div id="status_container">
<div id="status"><img src="loader.gif" alt="loading facebook status search"/></div>
</div>
</div>
<div id="more" style="text-align:center;">More Posts <img src="DownTriangleIcon_8x8.png" alt="more status" /></div>
</div>
<div id="sidebar" style="float:right;">
<div style=" background-color: #fcf7da;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Share it with the World</h4>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fe772f550658645"></script>
<!-- AddThis Button END -->
</div>
<div style=" background-color: #FFEFC6;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>How To Use</h4>
<p>Write down the tag to be searched in the top search area. For example,type in,<br>
<strong>Yahoo</strong><br>
and you will get the latest relevant Facebook updates of <strong>all the people around the world</strong> that have used the word <strong>"Yahoo"</strong>.</p>
</div>
<!-- <div style=" background-color: #FFE1C0;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Why Use it?</h4>
<p>Here is why you would <em>love it</em>.</p>
</div>
-->
<div style=" background-color: #EEEEEE;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;" >
<h4>Copyright</h4>
<p>Copyright 2013. All rights reserved. We are not linked with Facebook.<br>
Created by Fahad Uddin.
</p>
</div>
</div> <!--Sidebar Ends-->
<div id="adverise" width="336px;padding:0 auto; float:left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8542523573222680";
/* FbStatusSearch1 */
google_ad_slot = "8229888765";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="footer">
<p style="font-size:12px;">Copyrights 2013.Created by Fahad Uddin. All Rights Reserved.</p>
</div> <!--Footer Ends-->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16080447-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").keyup(function(e){
$("#status").empty();
/*
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {*/
myFunction();
//}
});
//alert("On Page load hide more Line 151 ");
$("#status").hide();
//$("#more").hide();
});
</script>
</body></html>
Here is the JS,
function getResults(u) {
//$("#status").show();
$("#data").empty(); // print that we are in
$.ajax({
dataType: "jsonp",
url: u,
success: function(res) { // take an object res
$("#data").empty();
$("#status").show(); // show status
//$("#more").show();
if (res.data.length) { // check length of res
// print if >0
nexturl = res.paging.next; // calculate next url
$.each(res.data, function(i,item){
if (item.id != lastid) {
lastid = item.id;
var html ="<div class=\"post\">";
html += "<div class=\"message\">"+item.from.name+" ";
if (item.message) {
html += item.message+"<\/div>";
} else {
html += "<\/div>";
}
if (item.picture) {
html += "<div class=\"image\"><img src=\""+item.picture+"\"></div>";
} else {
html += "<div class=\"image\"><\/div>";
};
if (item.link) {
html += "<div class=\"link\">"+item.name+"</div>";
if (item.caption) {
html += "<div class=\"caption\">"+item.caption+"</div>";
};
if (item.description) {
html += "<div class=\"description\">"+item.description+"</div>";
};
};
html += "<div class=\"meta\">";
if (item.icon) {
html += "<span class=\"icon\"><img src=\""+item.icon+"\"></span> ";
};
var t = item.created_time;
var time = t.substring(0,19)+"\+00:00";
html += "<span class=\"time\">"+$.cuteTime({},time)+"<\/span> ";
html += " <\/div>";
html +="</div>";
$("#data").append(html) ;
}
});
$("#more").appendTo("#data");
$("#more").show();
$("#status").appendTo("#data");
} else {
$("#data").append("<h3 class=\"none\">No entries found. Please try another search.</h3>");
};
}
});
}
Your problem is:
$("#more").appendTo("#data");
At first more sitting in data_container, then you move it to the data by this line : $("#more").appendTo("#data"); then when he comes again to success it deletes more together with data by this line: $("#data").empty(); and when you want to do again $("#more").appendTo("#data"); is not found.
I think you should change to:
$("#more").appendTo("#data_container");
Or save more before you do $("#data").empty(); in variable and then append the variable to data.
Related
I'm trying to make app that generates code with HTML tags from images.
User pastes an image link, image displays and after that user will click button to generate the img code to copy.
I've got code that loads and previews images from input.
I'm struggling with generating the HTML code. User will get:
<img src="link photo"> in div code.
I can't make it:
document.getElementById('code').innerHTML = '<img src=" ' + source + '">';
Because it won't display HTML tags.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
width: 10%;
height: 10%;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
opacity: 85%;
</style>
</head>
<body>
<form>
<input type="text" id="imagename" value="" />
<input type="button" id="btn" value="Show" />
</form>
<div id="before">
</div>
<div>
<p>HTML`s code to copy:</p>
</div>
<div name="code" id="code">
</div>
<script type="text/javascript">
document.getElementById('btn').addEventListener("click", fun);
function fun() {
var val = document.getElementById('imagename').value;
source = val;
img = document.createElement('img');
img.src = source;
document.body.appendChild(img);
// move child to up
var before = document.getElementById('before');
before.insertBefore(img, before.children[0]);
document.getElementById('code').innerHTML = '<img src=" ' + source + '">';
}
</script>
</body>
</html>
Don't use innerHTML, use innerText:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
width: 10%;
height: 10%;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
opacity: 85%;
</style>
</head>
<body>
<form>
<input type="text" id="imagename" value="" />
<input type="button" id="btn" value="Show" />
</form>
<div id="before">
</div>
<div>
<p>HTML`s code to copy:</p>
</div>
<div name="code" id="code">
</div>
<script type="text/javascript">
document.getElementById('btn').addEventListener("click", fun);
function fun() {
var val = document.getElementById('imagename').value;
source = val;
img = document.createElement('img');
img.src = source;
document.body.appendChild(img);
// move child to up
var before = document.getElementById('before');
before.insertBefore(img, before.children[0]);
document.getElementById('code').innerText = '<img src="' + source + '">';
}
</script>
</body>
</html>
I am currently working on a cookie clicker with an own custom console. It just should be a cookie clicker clone. A shop or anything else I haven't added yet.
The problem is, when you run the code there's an error called
expected expression, got '}' [More Information] index.html:2
(exactly copied from firefox)
The weird thing is that the gotten '}' is at the second used character, which is in the tag.
How can it get an '}' in the tag?
The code looks like this:
//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");
function buttonClick() {
clicks++;
consoleLog('You have ' + clicks + ' clicks!');
button.value = 'Clicks: ' + clicks;
}
function consoleLog(t) {
consoleMsgs++
myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}
input {
border-style: solid;
border-color: black;
border-width: thick;
border-radius: 3rem;
background: #232328;
margin-bottom: 0.2rem;
color: #d3dde6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Romgl</title>
<!-- Bootstrap Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="content" style="font-size: 1.5rem; margin: 0.7ex">
<div>
<input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;" onclick="buttonClick();" type="submit">
<input value="clear console" style="margin-right: 10px;" onclick="myConsole.children[1].innerHTML = " ";=" " consolemsgs="0; " consolelog('console=" " cleared!');"="" type="submit">
<div id="console" style="font-size: 1.3rem;">
<h1>Console</h1>
<div class="consoleText">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help me!
You really should avoid putting JS in your HTML inputs.
You could do something along these lines :
//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");
document.getElementById("clickme").addEventListener('click', function() {
clicks++;
consoleLog('You have ' + clicks + ' clicks!');
button.value = 'Clicks: ' + clicks;
});
document.getElementById("clicktoclear").addEventListener('click', function(){
myConsole.children[1].innerHTML='';
consoleMsgs=0;
consoleLog('cleared!');
});
function consoleLog(t) {
consoleMsgs++
myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}
input {
border-style: solid;
border-color: black;
border-width: thick;
border-radius: 3rem;
background: #232328;
margin-bottom: 0.2rem;
color: #d3dde6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Romgl</title>
<!-- Bootstrap Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="content" style="font-size: 1.5rem; margin: 0.7ex">
<div>
<input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;" type="submit">
<input id="clicktoclear" value="clear console" style="margin-right: 10px;" type="submit">
<div id="console" style="font-size: 1.3rem;">
<h1>Console</h1>
<div class="consoleText">
</div>
</div>
</div>
</div>
<!-- Remove the extra </div> -->
</body>
</html>
I just moved the JS you had in your input to the actual JS script and corrected your code to clear your console.
Also, you had an extra in your HTML that I removed.
EDIT : I just removed the jQuery to switch to pure JS to match the original code.
The bellow code works fine
how to clear the div area when another menu i clicked
when i click mobile it should display mobile
and when i click electronics it should display electronics
ERROR IN MY CODE
when i click mobile it display mobile
when i click electronics it display electronics
BUT
- its not clearing the previous clicked value
FULL CODE
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
</script>
</body>
</html>
Following clear the all divs(Hides the all DIVS)
function hidemenus() {
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
}
So in every mouse click request we hide the all DIVs and show the requested DIV.
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
Hope this would work for you.
It is because you never hide the previous divs.
What you can do is save the current active one in a variable and close it when the link is clicked.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
var currentDisplay = "";
function mob() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('mobi').style.display = "block";
currentDisplay = "mobi";
}
function ele() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('elec').style.display = "block";
currentDisplay = "elec";
}
function veh() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('vehi').style.display = "block";
currentDisplay = "vehi";
}
function hme() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('home').style.display = "block";
currentDisplay = "home";
}
</script>
</body>
</html>
Tip: Using Jquery would make things a lot easier.
On my homepage there is a listview, where every element has a link to the same page, but with different URL parameter:
Those links work fine and they redirect me to the page player.html; the problem is that here the event pageinit is not fired:
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$("#playerPage").on('pageinit',function(){
console.log("init");
}
</script>
But if I refresh the page the event is triggered. Is there any way to trigger it when the page is loaded at first?
EDIT: This is player.html:
<!DOCTYPE html>
<html>
<head>
<title>Youtube Theater</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src = "js/themoviedb.js"></script>
<script src = "js/youtube.js"></script>
<script src="js/purl.js"></script>
<script src="js/jquery.fitvids.js"></script>
<style>
div.movie-info{font-size: 16px;margin-top: 10px; margin-bottom: 5px}
.toogle-container .ui-slider-switch { width: 9em}
</style>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$(document).on('pageinit',"#playerPage",function(){
console.log("init");
$("#embdPlayer").attr("src","http://www.youtube.com/embed/" + videoID + "?autoplay=1");
$.when(getMovieInfo(movieID)).then(function(movie){
$("#poster").attr("src",movie.poster);
$("#title").html(movie.title + " <small>(" + movie.released + ")</small>");
$("#plot").html(movie.plot);
$("#cast").html("<strong>Director: </strong>" + movie.director+"<br> <strong>Stars: </strong>" + movie.cast);
if(isFavorite()){
$("#favoriteSlider").val("on").slider("refresh");
}else{
$("#favoriteSlider").val("off").slider("refresh");
}
});
$("#playerContainer").fitVids();
});
function getFavorites(){
var savedFavorites = localStorage.getItem(favStorageKey);
return JSON.parse(savedFavorites);
}
function isFavorite(){
if(localStorage.getItem(favStorageKey)){
var fav = getFavorites();
return fav[videoID]!=undefined;
}
return false;
}
function removeFromFavorites(){
var favMap = getFavorites();
delete favMap[videoID];
localStorage[favStorageKey] = JSON.stringify(favMap);
}
$("#favoriteSlider").change(function(){
if(isFavorite()){
removeFromFavorites();
}else{
saveToFavorites();
}
});
function saveToFavorites(){
var film = {
movie: movieID,
title: $("#title").text(),
poster: $("#poster").attr("src")
}
var favorites={};
if(localStorage.getItem(favStorageKey)){
favorites = getFavorites();
}
favorites[videoID] = film;
localStorage.setItem(favStorageKey,JSON.stringify(favorites));
}
</script>
<div data-role="panel" id="movieInfo" data-position="right" data-display="push" class="toogle-container">
<H3 id="title"></H3>
<img id="poster">
<div id="plot"></div>
<div id="cast"></div>
<select data-role="slider" id="favoriteSlider">
<option value="off">Unfavorite</option>
<option value="on">Favorite</option>
</select>
</div>
<div data-role="header" >
<H1>Youtube Theater</H1>
Movie Info
</div>
<div data-role="content">
<div id="playerContainer">
<iframe id = "embdPlayer" width="560" height="315" frameborder="0" ></iframe>
</div>
</div>
</div>
</body>
</html>
The pageinit event is the right one you looking for... Try navigating to player.html page with the following JavaScript code:
$.mobile.changePage( "player.html?video=34&movie=4354", { reloadPage : true });
This forces a reload of a page, even if it is already in the DOM of the page container.
Also you can try changing $("#playerPage").on('pageinit',function(){ to $(document).on('pageinit', '#playerPage',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.