Save HTML from one page to another page onclick - php

I know I could use a php include to read the html from a file on the server but how do I write a file to the server once the user clicks to navigate to the next page?
I have a div that is changed by jquery on the 1rst page. I want to read the changed div when the user clicks to go to the 2nd page and write the html from the 1rst page to the 2nd page.

You can use combination of javascript and php code.
jquery
get the value of changed div and place it into a hidden field, wrapped within a form tag and submit the form to the next page
php
and on next page, get your hidden field value from $_post array and display it.

So you have a div that is changed via jQuery:
<div id="something">something here</div>
To access the HTML inside your div,
var myHTML = $('#something').html();
Then Use AJAX to send the value to the second page:
$.ajax({
url: 'secondpage.php',
data: {
'key' : myHTML
}
type: 'post'
});
In secondpage.php, check for $_POST['key'] as follows
if( isset($_POST['key']) ) {
// myHTML was sent successfully
}

Not sure if it's a good idea to do this as users are clicking because it would take a while for the document to get updated, and what if multiple users were trying to access the same page? You can use something called a cronjob, which basically executes PHP from your site's server at a specified time interval. I did this to update my website with my Twitter feed every 10 minutes, but doing it on every click would be too slow. What exactly are you trying to do?

When the user clicks on "go to next page" link, send AJAX request to
some PHP file.
The AJAX request should contain the div html (use
jQuery: $(this).html())
In the php file write the html, and return
information to AJAX (true/false).
When AJAX success go to the next page.

Related

Remove content of textarea when iframe is done?

So currently my website works like this; you post an update and through iframe your update gets added to the database and then shown in a list below. But the problem is that when you clicked "Submit" the text you wrote is still shown in the textarea because the website doesn't update completely. I have tried to have "onsubmit" and "onclick" but both remove the content of the textarea before it gets added to the database so it displays an empty message.
What should I do in order to delay it just a second or how do I make it wait for the iframe to "send" data to my PHP-script?
Give your textarea an id and supposing that iframe is an element of the page that contains the textarea you have done the following in the iframe page:
<?php
//code should be done after db add
?>
<script>
o = parent.document.getElementById('textareaID');
o.value = '';
</script>
<?php
//the end of code or something else
?>
You are able to see those demos on jsbin:
http://jsbin.com/ulOyiVo/1 The page with iframe. Supply the textarea with any text and then click on simulate submit link
http://jsbin.com/EyuBeLo/1/ The iframe page
If your only problem is to have a delayed response, you could trigger a setTimeout function to your onClick, with the given setTimeout:
setTimeout(
function() {
alert('hello');
},1250 //in milliseconds
);
You can define a click or a submit event using jQuery and send a request to your server. You can handle the event when the server responded using a callback. In that callback you need to do whatever it is needed to do. Using setTimeout in this case is an unnecessary hack. You will either set up a big time to wait harming the user experience or in case the page responds later than the specified time your page will work unexpectedly. So, instead of that try defining an event.

Submit two forms to the same page

I have been on this site all day and can't seem to find what I need - no duplicate post intended.
I have a form containing a link which calls a modal popup containing a different form.
###### PARENT PAGE #############
<form...>
...
link
...
</form>
**** MODAL POPUP ****
<form...>
...
<input type="submit" />
</form>
**** END MODAL POPUP ****
### END PARENT PAGE #############
When I submit the form in the modal popup, the parent page is refreshed to show the updated info in the corresponding section of the page; except that the first form is not submitted and when the page refreshes to update the necessary section, the contents of the first form is lost.
I have tried using ajax to refresh only the necessary section of the page but that doesn't work as the sections that need refreshing use php variables with contents from mysql.
The system does what it needs to do and I don't mind the refresh. But I need a way to keep the user data entered into the first form.
Is it possible to submit the first form at the same time as the second to the same php page or any other way of preserving the user data in the first form on page reload without submitting it.
You cannot do this with pure php. You'll need javascript and write it in a way that when you hit submit on the modal it 'puts' the information back into the parent form.
One way is to make the modal form submit button not an actual submit button.
You might even be able to get away with taking the filled out section dom elements in the modal injected back into the parent form. Some jquery plugins already do this. For example colorbox
Here is a working example using only ONE <form> tag and jquery colorbox. http://jsbin.com/olalam/1/edit
I am not a php developer, so I'll suggest an alternative approach.
Before you refresh the page, you can serialize the form and store the data locally (e.g. in a cookie) then restore the data back into the form. Granted, that will require a bit more JS code, but should get you what you want.
UPDATE: Since you mentioned that you might need a little assistance on the JS front, here is some guidance:
Grab the jquery.cookie plugin here.
Grab the jquery.deserialize plugin here.
Use the following code as a starting point.
.
// the name of the cookie
var cookieName = 'myCookieName';
function beforeSubmit() {
// serialize the form into a variable
var serializedForm = $('#id-of-form').serialize();
// store the serialized form
$.cookie(cookieName, serializedForm, { path: '/' });
}
function afterRefresh() {
// read the cookie
var serializedForm = $.cookie(cookieName);
// de-serialize the form
$('#id-of-form').deserialize(serializedForm, true);
}
HTH

PHP/Javascript Bypass user input to display div

I have a page where if you click on a link, it exposes a div that using ajax displays content from a dbase.
After a user edits this content on the server, I'd like to use PHP to return the user to that page. This is no problem using a redirect
header("location:page.php")
However, when the user comes back to the page, ideally, I'd like to have the content in the div open automatically so the user can immediately see edits without having to find the link to open the div and click on it.
Is this possible, either with something in the url to fire the javascript or alternaively, when you load the page with a certain parameter, triggering javascript to open the div.
The code to open the div is a simple javascript call:
View Content
showDiv just uses ajax to display something from the server using responsetext.
Thanks for any suggestions
header("location:page.php?show=1")
Then in page.php body tag:
<body <?php if($_GET['show']==1) { ?>onload="showDiv()"<?php } ?>>

Refresh Div Containing PHP Function

So I have the following code:
<div id="currentmotto"><?php mottoGrab($name); ?></div>
And what this does is it uses curl to screen scrape a users motto and display it on the site. What I need it to do is for that function to refresh every few seconds to see if the user has updated the motto.
I know with jquery I can use the .load('phpfile.php') but the problem then is if I put that function in that file, it no longer gets the $name variable as that is from another page.
Any ideas?
Pass name to phpfile.php via the query string:
.load('phpfile.php?name=THENAME');
Then grab the name from within phpfile.php using $_GET['name'] and stick it in the function.
OR
Make an AJAX request passing the name and update the page using javascript.
Since PHP is executed server-side, it doesn't change once the client loads the page. The only way to refresh a div without JavaScript is to reload the page.
I would try using AJAX to get the name from the other file and update the HTML with JavaScript

Refresh content of a div without ajax

I have a div with id=mydiv and inside of this div I have some content that I am grab it dynamically from database with a while.
Is there any way to use a button to refresh or reload the content of my div without using .load() ajax method?
$("#mydiv").load("index.html")
example:
<div id="mydiv">
<?php
$trtyb = mysql_query ("SELECT * FROM xxx WHERE xxx= '$getcat'");
while($fina = mysql_fetch_assoc($trtyb)) {
echo $fina['name'];
echo "<br>";
}
?>
</div>
You need to get the fresh content. The only way you can do it is with an http request. The only ways to make the http request are:
1) reloading the entire page.
2) using ajax - If you don't want a delay and that is why you don't want to use ajax, you could set up a javascript timer that would make periodic ajax calls and continuously update the data into a variable. Then when the user clicks the button to refresh the data, you can just pull the data from the stored variable.
3) put all of the content in an iframe, and that would need to be refreshed (I see no benefit to using this).
Yes you can load any div without refresh any page and without calling ajax
here is working example
// your code $("#mydiv").load("index.html")
Working code is here:
// $("#mydiv").load("'your url here + #your div name'")
$("#mydiv").load(url + "#mydiv")
Don't forget to add space in the div if you will not make space in div the program will not work anymore.

Categories