How to make a custom Back button for jQuery load() content - javascript

In one of my php page (Report.php), I am loading its content through jQuery load(). I want to create a "back button" on my php page so that my user can click it to go back pages. Note- I am not looking for browser back button.
Here is my php pages -
report_template.php
//This page query my database and creates a content table<br>
//Table content
Another Report Link
report.php
<button>Go Back</button> //This button will take user to back (equivalent to window.history.back() )
<div id="rept"> </div>
<script>
jQuery('#rept').load('report_template?id=1');
function fetchReport(id){
jQuery('#rept').load('report_template?id='+id);
}
</script>
I am average level skill in jquery/javascript.

At the top of every page start session session_start(); and set the current page as a $_SESSION variable. IE
<?php
session_start();
$_SESSION['last_page'] = $_SERVER['PHP_SELF']; // Or whatever you designate it as
Then you can call it in report.php
<?php
session_start();
<button onClick="window.open(<?= $_SESSION['last_page'] ?>);">Go Back</button> //This button will take user to back (last report page he's seen)
<div id="rept"> </div>
<script>
jQuery('#rept').load('report_template?id=1');
function fetchReport(id){
jQuery('#rept').load('report_template?id='+id);
}
</script>
A slightly simpler, yet less reliable way to do it, is to grab the last page the person was on according to PHP $_SERVER['HTTP_REFERER'] This can also include "off server" pages. Also it may better suit your question if the referrer may, in fact, come from "somewhere else" IE:
<button onClick="window.open(<?= $_SERVER['HTTP_REFERER'] ?>);">Go Back</button>

Related

page reload with success message php

i am trying above but message is displayed on php page.instead of reloading on index page AND DISPLAY MESSAGE ABOVE SUBSCRIBE FORM ITS REDIRECTING TO PHP PAGE.You can check on test site link attached.Form is on index
page.I tried to reload page through jquery onload and onclick onsubmit but didn't worked.below are test which i did.
//form is on index.html page
<!-- your form here -->
<form action="forms/subscribe.php"id="form" method="post">
<input type="email" name="email" placeholder="Enter your Email">
<input type="submit" value="Subscribe">
</form>
//form is on index.html page
My php page
<?php
// My Code goes here form to email
header.location(Location: /index.html)
?>
You cannot use js variable values after reload. You need to do things without reloading the page means you just need to update the content and control your HTML tags.
The above example you mentioned. They are not reloading the page, they are getting values from input box then hide that div. After hiding the div they are showing another div with the information.
For your solutions you can do the same but remember to reset input values for every request.
You can do it in PHP with page reloads if you store a message in the session. At the top of each page make sure that the first line is
session_start()
Then on the page that receives the data set a session message
$_SESSION['message'] = 'Some Value';
Then on your page with the form you check to see if the session has a message. If it does, display it and then clear it.
if(isset($_SESSION['message']) {
echo $_SESSION['message'];
session_unset('message');
}
some silly syntax error
using onsubmit="alert()"
<script>
function alert() {
alert("Thank you for contacting us. We will be in touch with you very soon.!");
}
</script>
on subscribe pageheader('Location: /index?message=success');

Change paragraph text from another html site

I'm making a simple html site with some text and a php-login area. When logged in successfully (which already works) I come to a site where I want the possibility to change paragraph text on the landing page.
I tried this code, but I lets me only change paragraph text on the same site, not on the landing page. Is this possible?
<script type="text/javascript">
function change() {
document.getElementById("name2").innerHTML = "New text inside the text element!";
}
Button to trigger the event
<input id="button1" type="button" value="1" onclick="change()">
well, document refers to the site, not the landing page, right?
besides, if you want to make a change permanent, you should retrieve the text from somewhere you save it in, and not only change what is currently displayed
You could definitely pass a cookie to the Global session variable and you can use an if statement to check on the new page if the session is available and then you can render a new markup.
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
if you set these variable then you can have access to them on each page and can use it to manipulate your data

Trouble with continous refreshing page

When I try to run this script:
<form class="form-inline" action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<button type="submit" name="buttonSubmit" class="btn btn-default">Submit</button>
</form>
<?php
if (isset($_POST['buttonSubmit'])) {
unset($_POST['buttonSubmit']);
echo "<script>alert(".isset($_POST['buttonSubmit']).")</script>";
echo "<script>location.reload(true);</script>";
}
?>
As a result, the page is refreshing in an infinite loop.
What is the reason?
How do I refresh my website only once?
When you use location.reload(true);, you do the same, programmatically, as clicking on the browsers "Refresh/Reload" button.
This will generate yet another "submit", over and over, hence always make the statement isset($_POST['buttonSubmit']) be true.
Here are a couple solutions:
location.href = 'page-to-load';
location.assign('page-to-load');
location.replace('page-to-load');
The Location.replace() method replaces the current resource, and after that the current page will not be saved in
session History, meaning the user won't be able to use the back button either,
to navigate to it and cause a repeated "submit", which normally will occur.
Note, if the 'page-to-load' is the same being already loaded, you can use location.href, e.g.
location.replace(location.href);
Yet another way would be, instead of rely on a client side script, to do a response redirect upon a form submittion, server side.
How to make a redirect in PHP?
This helped me:
Change location.reload(true); to window.location.href = '';

Running a php script asynchronously

I have a web page with a button, when a user taps the button there is a long php script that runs (say to look at past tokens bought by the user) and sends the user an email at the end of script.
I have abstracted my code for sharing purpose (replacing the script with just a sleep function).
webpage.php
<div class="card">
<input type="submit" class="button" name="update" value="Update" />
</div>
<script type = "text/javascript" src="jquery_functions.js"></script>
jquery_functions.js
$(document).ready(function(){
$('input[name="update"]').click(function() {
$.post(
"script.php",
{update:"fav_tokens"},
function($data) {
alert ($data.message);
},
"json"
);
});
});
script.php
<?php
sleep(60);
?>
The problem is that as soon as the user presses on the button, he is "locked in" on the page and cannot navigate away from it... which kind of defeats the purpose of doing the jQuery AJAX thing.
I have tried putting the script in another file (script2.php) and then call it using exec("php -f script2.php"); in script.php but that also stop the user from navigating away from the page.
What can I do to make this work?
The likely issue is that script.php is opening a session and whichever page you are trying to visit is also trying to open a session but has to wait until script.php is all set with it.
Somewhere in script.php you will need to add:
ignore_user_abort(1); // Let the script run even if user leaves the page
set_time_limit(0); // Let script run forever
session_write_close(); // Close the session. This will allow for other pages to open it
// You will still be able to read your session data but can no longer write to it unless it is re-opened
sleep(60);

global variable not displayed in div

I declare a variable at the beginning of my .js file:
var option="blabla";
On page 1.html I click on a link to page 2.html where I have
<script>document.write(option);</script>
No text is displayed on 2.html. When I refresh the browser while I am on 2.html I get undefined as an output.
What do I have to do to have the text displayed straight after I click the link?
Alternatively, how can I get the following code work to output strUrl on 2.html:
on 1.html I have a link:
<a href="2.html" onclick="function1("item")">
on 2.html I have a div:
<div id="display">document.write(strUrl);</div>
then I have in my .js file:
function1(searchitem)
{
strUrl = 'http://blabla.com/'
+ '?key=' + searchitem;
}
You try to create a Javascript variable on a page and then use it on another page. This is a more-or-less broad problem, since you want to maintain values across pages. First of all, you need to decide where is this value going to be defined and where is it going to be used. If this is more like a server-side variable, then you need to define it on server-side and then generate it into your Javascript code. If you are using PHP, then you can do it like this:
<script type="text/javascript>
var foo = '<?php echo $bar; ?>';
</script>
Naturally, you need to initialize $bar to be able to do that. If the variable should be a client-side variable, then you need to use localStorage, like this on 1.html:
localStorage.setItem("option", "blablabla");
and then load it on 2.html:
localStorage.getItem("option");
Or, if you need to use it both on server-side and client-side, then you can use a cookie for this purpose. Using cookies i slightly more complex, but my answer to another question should get you going.
Let's focus on the cause this did not work for you. A Javascript variable will cease to exist when the page is unloaded, so you will not be able to use its value after that. So, you need to persist it somehow, storing it either on the server or the computer where the browser is being run.
As a side-note, I should mention that you can use Javascript variables accross pages if you load some pages inside iframes of a page, but that is a different scenario.
This is what FORMS and AJAX were invented for. If your server has a PHP processor (virtually ALL of them do), then you can rename your .html files to .php and use a bit of PHP to accomplish your goal.
A web page ending with .PHP works exactly the same as one ending in .html, except that you can now add snippets of PHP code where desired. It is not necessary to have any PHP code, but if you have some it can do stuff.
Method One: FORMs
If you want to switch to page2.html and see a value sent from page1.html, you can use a FORM construct and post the data from page1 to page2:
page1.php
<form action="2.html" method="post">
<input name="option" type="text" />
<input type="submit" name="sub" value="Go" />
</form>
page2.php
<?php
$p1 = $_POST['option'];
?>
<div>On page1 of this website, you typed: <?php echo $p1; ?>. That's what you did.</div>
Note how a <form> uses the name= attribute for the name of the variable that is sent to the other side.
Example Two: The AJAX method
HTML:
<div id=nonForm">
<input id="option" type="text" />
<input type="button" id="myButt" value="Go" />
</div>
<div id="results"></div>
jQuery:
$('#myButt').click(function(){
var opt = $('#option').val();
$.ajax({
type: 'post',
url: 'page2.php',
data: 'option='+opt,
success: function(john){
if (d.length) alert(john); //display result from Page2 in a pop-up box
$('#results').html(john); //Or, display it right on the page
}
});
});
PAGE2.PHP -- The AJAX processor file
<?php
$opt = $_POST['option'];
//Now, you can do something with the data in $opt, and then send back a result
$rtn = 'Hey, you sent: ' .$opt;
echo $rtn;
The primary (and most important) difference between the two methods is that the FORM will change pages on you. The user will be sent from Page1 to Page2, and the screen will flash as this happens.
What's exciting about AJAX is it sends data to Page2, where Page2 can do something with it (for example, a database lookup), and then Page2 sends different data back to Page1. This new data can then be displayed on the page WITHOUT the page refreshing.
Here are a couple of very basic AJAX examples, to get you going:
AJAX request callback using jQuery

Categories

Resources