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
Related
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]
I have a simple php if statement that checks for an error return on a form submit basically.
<?php if ($this->session->flashdata('error')): ?>
×
<div class="alert alert-error" id="error"><?php echo $this->session->flashdata('error'); ?></div>
<?php endif ?>
And I have this script that I want to put into this php so when the php is true the login box or account-container will shake.
$("#account-container").addClass("animated shake");
I tried echoing the script inside the php but all that was give me echo ; displayed on the page when the if was true.
Maybe you can use this script, I'm not at ease with jquery and you would have to adapt the code:
$(function(){
if ($("#error").length !== 0) {
$("#account-container").addClass("animated shake");
}
});
Place it in the header as javascript source or embedded in a script tag
The $().load hook the containing handler to the onload event in the page*
The function simply check if there is an element in the page with id error and
add the class to the #account-container element if is the case.
I won't use $().ready() as the dom can still be partially rendered
References:
http://api.jquery.com/ready/ Says to use .load() function for onload event and
alert that a <body onload="something"> tag is not compatible with the jquery event management
http://api.jquery.com/load/ Can be useful
I think that you are using Jquery for the javascript shake, you should call the javascript routine when the page is ready to load
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle">This is rendered by PHP</div>
<script>
$( document ).ready(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
Note that the whole page is rendered by PHP, and the script will work when the document render is ready.
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...
i want to delete a record that are showing in while loop from the database but before deleting i want to display a confirmation box.The code i have written is below.it is working fine but to delete record i need to pass an id that i haave described in the code
------index.php starts
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
<div class="item">
<div class="delete"></div>
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
----index.php ends
----jquery.confirm.js file starts
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += ''+name+'<span></span>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
----jquery.confirm.js file ends
-----script.js file starts
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
elem.slideUp();
//sql delete query will be written here... in where condition i need to pass the fetched record id from index.php file in where condtion
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});
-----script.js ends
You can use the html data attribute and retrieve it with .data jQuery method
In your HTML:
<div class="delete" data-id="{$id}"></div>
In your Javascript
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
var id = elem.data('id'); /* this is your db id */
});
Are you sure you want to send a query from Javascript? The usual way to do this is to send a request (via jQuery) with that specific id, to a script which runs the query (server side), and returns a response.
Now, since you add the item divs, using a while, why not add an id property to the divs, which contain the id from the database, something like
<div id="item<?php echo $row['id'];?>" class="item">
<div class="delete">
</div>
This way, the $('.item .delete').click handler has access to the item's id, by parsing the target's id property, and you don't need to pass it explicitly to jQuery.
Here you can use hidden field to save value for id and then use jquery to retrieve it from hidden field..
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<input type="hidden" id="hid_id" value="<?php echo 'fetched id';?>" />
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
And then in jquery when using confirm box you can get value by id hid_id .
I was trying to use <script> <noscript> checks inline with my PHP to render different form elements depending on weather or not someone has javascript enabled.
To display something to non enabled users only I can successfully use
<noscript> <?php ... ?> </noscript>
To display something to enabled users only I tried whats below but it does not work the same as above. Instead it allows all users to still see the PHP.
<script> <?php ... ?> </script>
How can I limit something to only those with javascript enabled without having two totally different pages?
You may be able to use something like this:
<script>
<?php
ob_start();
// ...
$scriptOnlyData = ob_get_clean();
?>
document.write(<?php echo json_encode($scriptOnlyData); ?>);
</script>
Javascript runs on the Client-side (in the browser), PHP runs on the Server-side (before the page is sent to the browser). So PHP does not know whether the browser does, or does not, have Javascript.
The simplest solution is to use Javascript itself to show/hide various elements within the browser, like so:
<!doctype html>
<html>
<head>
<title>Test Page</title>
<style>
.showWithJS {
display:none;
}
</style>
</head>
<body>
<div class="showWithJS">
This DIV, and anything with the class "showWithJS",
will only be seen when Javascript is enabled.
</div>
<div class="hideWithJS">
This DIV, and anything with the class "hideWithJS",
will not be seen when Javascript is enabled.
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.showWithJS').show();
$('.hideWithJS').hide();
});
</script>
</body>
</html>
Another option would be to use Javascript to set a cookie (which can be read by PHP) to indicate whether that javascript is running. The downside of that, of course, is that, should the user switch javascript on/off mid-visit, the cookie will not update to reflect that change.
<?php
$javascriptOn = ( isset( $_COOKIE['javascript'] ) && $_COOKIE['javascript']=='on' );
?><!doctype html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<?php if( $javascriptOn ){ ?>
<div>
This DIV will only be seen when Javascript is enabled.
</div>
<?php } ?>
<?php if( !$javascriptOn ){ ?>
<div>
This DIV will not be seen when Javascript is enabled.
</div>
<?php } ?>
<script>
document.cookie = 'javascript=on';
</script>
</body>
</html>
The downside of this is that you need a pageload to set the cookie (it cannot be set and read by the same pageload), so you would need to refresh the page to see the changes.
Load the PHP in javascript and then insert when the DOM loads
JS:
function pageLoad(){
var text = "<?php ... ?>";
document.getElementById('scriptSpan').innerHTML = text;
}
html:
<span id="scriptSpan"></span>