Ajax delete div doesnt work - php

I have the following script
$('a[name=deleteButton]').on('click', function () {
arr=[];
var arr = $("input[name='post[]']:checked").map(function() {
return this.value;
}).get();
var content = $(this).parents('tr').find('.key').html();
$(this).parents('tr').fadeOut('slow', function() {$(this).remove();}); //THIS IS THE ONE WHICH FADES THE ROW
makeAjaxCall(content);
return false;
});
function makeAjaxCall(content){
$.ajax({
type: "post",
url: "http://localhost/partner/app/deleteRowUsingApiKey/delete",
cache: false,
data: {id : content},
success: function(data){
// alert(data);
//BUT IM NOT ABLE TO USE IT HERE,IN THE SUCCESS
},
error: function(td){
}
});
}
I have a line $(this).parents('tr').fadeOut('slow', function() {$(this).remove();});
which removes the div.But Im not able to use it inside the success of the ajax.Can anyone tell me why.


Try,
pass the $(this) reference while calling the function,
makeAjaxCall(content,$(this));
receive it like,
function makeAjaxCall(content, _this) {
and in the success call back,
success: function(data){
_this.parents('tr').fadeOut('slow', function() {$(this).remove();});
}

Related

html link value retrieve by Js ajax send to php

I have a html link with a value inside like this.
<a data-toggle='modal' data-id='1' href='#myModal' class='marker' title='Edit'>Link</a>
I have a Js script that trigger a php that I want to send the value data-id
<script>
$(document).on("click", ".marker", function () {
var myBookId = $(this).data('id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg) {
$("#thanks").html(msg)
},
error: function() {
alert("failure");
}
});
});
</script>
And in my php I have this
if (isset($_POST['myBookId'])) {
$emp_id = strip_tags($_POST['myBookId']);
echo $emp_id;
But something is wrong the value is not pass.

Your problem is on the params of the AJAX call. Try this way:
data: { myBookId: myBookId },

try
$('.marker')click(function(){
var myBookId = $().attr('data-id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg){
$("#thanks").html(msg)
},
error: function(){
alert("failure");
}
});
return false;
});

Form Submition Ajax call in jquery mobile

I want to submit form throught ajax call in jquery mobile.
My script is that
<script>
function confirm(){
var user_name = $('#login_form').find('input[name="user_name"]').val();
$.ajax({
type: "POST",
url: $('#login_form').find('input[name="action"]').val(),
data: "val=" + user_name,
success: function(data){
alert(data);
}
});
}
</script>
My Form is here....
Name
Email
Password
Please it is urgent..........

function confirm(){
var frm = $('#login_form');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
error: function(xhr,err){
alert(err);
}
});
return false;
});
}
You can use this function to post your data...

You can try this function also...
$("#login_form").submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $("#login_form").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
error:function(xhr,err){
alert(err);
}
});
return false; // avoid to execute the actual submit of the form.
});

AJAX loading message

I want to display a loading message while retrieving results via AJAX, but I can't. Can anybody help please?
<script type="text/javascript">
$(function() {
$(".search_button").click(function() {
// getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = 'search='+ searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>

I would change the message before firing the AJAX request. So, on click or on submit:
<script>
$('form').on('submit', function(e) {
e.preventDefault();
$('#response').html('<p>Loading…</p>');
$.post($(this).attr('action'), $(this).serialize(), function(response) {
// do something here with the response
$('#response').html('<p>Request successful.</p>');
});
});
</script>

Why not using beforeSend and success methods to show/hide a loading message
beforeSend: function(html) { // this happens before actual call
// DO SOMEHTING HERE TO SHOW YOUR LOADING MESSAGE AS $('#loading').show();
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
// DO SOMEHTING HERE TO HIDE YOUR LOADING MESSAGE AS $('#loading').hide();
$("#results").show();
$("#results").append(html);
}
rgds

How to write if else statement AJAX POST JQuery

Im trying to use if else statement in success ajax function, but the value always false and data inserted
I use jQuery v1.7.1, here my code
// Contact Submiting form
function Contact_form(form, options){
$.ajax({
url: 'contact.php',
data: $('#contactform').serialize(),
success: function(data){
if(data.check == '1'){ // if Ajax respone data.check =1 or Complete
$('.notifications').slideDown(function(){
setTimeout("$('.notifications').slideUp();",7000);
}); // Show notifications box
$('#contactform').get(0).reset(); // reset form
}
else if(data.check == '0'){
$('#preloader').fadeOut(400,function(){ $(this).remove(); });
alert("No complete");
return false;
}
},
cache: false,type: 'POST',dataType: 'json'
});
}

if else is bad in success function use
function Contact_form(form, options){
$.ajax({
url: 'contact.php',
data: $('#contactform').serialize(),
success: function(data){
$('.notifications').slideDown(function(){
setTimeout("$('.notifications').slideUp();",7000);
}); // Show notifications box
$('#contactform').get(0).reset(); // reset form
unloading(); // remove loading
},
error: function(data){
$('#preloader').fadeOut(400,function(){ $(this).remove(); });
alert("No complete");
return false;
},
cache: false,type: 'POST',dataType: 'json'
});
}

Can you try to use data.result in logic statement

Form submitted, response via ajax

Currently I have this, which works nicely - it's an email signup list which returns a successful response or error, as appropriate.
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.fadeIn(500, function() {
$('#display_block').html(response)
});
}
});
return false;
});
The form is in a div with ID "emailform" and the "display_block" is the response. What I need is for the response to automatically disappear after a short time and for the form to fade back in. I've tried a few things but nothing that has worked yet.
Any help on what to add to the above code would be appreciated.

Assuming your initial html is like,
<div id="emailform">
<form>
...
</form>
</div>
you can proceed like this,
.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backupHtml = $('#emailform').html();
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response)
.fadeIn(500, function() {
$(this).fadeOut(5000,function(){
$('#emailform').html(backupHtml);
});
});
}
});

There is nothing inside display_block when you fade it in. Its just empty, I changed the code:
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response) // New line!
.fadeIn(500,function (){ // After we finsish the fadeIn
$('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in
});​
}
});
return false;
});
I created a JSFiddle for you http://jsfiddle.net/XHkWr/1/

To do instead of all mumbo jumbo.
$('#emailform').html("<div id='display_block'></div>");
$('#display_block').hide().html(response).stop().fadeIn(500);

I would say, that this would be a correct solution:
$.ajax({
url: 'mailing_list/mailing_list_add2.php',
type: 'post',
data: dataString,
success: function(data, textStatus, jqXHR) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
},
error: function(jqXHR, textStatus, errorThrown) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
}
});
Result here: http://jsfiddle.net/p9URt/2/

Categories