A have following code:
if (isset($_SESSION['login'])) {
print("<a href=\"add-to-cart.php?uuid=". $Item->PartId ."&price=". $Item->Price."\" >Add to cart</a>");
}
I heard about Ajax(sending form without page reload, e.t.c)
So as you see I have link a href
to add-to-cart.php?uuid=someID&price=someprice
This code works, and PHP script adds to DataBase record, and navigates to this url. But I dont need to navigate to this url.
So How could I do this, executing PHP with these dynamics parameters and prevent navigating to this URL?
But how could I
You have to add a javascript click handler to the link so that users send AJAX-request instead of navigating to the URL.
Here's a snippet using jQuery (assuming that your links have lnk-ajax class):
<script>
$(function() {
// Send AJAX request instead of navigating to the link's URL
$('.lnk-ajax').click(function(e) {
var linkUrl = this.href;
// Send AJAX request
$.ajax(linkUrl).done(function(data) {
// process the result
// ... put your code here ...
alert('Success');
});
// Prevent default link behaviour
e.preventDefault();
});
});
</script>
Related
I'm using the code below to load the results from a database query in a PHP page:
click me
$('.item > a').click(function(){
var url = $(this).attr('href');
$('.item-popup').fadeIn('slow');
$('.item-content').load(url);
return false;
});
All works fine right now, but the next bit of functionality is a problem. Inside results.php which ajax loads into .item-content, I have another link that is supposed to update and increment click counts for that link, also without refreshing. The functional PHP bits all work fine. My only problem is the jQuery/AJAX aspect of things.
Maybe I'm going about it the wrong way, but what I really want to do is have a page with a container that loads the result of of a database query from a PHP page, but also in that container, I have a link/button whose click count I want to be able to save and update all without refreshing.
EDIT
I guess the most important question I need answering is: When the ajax on index.php loads the content of results.php into the container in index.php, do browsers treat the newly loaded ajax content as part of the parent page (index.php) or is it still treated as a different page loaded into the container like an iFrame?
If say for example it is click event then you need to write
$('input element').on('click',function() {
// write code over here
})
Dont know for sure if you want this, When returning the data in the load function you will have to add a link like this in the resultant HTML which will be clickable:
Now in javascript you need to catch the click event of the link like this:
<script type="text/javascript">
$(function(){
$(".item-content").on("click", ".clickable", function(){
var counter = $(this).data('counter');
var id = $(this).data('id');
$.ajax({
url : //your url here,
data : {'id' : id, 'counter' : counter },
type : 'POST',
success : function(resp){
//update the counter of the current link
$(this).data('counter', parseInt( $(this).data('counter') )+1 );
//whatever here on successfull calling of ajax request
},
error : function(resp){
}
});
});
});
</script>
Here is my code :
$('li a').click(function() {
var link1=$(this).attr('href');
$('section:#main').load(link1);
if (link1!=window.location) {
window.history.pushState({path:link1},'',link1);
}
});
The url on the browser is changing but if the user clicks refresh on the browser it will give the url page only, not the complete one.
I use a very simple jquery plugin for this.
http://benalman.com/projects/jquery-hashchange-plugin/
Works fine and remembers the page loaded by the hash tags, ex: www.site.com/#yourajaxpagetag
I asked a question about this but the post degenerated into confusion which lost the gist of the problem. Basically I'm trying to set up ajax so that a "like" or "unlike" link updates a database and shows the new status without having to refresh the page.
So I have a "view.php" page with links which are produced by a PHP loop. They look like this:
<div class="tools">
like
</div>
<div class="tools">
unlike
</div>
Note that each link has two classes: firstly a "like" class, and then either a "do_like" class or a "do_unlike" class, according to whether it's a link to "like" or a link to "unlike" respectively. (Originally I only had the "do_like" and "do_unlike" classes, which I was using to transform the link via css into a rollover-type image/icon, but I added the "like" class as well, for the ajax - see below.)
When a user clicks one of these links, the receiving processor.php script takes the variable-value pairs from the query string, and uses them to update a database, and then build a new form of the link, which it echoes out. The new form of the link is such that a "like this" link turns into an "unlike this" link, and vice-versa. So for the first "like" link above, the database returns:
processor.php?c=cars&p=2&s=d&u=d&pid=999999990
It's the "u" variable in the query string which determines whether or not the processor.php page will either insert the data into the database in the case of a "like" (u=i), or delete the data from the database in the case of an "unlike" (u=d). (I'm using prepared PDO statements for the database inserts/deletions.)
I'm using jquery/ajax to insert this newly built link in place of the one that was clicked, without having to refresh the page.
To do this, in the "view.php" page I included jquery.js and used the following javascript function:
<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
e.preventDefault();
var link = $(this);
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
});
});
});
</script>
The problem is, although this function sends the data to the processing script OK, and changes the link's href attribute in the page without a page refresh (I can see it's doing this OK by copying the link in the browser after a click), it doesn't change the link's text, class or title. So I as it is, I have to refresh the page to see any visual cues that the link has in fact changed (I might as well just use a header redirection in the processor.php page).
How can I modify the function (or change it) so that it also replaces the link's text, class and title? So that (for example, transforming a "like" link):
like
becomes:
unlike
?
You need to change the class and the title then also:
[...]
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
link.toggleClass('do_like do_unlike');
link..attr('title', 'change title here');
});
Use an if condition to check the current state and update the attributes.
$(function () {
$("a.like").click(function (e) {
e.preventDefault();
var link = $(this);
var alreadyLiked = (link.text() == "UnLike") ? true : false;
$.get(link.attr('href'), function (data) {
link.attr('href', data);
if (alreadyLiked) {
link.removeClass("do_unlike").addClass("do_like").text("Like").attr("title", "Click to LIKE this photo");
}
else {
link.removeClass("do_like").addClass("do_unlike").text("UnLike").attr("title", "Click to UN LIKE this photo");
}
alreadyLiked = !alreadyLiked;
});
});
});
This code will work. Tested. Assuming every time the get request gives you the url (for deleting/inserting ) correctly.
This is based on both Shyju's and Pitchinnate's responses (so thanks to both!), and it works a treat using the css rollover link-transformation method (I also included a fade effect):
<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
e.preventDefault();
var link = $(this);
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
link.toggleClass('do_like do_unlike');
var titleState=(link.attr("title") == "Click to LIKE this photo") ? "no" : "yes";
if(titleState=="yes")
{
link.attr('title', 'Click to LIKE this photo');
}
else
{
link.attr('title', 'Click to UNLIKE this photo');
}
});
$(this).parents('div.tools').fadeOut(1000);
$(this).parents('div.tools').fadeIn('slow');
});
});
</script>
I am trying to create an HTML link that changes the PHP session id. Basically I need to call the session_regenerate_id(); when a link is clicked. The problem is that it can't run on the page that I am linking to. There is an upload form that reloads after upload so the function cannot be on the page I am linking to.
Can I do an AJAX post to a separate PHP file?
In your php file called regenerate.php:
<?php session_regenerate_id(); ?>
And then with jquery.
$.POST('url/to/regenerate.php', function() {
// callback
});
Then to run it:
$(function() {
$('#postNew').click(function(e) {
e.preventDefault(); // stops the link from going anywhere
$.POST('url/to/regenerate.php', function() {
// callback
});
});
});
When a link is clicked, I want to clear the php session before redirecting to the destination page.
The way I thought of doing it is by loading a php script that clears the session with ajax in the origin page and once that script has loaded, to redirect to the destination page.
Here is the code I have:
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"");
});
});
<a href="destination.html">
Currently it seems to follow the link before the php script completes loading.
A few guidelines :
You can't make the link point to any other page than "destination.html"
You can't add variables to the destination page either (destination.html?clear)
Use the load callback so you can execute the redirection after you receive a response.
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"",function(){
window.location = $(this).attr("href");
return false;
});
});
});
<a href="destination.html">
Why not just redirect to clearsession.php?link=destination.html, which clears the session and then re-redirects to the desired URL?
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"");
return false;
});
});
With "return false;", the browser won't follow the link.