steps to reproduce the error
open http://www.blackboardjournals.com/test2.php
click on the next button continuously for 30-40 times
the counter stops after a certain count
the console shows an error net::ERR_EMPTY_RESPONSE
if you refresh immediately after the counter stops, the site becomes unresponsive
I am not able to understand why this error is occurring. can somebody help me understand what is wrong?
My code:
<?php
if(isset($_POST['btn_num'])){
$btn_name=$_POST['btn_num'];
echo $btn_name+1;
exit();
};
?>
<script type="text/javascript">
function ajaxObj( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
function call_next(){
var new_ans=$('.number').html();
var ajax =ajaxObj("POST",'test2.php');
ajax.onreadystatechange=function(){
if(ajaxReturn(ajax)==true){
$('.number').html(ajax.responseText);
}
}
ajax.send('btn_num='+new_ans);
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="/pwa/js/jquery.js" ></script>
</head>
<body>
<div class="number">1</div>
<button onclick="call_next();">next</button>
</body>
</html>
Related
having a few issues at the moment regarding updating the content of a div using ajax and php. I am trying to echo the price in the php script into to the div and it is not happening....maybe I'm missing something. This is a modified and simplified example of my problem.
HTML CODE:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval('autoRefresh_div()', 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
PHP CODE:
<?php
echo "2.22";
?>
Put the function in without the ', or change it to:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval(function(){
autoRefresh_div()
}, 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
I would like to have on my HTML page a simple button allowing me if right clicked one, click activate every time my PHP script.
I tried with this code, without any positive result for the moment:
//My html code
<!DOCTYPE html>
<head>
<title><?php echo $pageTitle; ?></title>
<meta charset="UTF-16" />
<link rel="stylesheet" type="text/css" media="all" href="css.css">
<style></style>
</head>
<body>
<main>
<button onclick="doTheFunction();">Run the script</button>
<script>
function doTheFunction(){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","script.php",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
}
}
</script>
</main>
<footer>
<?php echo $footer; ?>
</footer>
</body>
A part of my php code :
echo "$result";
Your code is doing nothing with the result of Ajax. I suggest starting here as a reference. The most important thing you're missing is:
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
Where "demo" is the Id of the element you want to load the Ajax result into. Otherwise nothing will happen with that result.
EDIT
Let's clean up your code so scripts and html are separate:
function doTheFunction(){
xmlhttp = new XMLHttpRequest();
//Set this before sending!!
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
}
//No reason to post
xmlhttp.open("GET","theme/generator/gensent.php",true);
xmlhttp.send();
}
<head>
<title><?php echo $pageTitle; ?></title>
<meta charset="UTF-16" />
<link rel="stylesheet" type="text/css" media="all" href="css.css">
<style></style>
</head>
<body>
<main id="demo">
<button onclick="doTheFunction();">Run the script</button>
</main>
<footer>
<?php echo $footer; ?>
</footer>
</body>
I would put the <script> tag at the end of your html, after closing the body, or include it in the header from another file. Note- I use GET since no sensitive info is transferred, the script should load after the HTML- hence put at the end, and finally you need a tag with the Id for this to actually work.
I'm unable to get one of my functions to work. My assumption is that there is a 'scope' issue due to the fact the function works when used in the same file it modifies. Anyway here is the function and fiddle.
The function as the title suggests should replace text on hover and 'off-hover' put the original text back. The code snippet below works, but when used as I'm trying to(fiddle) it does not work.
http://jsfiddle.net/s4q8bva6/3/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
01 - System Overview and System Manager
<script>
$("a.open").hover(
function() {
var $this = $(this);
$this.data('initialText', $this.text());
$this.text("Click to return to previous page");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
</script>
</body>
</html>
EDITS:Update
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHP File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Makes the file tree(s) expand/collapsae dynamically -->
<script src="php_file_tree.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>File Tree </h1>
<h2>Browsing Training Videos...</h2>
<?php
//This links the user to http://example.com/?file=filename.ext
//echo php_file_tree('Training/', "http://example.com/?file=[link]/");
include("php_file_tree.php");
// This links the user to http://example.com/?file=filename.ext and only shows image files
$allowed_extensions = array("htm");
echo php_file_tree("Training/", "http://URL/files/[link]", $allowed_extensions);
echo "This is a TEST";
// This displays a JavaScript alert stating which file the user clicked on
//echo php_file_tree("demo/", "javascript:alert('You clicked on [link]');");
?>
<!-- This function collapses the li under an open li-->
<!-- Togles all 'Other' Top Level il elements on click-->
<script>
$(document).ready(function () {
var col = 2
$(".pft-directory").click(function () {
$(".pft-directory").toggle("fast");
$(this).toggle("fast");
if (col > 1) {
$(".php-file-tree").css("columns", "1", "-webkit-columns", "1");
col = 1;
} else {
$(".php-file-tree").css("columns", "2", "-webkit-columns", "2");
col = 2;
}
});
$(".open").hover(function () {
var $this = $(this);
$this.data('initial-text', $this.text());
$this.text("Click to return to previous page");
},
function () {
var $this = $(this); // caching $(this)
$this.text($this.data('initial-text'));
});
});
</script>
</body>
</html>
My jQuery Mobile page does not load content via $.get which is bind into pageinit event, but does so when I hit refresh (F5), why is that so?
My HTML page igra.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- stili za custom temo, jquery, jquery mobile, phonegap-->
<link rel="stylesheet" href="themes/what.min.css" />
<link rel="stylesheet" href="jquerymobile.css" />
<script src="jquery191.js"></script>
<script src="jquerymobile.js"></script>
<script src="phonegap.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="stil.css" />
</head>
<body>
<div data-role="page" id="igra">
<div data-theme="a" data-role="header">
347 coins
<h3>WHAT?</h3>
Home
</div>
<div data-role="content" class="igracontent"> </div>
</div>
</body>
</html>
My main.js with jQuery Mobile code:
$( document ).delegate("#igra", "pageinit", function() {
var par = qs["battlefield"];
$.get('igra.php?battlefield='+par, function(data2) {
$('div.igracontent').append(data2).trigger('create');
});
});
//parse url parameter
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
In igra.php I make SQL query and retrieve some data which I format in jQuery Mobile style and echo it back.
I know jQuery Mobile does not load head into DOM in subsequent pages, so main.js is also included in index.html head which is landing page of my app. All transitions to new pages are by normal ajax querying (I do not prevent default behaviour).
So what happens? When I navigate to igra.html?battlefield=3 the pageinit event does happen but content which I load via $.get from php page does not get inserted! If I hit F5(refresh) the content does get loaded into page. Can anybody explain and help? :) Thank you!
I've made a site from an youtube tutorial. Here's my test site. And
here's the tutorial (final step of 3) if it helps. No CSS used yet.
When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.
Me
I'm totally new to JavaScript.
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /
<div id="content_area"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>
nav.js:
$(document).ready(function () {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function () {
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
return false;
});
Replace:
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
With:
$('#content_area').hide('slow', function(){
$(this).load($(this).attr('href')).fadeIn('slow');
});
This will fade it out and wait until the animation is complete before calling that function and loading in the new content.
Check out the documentation for more info.
you can use handlers with your own functions...
for ex :
$('#show').click(function() {
$('#myDiv').show(0, onDivShow);
});
$('#hide').click(function() {
$('#myDiv').hide(0, onDivHide);
});
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
You can try this:
$('.menu_top').click(function () {
var href=$(this).attr('href');
var page = $('<div/>').attr('id','page').load(href);
$('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');
return false;
});