I have a problem with my code
There is a code of cycle
var myslides = document.getElementById("slider-list");
for (let i = 0; i < arr.length; i++) {
id[i] = arr[i].id;
pathToStudents[i] = `img/${arr[i].avatar}`;
fio[i] = arr[i].fio;
let slidediv = document.createElement("li");
slidediv.className = "slider-element";
slidediv.innerHTML = `<img src="${pathToStudents[i]}" alt="${fio[i]}"
onClick="OpenCase(${id[i]});">`;
let sliderp = document.createElement("p");
sliderp.className = "pSlides";
sliderp.innerHTML = `${fio[i]}`;
myslides.appendChild(slidediv);
slidediv.appendChild(sliderp);
};
The Dom-elements, which creates are:
<li class="slider-element" style="opacity: 0;"><img src="img/x36.jpg" alt="Oblak Y.B." onclick="OpenCase(36);"><p class="pSlides">Oblak Y.B.</p></li>
<li class="slider-element" style="opacity: 0;"><img src="img/anotertkach.jpg" alt="Tkach I.L." Onclick="OpenCase(37);"><p class="pSlides">Tkach I.L.</p></li>
.... etc.
Function OpenCase has the next form:
function OpenCase(id) {
$.ajax({
type: "post",
dataType: "json",
url: "php/getter.php",
data: {
mode: "spec"
},
success: function (spec) {
$.ajax({
url: "php/getter.php",
type: 'post',
dataType: "json",
data: {
mode: "student",
id: id
},
success: function (result) {
...
Despite the fact that the DOM elements are created with different values of the argument of the function OpenCase, it always produces the same result with the last i = arr.length-1.
If you manually substitute the argument value for the foo function in the DOM element, then it works without problems.
With what it can be connected? Can anybody help?
I will be very grateful for your help!
arr = [{
id: 1,
fio: 1,
avatar: 'x'
}, {
id: 2,
fio: 2,
avatar: 'y'
}]
id = []
fio = []
pathToStudents = []
var myslides = document.getElementById("slider-list");
for (let i = 0; i < arr.length; i++) {
id[i] = arr[i].id;
pathToStudents[i] = `img/${arr[i].avatar}`;
fio[i] = arr[i].fio;
let slidediv = document.createElement("li");
slidediv.className = "slider-element";
slidediv.innerHTML = `<img src="${pathToStudents[i]}" alt="${fio[i]}"
onClick="OpenCase(${id[i]});">`;
let sliderp = document.createElement("p");
sliderp.className = "pSlides";
sliderp.innerHTML = `${fio[i]}`;
myslides.appendChild(slidediv);
slidediv.appendChild(sliderp);
};
function OpenCase(id) {
$.ajax({
type: "post",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/posts",
data: {
mode: "spec"
},
success: function(spec) {
console.log('succ')
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
type: 'post',
dataType: "json",
data: {
mode: "student",
id: id
},
success: function(result) {
console.log(result)
}
})
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider-list"></div>
I retrieve a value in js and i want to insert it in the DB with ajax post. Is it possible to do that without asp:button to bind the value to the code behind?
UPDATE here is the Js:
function readXML() {
var xml = new XMLHttpRequest();
xml.open('GET', 'toXml/file.xml', false);
xml.send();
var xmlData = xml.responseXML;
if (!xmlData) {
xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
}
var itemsID = xmlData.getElementsByTagName("entry");
var itemsTitle = xmlData.getElementsByTagName("entry");
var itemsCustomer = xmlData.getElementsByTagName("d:Customer");
var itemsBrand = xmlData.getElementsByTagName("d:Brand");
var itemsCountries = xmlData.getElementsByTagName("d:Countries");
var itemsElement = xmlData.getElementsByTagName("d:element");
var i, k, j, ID, Title, Customer, Brand, Countries;
var list = [];
for (i = 0; i < itemsTitle.length; i++) {
var Brands = "";
var Country = "";
itemI = itemsID[i];
itemT = itemsTitle[i];
itemCr = itemsCustomer[i];
itemB = itemsBrand[i];
itemCs = itemsCountries[i];
itemEl = itemsElement[k];
ID = itemI.getElementsByTagName("d:Id")[0].firstChild.data;
Title = itemT.getElementsByTagName("d:Title")[0].firstChild.data;
Customer = itemCr.getElementsByTagName("d:element")[0].firstChild.data;
for (k = 0; k < itemB.children.length; k++) {
Brand = itemB.getElementsByTagName("d:element")[k].firstChild.data;
if (k > 1) {
Brands += Brand + ",";
}
else {
Brands = Brand;
}
}
for (j = 0; j < itemCs.children.length; j++) {
Countries = itemCs.getElementsByTagName("d:element")[j].firstChild.data;
if (j > 1) {
Country += Countries + ",";
}
else {
Country = Countries;
}
}
list[i] = [ID, Title, Customer, Brands, Country];
}
var table = $('#table_id').DataTable({
lengthMenu: [[10, 25, 50, 200, -1], [10, 25, 50, 200, "All"]],
data: list,
columns: [
{ title: "ID" },
{ title: "Title" },
{ title: "Customer" },
{ title: "Brands" },
{ title: "Country" },
{ title: "Check", "defaultContent": "<button class=\"checkBtn\" type=\"button\">Check</button>" },
{ title: "Create", "defaultContent": "<button class=\"createBtn\" type=\"button\">Create</button>" }
],
columnDefs: [{
"targets": [0],
"visible": true,
"searchable": true
}]
});
$('#table_id').on('click', '.checkBtn', function () {
var data = table.row($(this).parents('tr')).data();
alert("ID:" + data[0] + "," + "Title:" + data[1] + "," + "Customer:" + data[2] + "," + "Brand:" + data[3] + "," + "Country:" + data[4]);
$.ajax({
type: "POST",
url: "Selida.aspx/InsertData",
data: JSON.stringify(data[0]),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("all good");
},
error: function (errMessage) {
alert("Error:" + errMessage);
}
});
});
}
Through C# im getting data and i save it into an xml file. Then with the js i retrieve that data and with Jquery datatables im displaying on the page.
I Have a method in c# called InsertData which is supposed to insert the data in the DB. I think that the problem is in the ajax call.
The answer is yes, i can post a value from js with an ajax call that has no relation with the server side
$.ajax({
type: "POST",
url: "Selida.aspx/CheckData",
data: JSON.stringify({ trala : data[0] }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("It's already in the DB");
},
error: function (errMessage) {
console.log("Error:" + JSON.stringify(errMessage));
}
});
and the parameter in the c# method must have the name "trala" in order to retrieve the value from the post.
for (a = 1; a <= 2; a++) {
$("#inp-" + a + " .nama").autocomplete({
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
}
i want use loop variable a into autocomplate select function, but i cant get access to call variable in this function
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
can someone help me to solved my problem? i search in other topic maybe this name is asynchronous function.
try using a closure:-
for (a = 1; a <= 2; a++) {
(function(a) {
$("#inp-" + a + " .nama").autocomplete({
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
})(a);
}
There is another way and i feel that would be a better one:
$(".nama").autocomplete({ // <----all the ".nama" element will be initialized
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
// event.target will be the ".nama" element and
// as per your code it seems that the elements are sibling
// elements of the ".nama", so use `.end()` to get back to
// $(event.target)
$(event.target).siblings(".pangkat").val(ui.item.pangkat).end()
.siblings(".nip").val(ui.item.nip).end()
.siblings(".jabatan").val(ui.item.jabatan);
$(event.target).focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
I'm trying to get fullcalendar to render data from my db, when something is dropped. I can see the data is passed correctly by ajax. But when the callback is called, I get the error message Uncaught TypeError: object is not a function.
Below you find my code:
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
var events = [];
for (order in data) {
var allday_data = data[order].allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: data[order].id,
title: [data[order].initials] + [data[order].last_name],
start: data[order].start,
end: data[order].end,
allDay: allday_data,
color: data[order].calendar_color
});
};
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
}
});
}
Anyone any sugestions to solve the error message?
below the results from ajax, to callback
[{"id":"136","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-05 09:00:00","end":"2014-08-05 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"138","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-04 09:00:00","end":"2014-08-04 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"139","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-07 07:30:00","end":"2014-08-07 11:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"142","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 00:00:00","end":"0000-00-00 00:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"143","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 11:30:00","end":"2014-08-06 15:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"155","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-10 09:00:00","end":"2014-08-10 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"170","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-28 10:00:00","end":"2014-08-28 15:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"171","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-26 08:00:00","end":"2014-08-26 12:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"175","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-30 07:00:00","end":"2014-08-30 14:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"183","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-29 07:30:00","end":"2014-08-29 13:00:00","allday":null,"calendar_color":"#00ffff"}]
I tried the solution you described, but I still get the same error message object is not a function. Below you find the compleat JS file. Anyone any other suggestions?
$(document).ready(function() {
function resource_base_url() {
return base_url() + '/resource_controller/';
}
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
firstDay: 1, // Sunday=0, Monday=1, Tuesday=2, etc.
aspectRatio: 2.5,
eventTextColor: 'black',
theme: true, // false, true
handleWindowResize: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
// Determines which icons are displayed in buttons of the header when theming is on.
themeButtonIcons:{ // Check http://api.jqueryui.com/theming/icons/ for avalible icon names
prev: 'ui-icon ui-icon-circle-triangle-w',
next: 'ui-icon ui-icon-circle-triangle-e'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//events: calendar_base_url() + '/events',
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
$.each(data, function(key, val){
var events = [];
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: val.initials + val.last_name,
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
});
}
});
}
});
});
You trying to do the loop trough json Object, try to do this like this with each function.
hope it help's
You must put event in global scope of window like this
<script>
var events = new Array();
</script>
And all your functions in document ready function.
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
$.each(data, function(key, val){
var events = [];
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: val.initials + val.last_name,
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
)}
}
});
}
Here is working example :
var events = new Array();
$(document).ready(function(){
var data = [{"id":"136","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-05 09:00:00","end":"2014-08-05 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"138","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-04 09:00:00","end":"2014-08-04 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"139","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-07 07:30:00","end":"2014-08-07 11:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"142","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 00:00:00","end":"0000-00-00 00:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"143","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 11:30:00","end":"2014-08-06 15:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"155","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-10 09:00:00","end":"2014-08-10 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"170","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-28 10:00:00","end":"2014-08-28 15:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"171","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-26 08:00:00","end":"2014-08-26 12:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"175","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-30 07:00:00","end":"2014-08-30 14:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"183","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-29 07:30:00","end":"2014-08-29 13:00:00","allday":null,"calendar_color":"#00ffff"}];
$.each(data, function(key, val){
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: [val.initials] + [val.last_name],
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
})
console.log(events);
});
Here is the output
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
Object0: ObjectallDay: falsecolor: "#00ffff", end: "2014-08-05 13:00:00", id: "136", start: "2014-08-05 09:00:00", title: "M.H.Tjon-Sien-Fat";
I'm trying to set up a bootstrap typehead.Here is my jquery code
$(function () {
$.ajax({
type: "GET",
url: "http://example.com/search?callback=my_callback",
data: { keyword: 'r' },
jsonpCallback: "my_callback",
dataType: "jsonp",
error: function (xhr, errorType, exception) {
var errorMessage = exception || xhr.statusText;
alert("Excep:: " + exception + "Status:: " + xhr.statusText);
}
});
var sources = [
{ name: "local", type: "localStorage", key: "cities", display: "country" },
{ name: "remote", type: "remote", url: "/cities/list" },
{ name: "data", type: "data", data: [] }
];
$('input.typeahead.local.remote').typeahead({
sources: [
{ name: "local", type: "localStorage", key: "cities" }
]
});
});
function my_callback(data) {
alert(data.count);
var src2 = '[';
var i;
for (i = 0; i < data.count; i++) {
src2 = src2 + "{ id : " + (i + 1) + " , name: '" + data.response[i].name + "' },";
}
src2 = src2.substring(0, src2.length - 1);
src2 = src2 + ']';
var sampleJson = [{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}];
localStorage.setItem("cities", JSON.stringify(src2));
}
In my callback function when i set localStorage using the data returned from jquery ajax call it doesn't work.But when i try to set the data directly using variable sampleJson it works.
Y is it so??
Here is the json dynamically created from response from jquery ajax which looks the same as the sampleJson
[{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}]
And here is sampleJson
var sampleJson = [{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}];
Can you clarify "doesn't work"? Trying to serialize your data to a JSON string by hand is unnecessary and error prone. Manipulate your data as regular javascript objects then use JSON.stringify to convert it to a string when ready. It will produce actual JSON, which, for example, requires all keys to be enclosed within double quotes, whereas your code is generating javascript object literal syntax that permits most keys to be unquoted.