I have a question. I'm using a Fancybox instance to show categories of tags. In this fancybox, users can edit the categories, delete them or create new ones.
The script that is executed in the fancybox is called with AJAX. That means that a PHP-file (called categories.php) is being executed while the browser doesn't redirect (it stays on tags.php). And here's where the problem kicks in:
I have a form on categories.php. If the user presses submit, then jQuery cancels the default event and send an AJAX request. This AJAX request should be send to this code (e.g. the code in categories.php).
How can I do that?
$(document).ready(function() {
$('form').on('submit', function(event) {
// cancel the default event (i.e. POST the form)
event.preventDefault();
var postData = $(this).serialize();
var postUrl = this.href;
var createCategory = $.ajax({
url: postUrl,
type: 'POST',
data: postData
});
createCategory.done(function(result) {
// code to reload the page
// .replaceWith()?
$('.testdiv').append(result);
console.log('done');
})
});
});
Should the postUrl be $(this).href ? or Should I change that to point to the categories.php?
I think you should try to point at categories.php.
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 am using the plugin formtomail to send emails. The problem that I am experiencing is that I do not want the page to refresh after submitting the form from the template which is called in the action of the form on the primary page. Does someone know how to do this that has worked with this plugin?
I think this might help a little:
first you need to edit the html page that has the form.
then add this script to it and adjust it properly.
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
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 am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});