Hi im having a problem with the page loading another page i have a page a and page b with page a it has an ajax that loads page b ,and page b loads and runs jquery perfectly until i click on page a and then the jquery in page b doesnt seem to can anyone help me with this?
AJAX
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = getXmlHttpRequestObject();
function get() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'b.php', true);
receiveReq.onreadystatechange = handleGet;
receiveReq.send(null);
}
}
function handleGet() {
if (receiveReq.readyState == 4) {
document.getElementById('content').innerHTML = receiveReq.responseText;
}
}
PAGE 1 THAT LOADS THE AJAX AND THE SECOND PAGE
<script src="add.js"></script>
Live Chat
<div id='content' class='content'></div>
PAGE 2 THAT THE PAGE 1 LOADS WITH THE WORKING JQUERY IF LOADED BY IT SELF BUT DOESNT WORK AFTER THE AJAX LOADS THIS PAGE
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Test selctions</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#' + $('#selection option:selected').text().toLowerCase()).show();
$('#selection').change(function () {
$('.op').hide();
$('#' + $('#selection option:selected').text().toLowerCase()).show();
});
});
</script>
<style type="text/css">
#plane ,#boat,#car ,#other {
display: none;
}
</style>
</head>
<body>
options:
<select id='selection'>
<option>Pls choose</option>
<option value='1' id='1'>Car</option>
<option value='2' id='2'>Plane</option>
<option value='3' id='3'>Boat</option>
<option value=''>Other</option>
</select><div>
<div id='car' class='op'>you have chosen a car</div>
<div id='plane' class='op'>you have chosen a plane</div>
<div id='boat' class='op'>you have chosen a boat</div>
<div id='other' class='op'>others</div>
</div>
</body>
</html>
Can someone help me with this one and we would really appreciate it! and thanks!
Use live() or $(document).on() function of jquery.
write all jquery function of page2 on page1 and use live() or $(document).on() functions.
it will work...
Related
I have a local non server webpage called DisplayItems.html which pulls a list from another webpage called items.html. I currently had it set up where DisplayItems refreshes its body every x seconds in case items.html got updated. I am trying to lean towards checking if the input has changed every few seconds. If so, refresh the body of DisplayItems, if not, don't refresh. How could I go along of doing this?
DisplayItems.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="Scroll.css">
<script src="jquery1.min.js"></script>
<script type="text/javascript" src="jquery.marquee.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var jQuery_1_12_4 = $.noConflict(true);
var currentvar;
var oldvar = jQuery_1_12_4('#text').load("items.html");
<!--
function Refresh() {
setTimeout("location.reload(true);");
}
window.setInterval(function Checkforchange(){
currentvar = jQuery_1_12_4('#text').load("items.html");
if (currentvar != oldvar)
currentvar = oldvar;
Refresh();
}, 5000);
// -->
</script>
</head>
<body onload="JavaScript:Refresh();">
<ul class='marquee' id="text">
</ul>
<script type="text/javascript">
jQuery_1_12_4('#text').load("items.html");
</script>
</body>
</html>
Items.html
<li>new item1</li>
<li>senario2</li>
<li>senario3</li>
Maybe something like this? Using your html (get rid of the refresh in the body though, and use Jquery, obviously).
<script type="text/javascript">
function Checkforchange() {
$.get("/refresh/items.html", function (data) {
if ($('#text').html() !== data) {
$('#text').html(data);
window.setTimeout(Checkforchange, 5000);
}
});
}
$(document).ready(function () {
Checkforchange();
});
</script>
My PHP webpage page1.php is like this:
<html>
<head>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function ciao(){
$('#files').load('page2.php?SQL_type=files');
}
$(function(){
$(".icon_files").bind("contextmenu",function(e){
var left;
var top;
if($(document).width() < 630){
left = 0;
top = 0;
}else{
left = e.pageX;
top = e.pageY;
}
$("#context").css({left: left, top: top});
contextmenu($(this).attr('id'));
e.preventDefault();
});
});
</script>
</head>
<body>
<button onclick="ciao()">ciao</button>
<div id="files">
<?php
$_GET['SQL_type'] = 'files';
include "page2.php";
?>
</div>
</body>
</html>
I've build a custom contextmenu that appears with the code above.
When the page loads and include page2.php through PHP it works, but when I change #files content via jQuery, the contextmenu (and all other function I haven't copied there) no longer works.
I've tried other codes like
jQuery.get('page2.php?SQL_type=files', null, function(data) {
$('#files').append(data);
}, 'html');
And I've tried also with simple Javascript
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("files").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "page2.php?SQL_type=files", true);
xmlhttp.send();
Inside page2.php there are simply some DIVs everyone of them with icon_files as class and it doesn't include jQuery again. It is simply like
<div class="icon_files">something</div><div class="icon_files">other</div>
I don't have any other ideas, what could be the problem here?
Thank you
The jquery code is running, however, the elements the jquery code is targeting are being replaced after clicking the button, thus causing them to lose events/data. Try using event delegation instead. This causes the event to be bound to the id="files" element rather than the elements that are being replaced.
function ciao() {
$('#files').html('<div class="icon_files">another icon...</div>');
}
$(function() {
$("#files").on("contextmenu", ".icon_files", function(e) {
var left;
var top;
if ($(document).width() < 630) {
left = 0;
top = 0;
} else {
left = e.pageX;
top = e.pageY;
}
$("#context").css({
left: left,
top: top
});
console.log('context menu');
e.preventDefault();
});
});
<html>
<head>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
</script>
</head>
<body>
<button onclick="ciao()">ciao</button>
<div id="files">
<div class="icon_files">icon...</div>
</div>
</body>
</html>
Javascript/jQuery/jQuery Mobile
The codes below work fine but when I reload/F5 several times of this page, the currentDate and currentTime values are disappear. Then when I reload several times again, its work fine. Does anyone know what is the cause and how to solve it?
<%# include file="/common/taglibs.jsp"%>
<%# include file="/common/jquery-mobile-javascript-css.jspf"%>
<%# include file="/common/jquery-mobile-javascript.jspf"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
function DisplayTime(){
if (!document.all && !document.getElementById)
return
var timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2;
var CurrentDate=new Date();
var hours=CurrentDate.getHours();
var minutes=CurrentDate.getMinutes();
var seconds=CurrentDate.getSeconds();
var year=CurrentDate.getYear();
if (hours<=9) {
hours="0"+hours;
}
if (minutes<=9) {
minutes="0"+minutes;
}
if (seconds<=9) {
seconds="0"+seconds;
}
if(year < 1000){
year += 1900;
}
var currentTime=hours+":"+minutes+":"+seconds;
var currentDate=dayNames[CurrentDate.getDay()]+' '+monthNames[CurrentDate.getMonth()]+' '+CurrentDate.getDate()+', '+year;
document.getElementById('curDate').innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentDate+" </b>";
timeElement.innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentTime+"</b>";
setTimeout(DisplayTime,1000);
}
window.onload=DisplayTime;
</script>
</head>
Html
<body>
<div id="page" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<p class="ui-li-aside"><span id=curDate></span><span id=curTime></span></p>
</div>
</div>
</body>
Finally, i have replaced window.onload=DisplayTime; with using flag eg:
if(flag==true){
DisplayTime();
flag=false;
}
I think window.onload is response earlier before the Displaytime fully loaded and that is why it wont display on the page after reload/refresh page several times
Here is the javascript code.
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if(filmName == "parker")
window.location.assign("http://www.google.com");
else
alert("hello");
}
</script>
If I enter any other string I get an "hello" alert and If I enter "parker" the page "http://www.google.com" wont get loaded. Why is this happening?
EDIT:
Ok as someone mentioned I did remove "http://www.google.com" and added "http://stackoverflow.com" but it did not resolve my problem. And I cant even load local html pages that are in the same directory
if(filmName == "parker")
window.location.assign("index.html"); // also "./index.html" or ./index/html
Even this is not working. What's wrong
I also have jquery libraries: that is Jquery UI and Jquery
This question needs more of info I think. Here are the final edits
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Other style and js libraries, including Jquery Ui and regular jquery -->
<script>
$(document).ready(function() {
$(".youtube").fancybox();
}); // end ready
</script>
<script>
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
/* Rest of it, which is not necessary here */
</script>
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName); // for debugging
if(filmName == "parker")
window.location.assign("index.html");
else
alert("hello");
}
</script>
</head>
<body>
<div id='mysearch-box'>
<form id='mysearch-form'>
<input id='mysearch-text' placeholder='' type='text'/><!-- Input here guys -->
<button class = "none" id='mysearch-button' onclick = "myfunc()">Search</button>
<!-- press this button after entering "parker" -->
</form>
</div>
<!-- Rest of the HTML page -->
</body>
</html>
I assume you are using a form onsubmit event to call myfunc, if so you have to prevent the default behavior by return false; (for example)
HTML:
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
</form>
JS:
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
</script>
I have tested the following solution and it works perfectly:
setTimeout(function(){document.location.href = "page.html;"},500);
I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. My code is this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.
Instead of tracking clicks on the option level, track a change on the select level.
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this ..