I was wondering if this was making an asynchronous request...write now Im using:
<script type='text/javascript'>
$(document).ready(function() {
var ktitle = $('.hiddentwo').text();
$('div#tab2').load('morefour.php?title=' + encodeURIComponent(ktitle));
});
</script>
what Im doing though is adding text in the first, into the database, on the current php file (addtext.php). Im passing the Id of the current document to the morefour.php and that is loading the added text on the second tab...the thing is, Im having to refresh to see the content again. Im running on localhost btw.
For more clarity, Im running another jquery script that on clicks, retrieves this data to send it to a php file to enter into a database
$(".button").click(function() {
var content = $(this).siblings().outerHTML();
$.ajax({
async: false,
type: "POST",
url: "tosqltwo.php",
data: {
content: content
}
});
});
$(function(){ //shorthand of $(document).ready
$('div#tab2').html($.ajax({
type: "GET", //if you are doin $_GET['title'] in morefour.php
url: "morefour.php",
data : {title:ktitle},
dataType: 'html', //i am not sure about this part
async: false
}).responseText)
});
or you can try
$(function(){
$.ajax({
url : 'morefour.php',
data : {title:ktitle},
type:'GET',
dataType:'html',
success: function(data) {
$('div#tab2').html(data);
}
});
});
you can use $.ajax function with async to false.
$.ajax({
async: false,
url : 'morefour.php',
data : 'title=' + encodeURIComponent(ktitle),
success: function(data) {
$('div#tab2').html(data);
}
});
Related
I am using ajax for sending to the server that a checkbox is checked and now other inputs fields need to be required:
EDIT: ok i will change the question to be more clarified.
i have this code:
$(document).ready(function() {
$('#button_ajax').click(function() {
var request = jQuery.ajax({
type: 'get',
url: 'http://orenmizrah.git/nir1.php',
data: {'id1': $('#input_text').val()},
async: true,
success: function(){
console.log("sent");
}
});
});
and now i check that i got the info in $_GET['id1'] with php code and if $_GET['id1'] is set, echo something to the browser.
the problem is that $_GET['id1'] is set but there is no output to the browser.
what i should do?
No output is shown in the browser because nothing is done to show it.
$(document).ready(function() {
$('#button_ajax').click(function() {
var request = jQuery.ajax({
type: 'get',
url: 'http://orenmizrah.git/nir1.php',
data: {'id1': $('#input_text').val()},
async: true,
success: function(data){
console.log(data); // outputs the returned data to the console
}
});
});
I am trying to create a simple shopping cart using AJAX and PHP.
Everything works as it should BUT 1 thing doesn't work all the time and it seems that it fails to execute. (it works 3 times out of 5).
to explain this issue please take a look at the code bellow:
jQuery(document).ready(function() {
//////////////////////LETS RUN OUR ADD TO CART FEATURE USING AJAX //////////////
$(function(){
$('.form1').on('submit', function(e){
$( "#preloader" ).fadeIn( 850 );
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'),// <-- get method of form
url: $(this).attr('action'),
//url: "cart.php",
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
},
success: function(data){
$( "#preloader" ).fadeOut( 850 );
}
});
});
});
//////////////////////LETS RUN LOAD THE cart-header.php ON PAGE LOAD USING AJAX //////////////
$(document).ready(function () {
function load1() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "cart-header.php",
dataType: "html", //expect html to be returned
success: function (data2) {
$('#headerCart').html($(data2));
//setTimeout(load2, 500);
}
});
}
load1();
});
//////////////////////LETS LOAD THE cart-header.php on form1 submit USING AJAX //////////////
<!----- This is the part that SOMETIMES Fails to work --->
$(function(){
$('.form1').on('submit', function(load2){
// prevent native form submission here
load2.preventDefault();
// now do whatever you want here
$.ajax({
type: "GET",// <-- get method of form
url: "cart-header.php",
//url: "cart.php",
dataType: "html", // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
},
success: function(data){
//$('#test').load('cart.php #total').html();
$('#headerCart').html($(data));
}
});
});
});
//////////////////////LETS RUN OUR DELETE FROM CART FEATURE USING AJAX //////////////
$(document).on('submit', '.delForm', function(dleItem){
// prevent native form submission here
dleItem.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'),// <-- get method of form
url: "cart-header.php",
//url: "cart.php",
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
},
success: function(data){
$('#headerCart').html($(data));
}
});
});
});
//////////////////////LETS GET THE QUANTITY OF CURRENT ITEMS ADDED IN THE CART USING AJAX/////////////
$(document).ready(function () {
function load() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "cart.php",
//url: "cart-header.php",
dataType: "html", //expect html to be returned
success: function (data) {
$('.item_count').html($(data).find('#total').text());
//$('#headerCart').html($(data));
setTimeout(load, 1000);
}
});
}
load();
});
I have commented the code so you can see the parts of the code and what they do.
the issue is this part:
//////////////////////LETS LOAD THE cart-header.php on form1 submit USING AJAX //////////////
<!----- This is the part that SOMETIMES Fails to work --->
$(function(){
$('.form1').on('submit', function(load2){
// prevent native form submission here
load2.preventDefault();
// now do whatever you want here
$.ajax({
type: "GET",// <-- get method of form
url: "cart-header.php",
//url: "cart.php",
dataType: "html", // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
},
success: function(data){
//$('#test').load('cart.php #total').html();
$('#headerCart').html($(data));
}
});
});
});
As I mentioned above, this code works fine but it only works when it wants to as if it has mind of its own!
could someone please advise on this issue?
Thanks in advance.
I used Ajax call for display data and update data. Ajax call working well but it's not updating at single time. database updating well in server. For UI part it's not updating.
Used Ajax Call
$('#loginbutt').click(function(){
$.post('data.php',{action: "update"},function(res){
$('#result').html(res);
});
var servertime = $("#timer1").text();
var dataString = 'current_time='+ servertime;
$.ajax({
type: "POST",
url: "inset_intime.php",
data:dataString ,
cache: true,
beforeSend: function(html) {
document.getElementById("lastfive").innerHTML = '';
},
success: function(html){
$("#lastfive").append(html);
}
});
});
it's updating data .php but not updating inset_time.php. data is inserting well inti server. but UI not updating. IN data.php i given insert query for insert data. In inset_time.php i given select query for displaying data. but why it's not at a time when i click on loginbutt.
Try this
$(document).ready(function(){
$('#loginbutt').live('click',function(){
$.post('data.php',{action: "update"},function(res){
$('#result').html(res);
});
var servertime = $("#timer1").text();
var dataString = 'current_time='+ servertime;
$.ajax({
type: "POST",
url: "inset_intime.php",
data:dataString ,
cache: true,
beforeSend: function(html) {
document.getElementById("lastfive").innerHTML = '';
},
success: function(html){
$("#lastfive").append(html);
}
});
});
});
I have a page with 2 divs..each div have to call an ajax function on load. However, after I open either one of the divs, the ajax of the other div will not work.
*#div_remove lets the user delete a user from the system and display the existing ones in another div within #div_remove thru ajax.
#div_logs displays all transactions done in the system and displays them on another div within #div_logs through ajax.*
Here is the jQuery code:
$("#remove_admin").on("click",function(){
$("#light").fadeIn("slow");
$("#div_remove").slideDown("slow");
showtable();
event.preventDefault();
$("#btnRemove").click(function(){
var text = $.ajax ({
type: "GET",
url: "delUserProcess.php?keyword="+$("#txtRemove").val()+"&table=users&field=username",
async: false,
}).responseText;
alert(text);
showtable();
event.preventDefault();
});
});
//VIEW USER LOGS
$("#logs").on("click",function(){
$("#light").fadeIn("slow");
$("#div_logs").slideDown("slow");
showLogs();
event.preventDefault();
});
$("#txtUser").on("keyup",function(){
showLogs();
event.preventDefault();
});
$(".date").on("change",function(){
showLogs();
event.preventDefault();
});
});
function showtable(){
$.ajaxSetup ({
cache: false
});
$.ajax({
type: "GET",
url: "showAdmin.php",
async: false,
success:function(text){
$("#tblUsers").html(text);
}
});
}
function showLogs(){
$.ajaxSetup ({
cache: false
});
var cBy = $("#txtUser").val();
var sDate = $("#startDate").val();
var eDate = $("#endDate").val();
$.ajax({
type: "GET",
url: "showLogs.php?sDate="+sDate+"&eDate="+eDate+"&createdBy="+cBy,
async: false,
success: function(text){
$("#tblHistory").html(text);
}
});
}`
the original code used .click(), .keyup() and .change().. I already tried using .live() and .on() but it is still not working. please help.
You need to bind the events under the showLogs file.
Because whenever you call the delete or other events, it replace the html with the updated one. and the events lots it existance. So you need to call them in the showLogs file.
Ok so I know long hand ajax but trying to use the jQuery short cut. I have two documents
form.php
submit.php
In my "form" page I am calling the "submit" page to process the insert. I am currently using the jquery ajax:
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
})
return false;
});
</script>
When I view firebug it is processing the ajax fine. I am getting 200 and post parameters are set. What I am trying to do is have the ajax return the submit.php file. I know it has something to do with the "success" function but I don't know how to add this. I tried a few things like:
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
success: function(html){
alert(html);
}
})
return false;
});
</script>
and
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
success: function(html){
$('.result').html(data);
}
})
return false;
});
</script>
but neither of these are working. Again I am simply trying to send the ajax request and then return the contents of the submit.php page. Not only does the submit.php page hold the script to process the php/ajax insert but it also display success statements like "insert was successful" so that is why I need to not only run the script in the page but also return the contents of that page. Thank you for any help.
Chagne the dataType:'json' to dataType:'html' for the callback that you wish to display the contents of submit.php.
You were close in your second attempt, but you made a typo. Try:
success: function (data) {
$('.result').html(data);
}
Also, unless your server is returning JSON, you probably want to change the dataType:
dataType: "html"