Sweetalert2 queue modals do action on every confirm button - javascript

I am using sweetalert2 queue to show all modals after each other. Every modal have a confirm button (some with an action coming from a database). If the user click on the first confirm button, the next modal shows up, and so on. After all modals are displayed the confirm buttons with there actions are saved in database. But is it possible to do an action after every modal is displayed?
Here is my code:
var modals = [];
$.ajax({
type: "POST",
url: "index/popup_notification_collect",
dataType: 'json',
data: {user_id: user_id},
success: function(res) {
if(res.type == 'error'){
//alert(res.message);
}
if(res.type == 'success'){
var arr = [];
//console.log(res.data);
$.each(res.data, function(index, value) {
var obj = JSON.parse(value);
var buttonClass = obj["confirmButtonClass"];
var test2 = buttonClass.split('_');
arr.push({
id: test2[0],
userid: test2[1],
//button: buttonClass,
type: test2[2]
});
console.log(obj);
modals.push(obj);
});
//console.log(modals);
swal.queue(modals).then((result) => {
if (result.value) {
console.log(result);
var m = 0;
$.each(result.value, function(index, value) {
var id = arr[m].id;
var userid = arr[m].userid;
var type = arr[m].type;
console.log(id+'-'+userid+'-'+type);
//Update database if type is received
if(type == 'received') {
$.ajax({
type: "POST",
url: "index/popup_notification_received",
dataType: 'json',
data: {id: id, userid: userid},
success: function(data) {
if(data.type == 'error'){
console.log(data.message);
}
if(data.type == 'success'){
//alert(data.message);
}
}
});
}
//Update database if type is all_round
if(type == 'allround') {
$.ajax({
type: "POST",
url: "index/popup_notification_all_round",
dataType: 'json',
data: {id: id},
success: function(data) {
if(data.type == 'error'){
console.log(data.message);
}
if(data.type == 'success'){
//alert(data.message);
}
}
});
}
m++;
});
}
});
}
}
});

Related

How to set values in multi Select from ajax response?

function getNamefromDb(){
var dataString = "metodo=getNames";
$.ajax({
type : "GET",
url : "NameList.do",
data : dataString,
dataType: "json",
async: false,
contentType: "application/json; charset=utf-8",
success : function(data) {
if (data.success == false) {
swal({
title: data.message,
html: true,
});
console.log("Fail"+data.message);
} else {
console.log("Success");
$.each(JSON.parse(data.message), function(key, value) {
$('#selectBoxId').append($("<option/>", {
value: key,
text: value
}));
});
$("#selectBoxId").multiselect('rebuild');
}
}
});
}
<select id="selectBoxId" multiple="multiple" onclick="javascript:getNamefromDb();">
Here I am receiving the json response from the ajax call. And then I had to set those values to the select box. Is it possible?
But anyhow the function getNamefromDb() is not called. Please tell what's wrong in it.
You can do like this:
let dropdown = document.getElementById('selectBoxId');
if (data.success){
const data = JSON.parse(request.responseText);
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].value;
option.value = data[i].key;
dropdown.add(option);
}}
$('#selectBoxId').change(function() {
var dataString = "{metodo:getNames,value:$(this).val()};
$.ajax({
type: "GET",
url: "NameList.do",
data: dataString,
dataType: "json"
async: false,
success: function(response) {
data = response;
return response;
},
if (data.success == false) {
swal({
title: data.message,
html: true,
});
console.log("Fail" + data.message);
} else {
console.log("Success");
$.each(JSON.parse(data.message), function(key, value) {
$('#selectBoxId').append($("<option/>", {
value: key,
text: value
}));
});
$("#selectBoxId").multiselect('rebuild');
}
}
});
}

I am struggling to pass data to controller through Ajax

Trying to hit DeleteJobQuote controller through Ajax but no luck. Please guide me if anyone has any idea about it. The code seems OK but not able to do so. I am writing this code to delete a particular record from database.
Controller
[HttpPost]
public ActionResult DeleteJobQuote(int jobQuoteid)
{
using (var db = new KeysEntities())
{
var delJob = db.JobQuote.FirstOrDefault(x => x.Id == jobQuoteid);
if (delJob != null)
{
delJob.Status = "Delete";
db.SaveChanges();
return Json(new { success = true, Message = "JobQuote SuccessFully Deleted!" });
}
else
{
return Json(new { success = false, Message = "Delete UnSuccessFul " });
}
}
}
And JavaScript and Knockout code for this
self.deleteJobQuote = function (jobQuote) {
debugger;
$.ajax({
url: '/Companies/Manage/DeleteJobQuote',
type: 'POST',
dataType: 'json',
data: ko.toJSON(this),
contentType: 'application/json',
success: function (result) {
if (result.success) {
$('#jobQuoteDeleteModal').modal('show');
}
else {
alert("You can not delete this record !!");
}
}
});
};
Change "data : ko.toJSON(this)" to "data: JSON.stringify({ jobQuoteid: 1 })". I have hardcoded jobQuoteid value to 1. Get it from jobQoute object.
complete code:
$.ajax({
url: '/Companies/Manage/DeleteJobQuote',
type: 'POST',
dataType: 'json',
data: JSON.stringify({ jobQuoteid: 1 }),
contentType: 'application/json',
success: function (result) {
if (result.success) {
$('#jobQuoteDeleteModal').modal('show');
}
else {
alert("You can not delete this record !!");
}
}
});

Retrieve Unique Column From LocalStorage

I want to retrieve unique column data from the local storage, but i dont know how to do it. I have stored whole data from server in local storage.
Retrived data img
$("#btnlogin").click(function(){
window.e = $("#mob").val();
window.p = $("#key").val();
$.ajax({
url: "URL",
type: "GET",
datatype: "json",
data: { type:'login', phone: e, name: p },
ContentType: "application/json",
success: function(response)
{
alert(JSON.stringify(response));
window.dataToStore = JSON.stringify(response);
window.localStorage.setItem('someData', dataToStore);
},
error: function(err)
{
alert(JSON.stringify(err));
}
})
});
$("#x").click(function()
{
var localData = JSON.parse(localStorage.getItem('someData'));
alert(""+localData);
});
You should iterate the given data and store each value in a single row
Then you will be able to access to each value with the data key.
$("#btnlogin").click(function(){
window.e = $("#mob").val();
window.p = $("#key").val();
$.ajax({
url: "URL",
type: "GET",
datatype: "json",
data: { type:'login', phone: e, name: p },
ContentType: "application/json",
success: function(response)
{
var data = JSON.parse(response);
$.each(data, function(index, val) {
window.localStorage.setItem(index, JSON.stringify(val));
});
},
error: function(err)
{
alert(JSON.stringify(err));
}
})
});
$("#x").click(function()
{
var localData = [];
for (var i = 0; i < localStorage.length; i++) {
var row = JSON.parse(localStorage.getItem(localStorage.key(i)));
localData.push(row);
}
console.log(localData);
});

Looping through two JSON arrays Ajax

I'm trying to get data from a Json file using the id from a previous previous ajax call looping through the the second array based on the id gotten from the first
I have tried
$(document).on('click', '.stories', function(e) {
e.preventDefault();
var request = $.ajax({
url: 'includes/functions.php?job=front_title',
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request.done(function (output) {
if (output.result === 'success') {
var n = output.data[0].title_count;
$('.blog').empty();
for (var i=0; i<n; i++) {
var storytitle = output.data[i].story_view;
var id = output.data[i].titleID;
var request2 = $.ajax({
url: 'includes/functions.php?job=story_episodes',
cache: false,
data: 'id=' + id,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request2.done(function (output2) {
if (output2.result === 'success') {
var n2 = output2.data[0].episode_count;
for (var i=0; i<n2; i++) {
var titles = output2.data[i].title;
console.log(storytitle + " " + titles);
}
}
else {
console.log('faileds');
}
});
}
} else {
console.log('failed');
}
});
});
The storyTitle has a single value and loops through all the titles when i check my console.
I tried debugging and found out the second for-loop was only executed once, after executing request2.done, it goes back to the first for-loop after the first has finish all its loop, it executes the second for-loop.
I don't know where am missing it.I need help with this.
Finally solved the problem...Changed my code to...
$(document).on('click', '.stories', function(e) {
e.preventDefault();
var request = $.ajax({
url: 'includes/functions.php?job=front_title',
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request.done(function (output) {
if (output.result === 'success') {
var n = output.data[0].title_count;
var jsonArray = $(jQuery.parseJSON(JSON.stringify(output.data))).each(function() {
var id = this.titleID;
var CLASS = this.story_view;
var request2 = $.ajax({
url: 'includes/functions.php?job=story_episodes',
cache: false,
data: 'id=' + id,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request2.done(function (output2) {
if (output2.result === 'success') {
var jsonArray2 = $(jQuery.parseJSON(JSON.stringify(output2.data))).each(function() {
var id2 = this.id;
console.log(id + " " + id2);
})
}
})
})
} else {
console.log('failed');
}
});
})
And it worked fine....thanks to Swapnil Godambe

send json into php using jquery

I have a JSON from a PHP file and I want to send that output to another PHP file. This is my JavaScript:
var data_1;
$.ajax({
type:"POST",
url:"sd.php",
success:function(result){
data_1 = result;
test(data_1);
var st = JSON.stringify(data_1);
$.post('get.php',{q:st},function(data){
window.location = "get.php";
});
}
});
And my PHP file to store the JSON:
<?php
$obj = json_decode($_POST['q']);
echo $obj;
?>
But it outputs nothing. What should I do? Please help.
You may try this i wrote for you, but its not tested
/**
* Created by vladimirnikolic on 3/24/14.
*/
$('#submit').click(function(e){
e.preventDefault();
var form_data = $('#your_form').serializeArray();
var submit_data = serializedFormToDTO(form_data);
$.ajax({
url: 'sd.php',
type: 'POST',
dataType: 'json',
data: submit_data
})
.done(function(xhr) {
$.post("get.php", {
q: submit_data
},
function (data) {
// handle data here
// console.log(data);
}, 'json');
}
)
.fail(function(xhr) {
var response_text = $.parseJSON(xhr.responseText)
console.log(response_text);
})
});
function serializedFormToDTO (data, json) {
json = (typeof json !== 'undefined') ? json : false;
if ((json !== true) && (json !== false) ) {
console.log('invalid value of second parameter (should be true/false for json output)');
return false;
}
var result = {};
for (var i = data.length - 1; i >= 0; i--) {
result[data[i].name] = data[i].value;
}
if (json === true) {
result = JSON.stringify(result);
}
return result;
}
$.ajax({
url: 'sd.php',
type: 'POST',
data: JSON.stringify(data_1), // data_1 is a javascript object here
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(returned_data) {
alert(returned_data);
}
});

Categories