I don't know if what i'm asking is possible,but of course should match my needs
This is my ajax call
function submitForm1() {
var form1 = document.myform1;
var dataString1 = $(form1).serialize();
$.ajax({
type:'POST',
url:'db_query.php',
cache: false,
data: dataString1,
success: function(data){
$('#query_database').html(data);
}
});
return false;
}
The target div is on another page. So when I submit the form I should be redirected to www.mysite.com/response and then get the ajax request executed in #query_database.
I wanted to add window.location.href = "response.html" but this just redirect me after the call has been executed.
Any way to do that?
Related
I'm trying to reload my comments on a blog post with ajax when the pagination buttons are clicked. The url before the pagination is clicked looks like this
http://localhost/designv2/blog/read/3/lorem-ipsum/1/
If I then click on a page number in the pagination the url's ajax return in the HTML will look like this
http://localhost/designv2/modules/blog_comments.php/1/
So blog_comments.php is the file ajax is calling to get the comments and that is probably why it is set as the url in all returned links.
How do i send the url assigned to href on the link to the page ajax calls for to get the right page number with comments and then set the url to the correct one?
$(".comments__pagination a").on("click", function() {
event.preventDefault(); // Prevent the page from reloading
var blog_id = $(".blog__comment").attr("id");
$.ajax({
url: "modules/blog_comments.php",
type: "post",
data: {
reload_comments: "true",
blog_id: blog_id
},
// On success output the requested site.
success: function (data) {
$(".blog__comment").html(data);
}
});
});
Using JQuery attr function you have to get href attribute
$(".comments__pagination a").on("click", function(event) {
event.preventDefault(); // Prevent the page from reloading
var blog_id = $(".blog__comment").attr("id");
pageurl = $(this).attr("href");
$.ajax({
url: pageurl,
type: "post",
data: {
reload_comments: "true",
blog_id: blog_id
},
// On success output the requested site.
success: function (data) {
$(".blog__comment").html(data);
}
});
});
I have a button in a page. On clicking the button it should go to another page and that page should be viewed. Also I want to pass some values to the second page when the button is clicked and display the passed values in the second page.
I have written a code in ajax but it is not working.
<script>
$(document).ready(function(){
$(".chk").click(function(){
if($('input.checkin:checked').val()){
var apikey = '60CF3C2oh7D+Q+aHDoHt88aEdfdflIjFZdlmsgApfpvg8GXu+W8qr7bKM33cM3';
var password = 'fHdfvxk';
var endpoint = 1;
var method = 'ProcessPayment';
var dataString = 'APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
$.ajax({
type: "POST",
url: "responsive.php",
data: dataString,
cache: false,
success: function(result){
}
});
//window.location.href= 'http://localhost/m/responsive.php';
}
else{
alert("Please Accept the terms and conditions and continue further!!!!");
}
}); });
</script>
I have written a code in ajx when button click, but it will only pass the values to that page. But the page cannot be viewd. Can anyone suggest a solution for this ?
Instead of using ajax you can redirect to the page.
<script>
$(document).ready(function(){
$(".chk").click(function(){
if($('input.checkin:checked').val()){
var apikey = '60CF3C2oh7D+Q+aHDoHt88aEdfdflIjFZdlmsgApfpvg8GXu+W8qr7bKM33cM3';
var password = 'fHdfvxk';
var endpoint = 1;
var method = 'ProcessPayment';
//var dataString = 'APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
// use location href instead of ajax
window.location.href = "responsive.php?APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
}
else{
alert("Please Accept the terms and conditions and continue further!!!!");
}
});
});
</script>
I have this jquery on every page:
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
which fades out a div when the page is fully loaded.
On all pages i have a form and this Jquery code:
<script type="text/javascript">
$(document).ready(function() {
$("#message").hide();
$("#please_wait_box").hide();
$("#reviewtickets").submit(function(e) {
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString = $("#reviewtickets").serialize();
$.ajax({
type: "POST",
url: "reviewtickets_go.php",
cache: false,
data: dataString,
success: function(res) {
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
});
});
});
</script>
so it basically calls another page to submit the form without moving away from the page.
When the forms are submitted, the page is called to save the data in the above jquery code but my jquery load function doesnt fade out because it cannot see that the page has fully loaded
how can i stop the loading function if the form submit code is used?
the div had an id and class both of overlay
the jquery needed to be the class and not the id as the css was on the class
call it inside the success callback of ajax . success function callback is called when the ajax request is successfully made and datas are returned from the server.
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
$('#overlay').fadeOut(); //<---here
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
I want to load evrything in my website inside a div, so i created a function to handle form submissions to make the action loads in the same div, however the problem is some forms don't have action action="" as the script is in the same page, so when i submit the form nothing happen inisde the div, so how i can handle this in my function?
$(document).ready(function() {
$('#mydiv').delegate('form', 'submit', function() { // catch the form's submit events inside the div
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
//$('#mydiv').html(response); // update the DIV
$('#mydiv').fadeOut('slow',function() {
$('#collabsoft').html(response).fadeIn('slow');
});
// return false;
}
});
You can use a ternary if statement:
url: $(this).attr('action') == '' ? window.location : $(this).attr('action')
I have a list in my site, and when I click each of the list items, I want the div next to them to reload with ajax, so as not to reload the whole page.
Here is my javascript
parameters = "category_id="+categoryId;
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);
The ajaxFunction() function is the regular $.ajax() jQuery function, with "POST". In the "changeCategory.php" I call with include another php file.
The problem is that the whole page is reloaded instead of only the div. I want to use this ajax function I have, cause I want to send data to my php file.
Does anyone know what should I do to reload only the div?
Thanks in advance
Try this
$(document).ready(function(){
var parameters = {category_id:categoryId};
$.ajax({
url:'changeCategory.php',
type:'post',
data:parameters,
dataType:'html',
success:function(result){
$("#mydiv").html(result);
},
error:function(){
alert('Error in loading [itemid]...');
}
});
});
Also verify that when in your click event this line is written or not return false; This is required.
Try using load to load the div with the url contents -
$("#mydiv").load("changeCategory.php", {category_id: "category_id_value"} );
You can pass data to the url.
The POST method is used if data is provided as an object; otherwise, GET is assumed.
you could send a query to that PHP so it "understands" that it needs to output only the div, like this:
in your javascript:
//add the query here
parameters = "category_id="+categoryId + "&type=divonly";
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);
in your "changeCategory.php":
//add a query check:
$type = "";
if (isset($_POST['type'])) {
$type = $_POST['type'];
}
//then, depending on the type, output only the div:
if($type === "divonly"){
//output the div only;
} else {
//your normal page
}
$(document).ready(function() {
$.ajax({
url: "right.php",
type: "POST",
data: {},
cache: false,
success: function (response) {
$('#right_description').html(response);
}
});
});
The whole page is reloaded that means there may be an error in your javascript code
check it again
or try this one
function name_of_your_function(id)
{
var html = $.ajax({
type: "GET",
url: "ajax_main_sectors.php",
data: "sec="+id,
async: false
}).responseText;
document.getElementById("your div id").innerHTML=html;
}
you can use get method or post method....