I'm having a problem getting my query result into a modal.
When I hit a button it should me open a modal with all results, but I get this error:
jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in
My query is working and I can see the result in my console.
$.ajax({
type: "POST",
url: "/miga/db/getFromDatabase.php",
data: {
getAllEventosById: getAllEventosById,
id: id
},
cache: false,
success: function(data) {
console.log(data);
$.each(data, function(key, value) {
var NewRow = '<tr><td id="idEvento">' + value.idEvento + '</td>';
NewRow += '<td id="nome">' + value.nome + '</td>';
NewRow += '<td id="email">' + value.email + '</td>';
NewRow += '<td input type="checkbox" id="presente">Presente</td>';
NewRow += '</tr>';
$(".doCertificado").append(NewRow);
});
$("#eventosDocentesModal").modal('show');
},
error: function(err) {
console.log(err);
}
});
any help?
Thanks
UPDATE
I have used Json.parse(data) and i don't have the error anymore but i have no result in my modal. I'm getting all results in
[{…}, {…}, {…}, {…}, {…}]
How can i receive the string in my modal?
I need to get the name and email into the table
Related
I am trying to load the documents on click of a button which is inside a grid but it is creating a new pages for every row and it is taking more time how to resolve it using kendo editor template or another specific methods.
// open window
function openWin(id) {
var myWindow = $("#" + id);
var did = id.replace("win", "doc");
console.log("Value from DID", did);
var rid = Number(id.replace("win", ""));
kendo.ui.progress($(".k-window"), true);
myWindow.data("kendoWindow").center().open();
$.ajax({
type: "POST",
url: "",
data: JSON.stringify(rid),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function(data) {
kendo.ui.progress($(".k-window"), false);
$("#" + did).data("kendoEditor").value(data);
},
error: function() {
alert("Error occured!!");
}
});
}
// column definition
{
field: "Document",
template: docTemplateFunction,
title: "Document Intake",
width: "250px",
editable: "inline"
}
// template definition
function docTemplateFunction(dataItem) {
var input = '<div id="win' + dataItem.id + '"><textarea id="doc' + dataItem.id + '" style="width:100%;" aria-label="editor"></textarea></div><button class="k-button" onclick="openWin(' + "'win" + dataItem.id + "'" + ')">Open Doc</button><span class="k-button k-state-disabled doc-btn"><i class="red k-icon k-i-close k-state-disabled"></i></span>';
return input;
}
I'm creating a list of clients by ajax(jquery) including 'add client', 'edit client', 'remove client'.
With ajax, I wrote the code to append a new client with $("#list").append(...) to my list as following:
$.ajax({
type: "POST",
url: "traitement.php",
data: {nom, prenom, email},
dataType: "json",
success: function () {
$("#reponse")
.hide()
.html("<span class='sucess'> Client ajouté avec succès. </span>")
.fadeIn(1000);
$("input").val('');
$("#list").append("<tr id='New'><td>" + id + "</td><td>" + nom + "</td><td>" + prenom + "</td><td>" + email + "</td>"+"<td id = 'editNew'><button><i class='fa fa-edit'></i></button></td>"+"<td id = 'deleteNew'><button><i class='fa fa-trash-o'></i></button></td>"+"</tr>");
},
error: function() {
$("#reponse")
.html("<span class='error'> Une erreur s'est produite. </span>");
}
});
Now, i would like to select #editNew or #deleteNew to modify my list of clients without refresh the page.
The problem is that after append "#new" to my HTML by ajax. This element ** is displayed but not yet in the Page Source**. So that, i can not choose it.
Could you please to give me some ideas about how can I append an element and choose this element without refresh the page with ajax, please!
Thanks you so much.
Let try with this code, i hope can help you.
$.ajax({
type : "POST",
url : "traitement.php",
data : {nom, prenom, email},
beforeSend: function() {},
success: function(response) {
$("input").val('');
$("#list").html('');
if (response.notification) {
var list_tr = '';
response.data.forEach(d => {
list_tr += "<tr id='New'><td>" + d.id + "</td><td>" + d.nom + "</td><td>" + d.prenom + "</td><td>" + d.email + "</td>"+"<td id = 'editNew'><button><i class='fa fa-edit'></i></button></td>"+"<td id = 'deleteNew'><button><i class='fa fa-trash-o'></i></button></td>"+"</tr>";
});
} else {
$("#list").html("<tr><td colspan='5'><p></p></td></tr>");
}
$("#list").html(list_tr);
},
complete: function(response) {
if (response.notification) {
$("#reponse")
.html("<span class='sucess'> Client ajouté avec succès. </span>")
.fadeIn(1000);
} else {
$("#reponse")
.html("<span class='danger'> Client ajouté avec fail. </span>")
.fadeIn(1000);
}
},
error: function( jqXHR, textStatus, errorThrown ) {
console.log( 'The following error occured: ' + textStatus, errorThrown );
}
});
i try to make a Facebook Style User search using elastiquent on Laravel 5.5 that autocomplete ad sugest user by typing some char in input field.
The response from Ajax call return correct object but in my js code there is probably somethings wrong.
This the elasticsearch url http://basketmapp.com/users-list?q=Paolo, and in response i can see that item is correctly fetched:
this is the js used for selectize:
$(document).ready(function () {
var topUserSearch = $('.js-user-search');
if (topUserSearch.length) {
topUserSearch.selectize({
persist: false,
maxItems: 2,
valueField: 'name',
labelField: 'name',
searchField: ['name'],
options: [],
render: {
option: function(item, escape) {
return '<div class="inline-items">' +
(item.avatar ? '<div class="author-thumb"><img src="' + escape(item.avatar) + '" alt="avatar"></div>' : '') +
'<div class="notification-event">' +
(item.first_name ? '<span class="h6 notification-friend"></a>' + escape(item.first_name) + '</span>' : '') +
'</div>';
},
item: function(item, escape) {
var label = item.first_name;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
'</div>';
}
},
load: function(query, callback)
{
if (!query.length) return callback();
$.ajax
({
url: '/users-list',
type: 'GET',
dataType: 'json',
data:
{
q: query
},
error: function()
{
callback();
},
success: function(res)
{
callback(res.data);
}
});
}
});
}
});
need your help!
I am getting a syntax error for the square bracket '[' from my JSON file. Given below is the JSON.
[
{
"Product Name":"CPE 10281",
"Application":"Tyres",
"Weight":150,
"Cost to Produce":5000,
"Grade":"A",
"Cost to Sell":40000,
"Strength":100
},
{
"Product Name":"CPE 10282",
"Application":"computers",
"Weight":250,
"Cost to Produce":4000,
"Grade":"H",
"Cost to Sell":25000,
"Strength":90
}
]
I am trying to use AJAX to read my JSON file.
$.ajax({
url: "dataProductJSON.json",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val) {
item.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
I am running my html from Eclipse with Apache Geronimo as the server.
Please Help.
You are missing a { in the below line
success: function (data)
Make it
success: function (data) {
Edit
You are having parsing the data incorrectly , do it as below
$.ajax({
url: "test.html",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val){
$.each(val, function (innerKey, innerValue){
item.push('<li id="' + innerKey + '">' + innerValue + '</li>');
});
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
You need to use 2 loop , one for the array and the other to loop through the object property
I tried things and it is working fine
I have the following ajax as you see below:
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: JSON.stringify(json),
contentType: 'application/json; charset=utf-8',
success: function (Data) {
alert(JSON.stringify(Data));
},
error: error
});
When I do alert(JSON.stringify(Data));
it shows the data that see below. Data is the object I am sending back. It is returing 3 rows with 4 columns. How do I iterate through the data from the stringify as I need to store it into an HTML table?
{"Data":[{"Iden":"12","Date":"01/23/2011","City":"Clearwater","State":"FL"},{"Iden":"19","Date":"02/09/2012","City":"Elgin","State":"IL"},{"Iden":"14","Date":"06/22/2010","City":"Newport Beach","State":"CA"}]}
You want to use the jQuery each function:
$.each( Data, function(index, element){
alert( "Index: " + index + ", Element: " + element );
});
Before passing it to $.each function you have to parse JSON data
var d = JSON.parse(Data);
You can also directly call like this too
$.each( d.Data, function(index, element){
alert( "Index: " + index + ", Element: " + element );
});
For ex if the json is like this
{"note":{"to":"Tove","from":"Jani","heading":"Reminder","body":"Don't forget me this weekend!"}}
$.each( d.note, function(index, element){
alert( "Index: " + index + ", Element: " + element );
});