How to set values in multi Select from ajax response? - javascript

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');
}
}
});
}

Related

Sweetalert2 queue modals do action on every confirm button

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++;
});
}
});
}
}
});

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

How to pass param between ajax calls

I am trying to pass param between two different ajax calls, the params only exist inside the ajax scope but not outside of it.
i saw the option of calling from the first ajax success section to another ajax and i don't want this, is their any other way?
my code
jQuery.ajax({
url: '/modules/products/ajax.php',
data: {
prod_id: prod_id,
act: 'get_selected_values_for_sub_cat'
},
type: 'POST',
async: false,
dataType: 'json',
success: function(data) {
var res = JSON.stringify(data);
res = jQuery.parseJSON(res);
var selected_array = [];
jQuery.each(res, function(key1, value1) {
selected_array[key1] = jQuery.parseJSON(value1);
})
}
});
console.info("selected_array", selected_array);
i try this
function ajax_get_selected_values_for_sub_cat() {
return jQuery.ajax({
url: '/modules/products/ajax.php',
data: {
prod_id: 123,
act: 'get_selected_values_for_sub_cat'
},
type: 'POST',
async: false,
dataType: 'json',
success: function(data) {
}
});
}
var re = ajax_get_selected_values_for_sub_cat();
res = JSON.stringify(re);
res = jQuery.parseJSON(res);
var selected_array = [];
jQuery.each(res, function(key1, value1) {
selected_array[key1] = jQuery.parseJSON(value1);
})
console.info("selected_array", selected_array);
what am i missing ?
thanks
ajax function returns an object that implements the promise interface. You can implement it like this:
function ajax_get_selected_values_for_sub_cat(id) {
return jQuery.ajax({
url: '/modules/products/ajax.php',
data: {
prod_id: id,
act: 'get_selected_values_for_sub_cat'
},
type: 'POST',
async: false,
dataType: 'json'
});
}
var promise = ajax_get_selected_values_for_sub_cat(123);
promise.done(function(re){
res = JSON.stringify(re);
res = jQuery.parseJSON(res);
var selected_array = [];
jQuery.each(res, function(key1, value1) {
selected_array[key1] = jQuery.parseJSON(value1);
})
console.info("selected_array", selected_array);
});
http://api.jquery.com/jQuery.ajax/#jqXHR
You can use callback methods as below-
function ajax_get_selected_values_for_sub_cat(successCallback)
{
jQuery.ajax({
url : '/modules/products/ajax.php',
data : {prod_id:123,act:'get_selected_values_for_sub_cat'},
type : 'POST',
async: false,
dataType: 'json',
success:function(data){
successCallback(data);
}
});
}
ajax_get_selected_values_for_sub_cat(function(re){
res =JSON.stringify(re);
res = jQuery.parseJSON(res);
var selected_array =[];
jQuery.each( res, function( key1, value1 ) {
selected_array[key1]=jQuery.parseJSON(value1);
})
console.info("selected_array",selected_array);
});

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