I am attempting the following:
When a user clicks a link, I want to update a specific column of a specific table in the database via ajax. BUT I still want the user to be redirected to the href="<url>" of the link.
I tried jQuery without return false; but then the ajax doesn't work.
I tried with return false; but then the page obviously doesn't redirect to the url as I wanted.
Thanks in advance for your help.
Do your AJAX call, then set document.location when done.
$('a').click(function(e){
var href = this.href; // get href from link
e.preventDefault(); // don't follow the link
$.ajax({
url: '/path/to/site',
data: {some: data},
success: function(){
document.location = href; // redirect browser to link
}
});
});
You need to serialize these actions yourself. In the event handler first run your AJAX request, then lookup the href from the tag and use a location redirect to take the client to that URL.
Put the redirect code in the success callback:
$.ajax({
...
success: function(){
$(location).attr('href',url); // You URL inserted
}
});
Related
If ajax call ok than a href not working or if i stop ajax call than href ok, But i want both work on click
View
Ajax Request
$("body").on("click", ".btnad", function(e){
e.preventDefault();
details_id = $(this).attr('id');
$.ajax({
url: 'assets/php/process.php',
type: 'post',
data: { details_id: details_id },
success:function(response){
data = JSON.parse(response);
$("#getID").text(data.id);
$("#getTitle").text(data.ad_title);
$("#getUser_coin").text(data.user_coin);
}
});
});
If I understand correctly, you want to initiate an AJAX request and follow the link. You can't reliably do both an an asynchronous thing (ie an AJAX request) and still allow the browser to follow a link to a new page.
Instead, you should drop your use of AJAX, and instead allow your browser to perform a normal request to assets/php/process.php, but hae that page redirect the browser to the page you want to show next.
I have this presumably 'simple' task that is absolutely kicking my butt.
My aim is that when a user clicks a link, I prevent the default, run an ajax function on it, then follow that link (ie. resume default). The only thing I can get to work is capturing the href of the link and then following using window.location - this is not ideal, as it doesn't detect whether a user has opted to open in a new window/tab or in the same window/tab; also I think there must be a better way.
However what is happening is that the default is prevented, AJAX function is run but the link is not then followed. What I'm asking is: how to simulated the link click after the function has run?
HTML
This is the link
jQuery
$(document).on('click', 'a', function(e, options){
// setup our options
options = options || {};
// get some details from the link
var this_href = $(this).attr('href');
var this_id = $(this).data('id');
// if options aren't set and this link has a data-id attribute
if(!options.stuff_done && $(this_id).length){
e.preventDefault(); // prevent link following
// run some ajax
$.ajax({
url: myAjax.ajax_url,
type: 'post',
data: {
action : 'a_php_function',
post_id : this_id
},
success: function(response) {
// do stuff
}).then(function(){
$(this).trigger('click', { stuff_done: true });
});
} else {
// else if it doesn't have a data-id, do default
}
});
Context: Checking if a value ('data-id') is in an array using PHP/AJAX and if it is, removing it. This data-id relates to a post's ID in Wordpress, and needs to be removed when a user follows a link to that post.
Hence - user clicks link, data-id is checked, removed/not-removed from array, link is followed.
First give your href an ID like so:
<a href="some_href" data-id="789" id='#some-link'>This is the link</a>
Then simulate a click of it in your ajax success part:
...
success: function(response) {
$('#some-link').click();
})
...
You can examine the response before triggering the click. Also, I don't think you need the .then and all that.
I have two pages (checkout and order page).
The checkout page contains a confirme order button. If the button is clicked the order page loads the data without a page refresh.
How can i do that. Please click me.
You can use an ajax call to get HTML from 'data.php' (or wherever you are getting your data from) and print that HTML into a div in checkout page.
$.ajax({
url: "data.php"
}).complete(function(result) {
$( div ).html(result);
});
Something similar to this.
For more on Ajax - http://api.jquery.com/jquery.ajax/
First take a simple button and call a jquery function onclick-
echo 'Click to change';
Jquery
<script type="text/javascript">
$(function() { // wrap inside the jquery ready() function
//Attach an onclick handler
$('#button').click(function(){
//Get the ID of the button that was clicked on (addition if you want any specific data, just pass that id in place of button)
var specific_id = $(this).attr("id");
$.ajax({
url: "yourPHP_data.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "data=" + specific_id, //The data your sending to yourPHP_data.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
});
</script>
yourPHP_data.php page contain your code that you want to load and display, and you also find that data you have passed-
$data = $_POST['data'];
I'm trying to set the URL to follow the AJAX crawling scheme as described by google: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=174993
As an exampe when a user clicks the Advanced Search menu option the jquery call looks like this:
$('#search_advanced').click(function(e) {
var no_cache = new Date().getTime();
$('#main').load("search_advanced.php?cache=" + no_cache, function () {
$.ajax({ url: "js/search_advanced.js", dataType: "jsonp" });
});
return false;
});
My current URL doesn't change so if the user refreshes the page they get the page they were on prior to the call which in this case would be:
mysite/home.php
I am trying to set the URL to be:
mysite/#!/search=advanced
I need the ability to call these URLs directly and have them generate the correct page.
ANy thoughts?
You're probably looking for addressing.
http://www.asual.com/jquery/address/
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.