I have a page which shows some data from a database.
Each of these data rows has a link with an ID.
<a href="javascript:void(0);" onClick="changeUrl(\'?side=annoncer&sletid='.$row['annonce_id'].'\');">
This is the changeUrl function:
function changeUrl(url) {
window.history.replaceState(null, "Title", url);
}
The link points to the same page, with &sletid added.
When &sletid is set, the page should do a popup with the ID of the selected row.
if (isset($_GET['sletid'])) {
$sletid = $_GET['sletid'];
echo "<script language='JavaScript'>alert ('ID:".$sletid."');</script>";
}
The URL changes, and the popup script code is added to the source, but the popup doesn't show unless I manually update the page again. Why this behavior?
replaceState doesn't actually load the page, it just edits the history (and the location bar) in the browser. You need to load the page yourself using AJAX.
Your phpcode doesnt get executed because the change of the history state just affects the client side.
You need to listen to the change of the history on the client side.
Related
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.
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 } ?>>
i have simple coding problem. i have created a page with textbox and share button. the page also contains one Points up button.
i had a problem with that points up button that when the user click on that button and refresh the page ... a window ask for resend of information
for that i have used following code which works fine.
`header('Location: samepageurl.php');
exit;`
but the problem with above code is when user scroll down page and click the button. the page automatically scrolls up. and user have to manually scroll it down.
what i want is the page should refresh but it should be on the same location where it was.
if the problem is still unclear please refer the following images
You can set a fragment identifier.
eg:
<a name="points_up"></a> <!-- this needs to be near that button, the page will scroll exactly where the element is -->
and redirect him to:
header('Location: samepageurl.php#points_up');
die;
Mihai answer is correct, but as you said that fragment identifier is not working because each user has points up button, you can pass user id as a fragment identifier and make a hidden(display : none;) <a> tag and pass the user id in front of each user...
Like this:
You can set a prefix before a user id too (optional)
<a name="pu12345" style="display: none;"></a>
<?php
header('Location: whatever.php#pu12345');
exit;
?>
You can send the request via ajax instead relying on the normal form submission. That will not affect the scrolling of the current page.
Add this line at the bottom of your page before the the <\body> tag
<button id="PageRefresh">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#PageRefresh').click(function() {
location.reload();
});
</script>
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.
I know there a bunch of topics on this, but I couldn't determine what to do based on what I read in the other topics.
I have a page "abc.php". The user can do a search which then populates a form with 2 ajax requests. Then if the user navigates to another page and then clicks BACK to "abc.php", the contents of the form is not complete because the ajax doesn't run. Is there a way to make this happen?
Modify your URL when you do the ajax by adding the search terms there after a hash (e.g. http://example.com/search.php#search-terms-here)
Then when the page is loaded, read the search terms back from the URL.
This is a very nice article / tutorial on enabling the back-button using jQuery.
Using history.js, the following function 'listens' to changes in the url bar, and calls a function to load the appropriate page:
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
page(State.url);
});
function page(url) {
//AJAX
}
Now whenever you want to change the page, you call:
History.pushState({state:X}, "Page Title", "Page Url");
This will update the browser's url bar, and automatically call page(State.url) for the new url; and all the browser features like forward/back button, bookmarks, etc... should work.