Show message when Ajax function succeeds - javascript

I would like to display a message when an Ajax function has succeeded but being new to Ajax I am struggling
function save_pos_reasons()
{
$.ajax({
type: "POST",
url: "save_pos_reasons.php",
data: $('#add_positioning').serialize(),
success: function() {
$("#successMessage").show();
}
});
}
<div id="successMessage"> It worked </div>
At the moment this does nothing although the actual function is working

The message div needs to be hidden by default, otherwise .show() will not do anything if it's already visible.
CSS:
#successMessage {
display:none;
}
Or inline:
<div id="successMessage" style="display:none;"> It worked </div>

Try this simple code . Only if the ajax is working the message will be displayed
$.ajax({
type: "POST",
url: "save_pos_reasons.php",
data: $('#add_positioning').serialize(),
success: function() {
$("#successMessage").html("It worked");
}
});
the html
<div id="successMessage"> </div>
Hope this helps. Thank you

Related

Server returns HTML but I cant inject onto site

I am using this ajax call:
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'html',
data: {
action: 'mypages_subscription_slider',
subs: subscriptions,
},
success: function (data) {
build_subscription_slider(subscriptions);
},
});
I check my network tab, and file that I recieve from server has correct content. Like this:
<hr>
<div class="sub-slider">
<div class="slider">
<div class="sub-box"><div class="title">1 GB</div>
</div>
<div class="sub-slider-confirmation-btn-wrp">
<a href="#">
<div class="sub-slider-confirmation-btn">Välj</div>
</a>
</div>
</div>
<hr>
And now I want to use this markup to insert it into a div on my page, like so:
function build_subscription_slider(subscriptions) {
$('.sub-slider-section').append($(subscriptions));
}
On my page the div to get inserted html simply looks like this:
<div class="sub-slider-section">
</div>
what am I doing wrong?
You have two issues above.
In your success callback in your ajax request you want to pass in data to your build_subscription_slider function as below.
success: function (data) {
build_subscription_slider(data);
},
And then you want to append the argument passed in subscriptions.
function build_subscription_slider(subscriptions) {
$('.sub-slider-section').append(subscriptions);
}

How to fix return Ajax in a div without return false

I'm working on a web application, and i have a problem with a return of Ajax.
I can see the result of the return of AJAX, but my problem is that this result appears and then disappears. I found a solution that is return false, the problem being that once the display is done and I return false, my div remains on the page but I can not reuse the button on which I made my onclick (to call my javascript function and so the ajax call).
If someone has a solution.
This is the code :
<input class="Admin-Bouton" type="submit" onclick="affOtp();return false" value="Générer" form="formParametres" />
<div id="syntheseOTP"></div>
function affOtp() {
$(function(){
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
document.getElementById("syntheseOTP").innerHTML = msg;
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
});
};
That happen because the form will be submited and the page refresh, you could avoid that by using type button instead of submit :
<input id="Admin-Bouton" class="Admin-Bouton" type="button" onclick="affOtp();return false" value="Générer" form="formParametres" />
I suggest to attach the event click in the js code instead of inline-event onclick :
$('#Admin-Bouton').on('click', affOtp);
HTML will be like :
<input id="Admin-Bouton" class="Admin-Bouton" type="button" value="Générer" form="formParametres" />
Hope this helps.
Edit: Left out "return" before affOtp();
<input class="Admin-Bouton" type="submit" onclick="return affOtp();" value="Générer" form="formParametres" />
<div id="syntheseOTP"></div>
function affOtp() {
$(function(){
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
document.getElementById("syntheseOTP").innerHTML = msg;
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
});
return false;
};
Since none of the answers are still working for you, I would recommend you to do following changes (keeping in mind you don't want to change type="submit").
<input id="AjaxButton" class="Admin-Bouton" type="submit" value="Générer" form="formParametres" />
<!-- remove onlick attribute and add a Id attribute in above line -->
<div id="syntheseOTP"></div>
Now make sure you add a click event handler in your scripts.
$('#AjaxButton').on('click',affOtp);
function affOtp(e) { // add e as input parameter
// removed unnecessary wrapper
e.preventDefault(); // this will now stop the click event.
$("#syntheseOTP").html("Loading...."); // add loading text into div
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
$("#syntheseOTP").html(msg); //refactored to use jquery syntax
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
};

How to navigate between divs On Success in ajax call

I am working on single page application, I have been navigating between divs, its simple but i wanted to do it with ajax....
I wanted to do something like When "success" function called then it should send/scroll user view to another div..... I already tried the
.animate but failed....
Any kind of help or reference will be appreciated
<div id="SecondInfo"></div>
<script>
$("#btnSubmit").click(function () {
var FirstName = $('#FirstName').val();
$.ajax({
type: "POST",
url: '#Url.Action("Submit", "Home")',
dataType: "JSon",
data: { "FirstName": FirstName},
success: function (data) {
console.log(data);
$("#SecondInfo").animate({ scrollTop: "0px" });
},
error: console.log("it did not work"),
});
});
</script>
use scrollTop() inside animate() and set the offset from element what you want to focused, here part of code .
$('html,body').animate({scrollTop: $('#second').offset().top}, 200, function() {
//next code
});
Demo JsFIddle
Scroll animate
Try .focus()
<script>
$("#btnSubmit").click(function () {
var FirstName = $('#FirstName').val();
$.ajax({
type: "POST",
url: '#Url.Action("Submit", "Home")',
dataType: "JSon",
data: { "FirstName": FirstName},
success: function (data) {
console.log(data);
$("#SecondInfo").focus();
},
error: console.log("it did not work"),
});
});
</script>
Ok let me assume you have 4 divs and each with single input element as below and the first one will have the active class and remaining will be hidden:
<div id="parentStep">
<div id="div1" class="steps active">
<input type="text" id="firstName"/>
</div>
<div id="div2" class="steps">
<input type="text" id="lastName"/>
</div>
<div id="div3" class="steps">
<input type="text" id="contacNum"/>
</div>
<div id="div4" class="steps">
<input type="text" id="addressDetail"/>
</div>
</div>
Now in your ajax on success just try to find the div with active class and hide it and show div which is next to it as below:
$("#btnSubmit").click(function () {
var activeDiv=$("#parentStep").find('.steps .active');//get the active div
var dataToSend=activeDiv.find('input').val();//get the input value of active div
$.ajax({
type: "POST",
url: '#Url.Action("Submit", "Home")',
dataType: "JSon",
data: { "Data": dataToSend},
success: function (data) {
activeDiv.fadeOut("slow").removeClass('active');//remove active from current step
activeDiv.next().fadeIn('fast').addClass('active');//get the next div visible and add active class
},
error: function(data){
console.log("it did not work"),
}
});
});

Trouble getting JQuery AJAX's success event to show a thank you page

I have this code and, if everything is okay, the result should be a thank you page.
Here is the code:
<a class="large red button round" onclick="$.ajax({ type: 'POST', data:$('#newsletter').serialize(), url: 'http://www.stress-free-life.co.il/lists/?p=subscribe& amp;id=1', success: function (msg) { openWin(); $('#Name').val(''); $('#email').val(''); }, failure: function (msg) { alert('Sorry, we were unable to process your subscription.'); } }); return false;" href="javascript; return false;">לחץ כאן</a>
I have tried several options but can't get the thank you page to display.
Um... let's clean this up, onclick handlers are really hard to read and are generally considered bad practice
Your HTML:
<a class="large red button round my-button" href='#'>לחץ כאן</a>
And in a separate JS file you should have:
$(function(){
$('.my-button').on('click', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
data: $('#newsletter').serialize(),
url: 'http://www.stress-free-life.co.il/lists/?p=subscribe&id=1',
success: function(msg){
window.location = "/my-thank-you-page.html";
//openWin(); // No idea what this function is...
//$('#Name').val('');
//$('#email').val('');
},
failure: function(msg){
alert('Sorry, we were unable to process your subscription.');
}
});
});
});
Perhaps something like this...
<a id="ajaxpost" class="large red button round" href="javascript:void(0)">לחץ כאן<a>
<script>
$("#ajaxpost").click(function () {
$.ajax({
type: 'POST',
data: $('#newsletter').serialize(),
url: 'http://www.stress-free-life.co.il/lists/?p=subscribe&id=1',
success: function (msg) {
openWin();
$('#Name').val('');
$('#email').val('');
window.location = "url of thank-you page";
},
failure: function (msg) {
alert('Sorry, we were unable to process your subscription.');
}
});
});
</script>

jquery delaying process based on response

Code below works but what doesn't work properly is delaying process because I don't know how long it is going to take for process.php to response. It always differ. No certain time.
Code below works (apart from faulty delay) like this:
When I click run icon, run icon should disappear and loader icon should appear slowly.
After response coming from process.php, loader icon should disappear slowly and success/fail icon appear slowly. Straight after next (div) should appear slowly if successful.
Thanks
$(document).ready(function()
{
$("#run").click(function(event)
{
$('#run').hide();
$('#loader').fadeIn(1000).delay(1000);
$.ajax(
{
type : 'POST',
url : 'process.php',
data : 'user=jolly',
dataType : 'json',
success : function(response)
{
if(response.status == 'success')
{
$('#loader').delay(1000).fadeOut();
$('#success').delay(4000).fadeIn(1000);
$('#next').delay(4500).fadeIn(1000);
}
else
{
$('#loader').delay(1000).fadeOut();
$('#fail').delay(4000).fadeIn(1000);
$('#next').delay(4500).fadeIn(1000);
}
}
});
});
});
<div id="first">
<img id="run" src="run.png" />
<img id="loader" src="loader.png" style="display:none;" />
<img id="success" src="success.png" style="display:none;" />
<img id="fail" src="fail.png" style="display:none;" />
</div>
<div id="next" style="display:none;">
....
....
</div>
Does it accord with your question?
$('#run').hide();
$('#loader').fadeIn(1000);
$.ajax({
type: 'POST',
url: 'process.php',
data: 'user=jolly',
dataType: 'json',
success: function (response) {
$('#loader').stop(true).fadeOut(function () {
if (response.status == 'success') {
$('#success').fadeIn(1000, function () {
$('#next').fadeIn(1000);
});
} else {
$('#fail').fadeIn(1000);
}
});
}
});
You're doing it wrong? This is not what delay() was intended for, you have callbacks to handle this behavior:
$(function() {
$("#run").on('click', function() {
$(this).hide();
$('#loader').fadeIn(1000);
$.ajax({
type: 'POST',
url: 'process.php',
data: {user: 'jolly'},
dataType: 'json'
}).done(function(data) {
$('#loader').fadeOut(1000, function() {
$('#success').fadeIn(1000, function() {
$('#next').fadeIn(1000);
});
});
}).fail(function() {
$('#loader').fadeOut(1000, function() {
$('#success').fadeIn(1000, function() {
$('#fail').fadeIn(1000);
});
});
});
});
});​
Also, there's no need to check the response.status, jQuery has callbacks available for both.
You could also place the Ajax function in the callback of the initial fadeIn of the loader, but all you're really doing is delaying the data from being showed to the user, and that's always a bad thing.

Categories