I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:
Access to index.php in fireflx
Click a pjax link: location bar and page contents are changed
Click Firefox's back button: location bar is changed but contents remain
This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.
My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip
index.php
<?php
$page = 1;
if (isset($_GET['page'])) {
$page = $_GET['page'];
}
$isPjax = false;
if (!empty($_SERVER['HTTP_X_PJAX'])) {
$isPjax = true;
}
if (!$isPjax):
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page<?php echo $page; ?></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
// link
$(document).pjax('a.pjax', '#main');
// form
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '#main')
})
});
</script>
</head>
<body>
<h1>pjax test</h1>
<ul class="links">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<form>
Pageļ¼<input name="page" type="text" value="1">
<input type="submit">
</form>
<div id="main" style="border: 3px double gray">
<?php endif; ?>
<?php include("page/{$page}.html") ?>
<?php if (!$isPjax): ?>
</div>
</body>
</html>
<?php endif; ?>
page/1.html
page1 contents
page/2.html
page2 contents
page/3.html
page3 contents
js/jquery-1.9.1.min.js
js/jquery.pjax.js
I could have found a solution by myself...
before:
$(function(){
// apply pjax
});
after:
$(document).ready(function() {
// apply pjax
});
Now firefox back button looks working fine.
I'm not sure about reason why.
Actual behaviors of them looks different though several texts says the two writing form meanings are exactly same...
Related
Hiii everyone,
I just want to show one div if the database value is equal to some value.I tried like this
<?php echo $show['birth_certificate_available']=='Available') { ?>
<script type="text/javascript">
$(".birth").show();
</script>
<?php } ?>
But the div is not showing.I dont know why its not working.Kindly guide me to correct this issue.
Please modify the code accordingly :
<?php if($show['birth_certificate_available']=='Available') { // put a condition?>
<script type="text/javascript">
$(document).ready(function(){ // jQuery ready function
$(".birth").show();
});
</script>
<?php } ?>
Wrap it in ready() function as follows,
Assuming you have already imported the relevant jquery lib in your code.
<?php echo $show['birth_certificate_available']=='Available') { ?>
<script type="text/javascript">
$(document).ready(function(){
$(".birth").show();
});
</script>
<?php } ?>
I missed JQuery reference document so that its not worked.Now I added script document its working.Thanks all who helped me to fix this.
Solution
echo outputs data to the page. To write a condition, you would like to use if statements.
<?php if ($show['birth_certificate_available'] === 'Available'): ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.birth').show();
});
</script>
<?php endif; ?>
Note: if jQuery is already linked to your document, remove the <script src="..."></script> line. Otherwise, I suggest you to move the <script src="..."></script> line right before the </body> HTML closing tag to speedup HTML elements loading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="birth" hidden="hidden">Foobar</div>
<?php if ($show['birth_certificate_available'] === 'Available'): ?>
<script>
$(document).ready(function() {
$('.birth').show();
});
</script>
<?php endif; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Note: I use the === equal assertion to force type testing. Whatever, be careful: testing is case-sensitive, whether it is == or ===
The div element must have the birth class, must exist and must be hidden in order to successfully show() it
Debug
$show variable
If this is not working, and in order to debug the $show variable, you may want to use var_dump() as so:
var_dump($show);
and ensure it is an array and has the birth_certificate_available index defined.
Javascript errors
Use the browser console to retrieve javascript errors (such as inexisting div elements...)
Here my index.php page structure:
<?php
session_start();
include("lang/".$_SESSION['lang'].".php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<a href="#" data-module="home">
<div id="content"></div>
</body>
<script src="jquery.js"></script>
<script src="script.js"></script>
</html>
I have a piece of js code to load the right clicked module.
$('a[data-module]').click(function(event) {
event.preventDefault();
var module = $(this).attr('data-module');
$('#content').load('modules/' + module + '.php');
});
My problem is:
On each module page, I use $_SESSION variables. But with .load() jQuery function, it don't works anymore.
Do you have a reason for that ?
Thanks.
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
So basically I have this program that sets a header (id="infoHeader") at the top of the page to some text retrieved from another site. I need this however to change when a button is pressed. As you can see it currently uses a PHP script to fetch the text from a given URL but I need to fetch from a different URL when a button is pressed. So basically
Button1 press -> infoHeader = Site 1 text
Button2 press -> infoHeader = Site 2 text
Is there a way to use a button to change the innerHTML of [id="infoHeader"] so that it runs the PHP script to get the text.
It is kind of difficult for me to explain, if you need I can try and give more info.
<!DOCTYPE HTML>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
</head>
<body>
<div id=page>
<div id=leftPanel>
<p id=missionsHeader>Active Missions</p>
<p><?php include("getList.php")?></P>
</div>
<div id=info>
<p id=infoHeader><?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?></p>
</div>
</div>
</body>
You need to use JavaScript + AJAX. JavaScript is needed to change the content of the div after the page is loaded/rendered and AJAX for loading a PHP file without the need to refresh the web page.
I recommend you to use jQuery and it's ajax function.
<!DOCTYPE html>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
<!-- include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() { // wait for the DOM to finish loading
// button1
$("#someID").click(function() { // element with id "someID" (your button)
$.ajax({
url: "getData.php", // the content of the page which you want to load
cache: false
}).done(function(dataFromServer) {
$("#infoHeader").html(dataFromServer); // set the data from the server (getData.php) as the content of the element with the id "infoHeader"
});
}):
// button2
// the same as above for the other button
});
</script>
</head>
<body>
<div id="page">
<div id="leftPanel">
<p id="missionsHeader">Active Missions</p>
<p> <?php include("getList.php"); ?> </p>
</div>
<div id="info">
<p id="infoHeader"> <?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?> </p>
</div>
</div>
</body>
</html>
For your problem:
Change content of div - jQuery
http://api.jquery.com/jquery.ajax/
Here are some good resources for JavaScript, jQuery and AJAX:
JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery: http://en.wikipedia.org/wiki/JQuery
jQuery: http://www.w3schools.com/jquery/
jQuery: http://www.codecademy.com/en/tracks/jquery
jQuery + AJAX: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
I'm trying to pass the data-value of the < li > I clicked to PHP in the same page. I'm using AJAX to pass the data to PHP, to be used in querying. I think the ajax request is working, but the php code inside the if is not running.
The codes:
offices.php
<?php
include 'connect.php';
$page = 'offices';
include 'header.php';
if (isset($_POST['postdata'])){
$filter1 = $_POST['postdata'];
echo $filter1;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="filter1">
<ul>
<li class="fteacher" data-value="teacher">Professor</li>
<li class="foffice" data-value="office">Gabinete</li>
</ul>
</div>
<script src="js/offices.js"></script>
</body>
</html>
offices.js
$('.filter1 li').click(function(){
$.ajax({
type: 'POST',
url: 'offices.php',
data: {'postdata': $(this).attr('data-value')},
success: function(msg){
alert('Success');
}
});
});
I tried the code you provided, but had to ommit the two includes at the beginning of your PHP script, and it worked. Testing was done using file_put_contents("test.txt", "test"); in the if-clause.
You may have a look at what the PHP script returns by using alert(msg). Note that everything after the PHP part is returned, too. It might also help to use error_reporting(E_ALL) in the PHP to search for problems in the included scripts.
Please try this. Hope you are only expecting the output $filter1
<?php
if (isset($_POST['postdata'])){
$filter1 = $_POST['postdata'];
echo $filter1;
}else {
include 'connect.php';
$page = 'offices';
include 'header.php';
?>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="filter1">
<ul>
<li class="fteacher" data-value="teacher">Professor</li>
<li class="foffice" data-value="office">Gabinete</li>
</ul>
</div>
<script src="js/offices.js"></script>
</body>
</html>
<?php
}
?>