I'm trying to populate a Bootstrap select with AJAX.
When I do it for a simple select it works but when I try it for bootstrap selectpicker, it does not work. I have searched and I found that I should refresh my selectpicker but I don't know how I can go about doing that.
$.ajax({
url: "readDistricts?four=" + four + "&sfam=" + sfam,
data: JSON.stringify(four),
data: JSON.stringify(sfam),
dataType: 'json',
contentType: 'application/json',
type: 'POST',
async: true,
success: function(res) {
// alert(res.articles.length);
console.log(res.articles.length);
for (var i = 0; i < res.articles.length; i++) {
// alert(res.articles[i].CNUF_FOURNISSEUR);
// alert(res.articles[i].LIBELLE_ARTICLE);
console.log(" " + res.articles[i].CNUF_FOURNISSEUR);
console.log(" " + res.articles[i].LIBELLE_ARTICLE);
$('#articles').append(
'<option value=' + res.articles[i].CNUF_FOURNISSEUR + '>' + res.articles[i].LIBELLE_ARTICLE + '</option>'
);
}
}
});
And this is my select, it's a struts tag:
<s:select class="form-control selectpicker"
list="sfams" headerKey="0" headerValue="Veuillez selectionner"
listValue="LIBELLE_SFAM" listKey="ID_SFAM" id="sfam" />
After AJAX is done, you need to reload the plugin:
$('#articles').selectpicker('refresh');
or
success: function(data)
{
$("#articles").html(data).selectpicker('refresh');
}
For more info read : https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefresh
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;
}
Below is the ajax code. It sometimes works in chrome and sometimes it doesnt. Any ideas?
$.ajax({
type: "POST",
//prod
url: "b2c_process_function.php",
data: dataString,
timeout: 4000,
complete: function() {
number = (Math.random() + ' ').substring(2,10) + (Math.random() + ' ').substring(2,10);
window.location.href = 'thankyou.php?OID=' + number + '&from=home';
}
});
Chnage data: dataString, to data: {dataString:dataString} as follows:
var dataString = 'test'; // or as you like
$.ajax({
method: "POST",
//prod
url: "b2c_process_function.php",
data: {dataString:dataString},
timeout: 4000,
complete: function(data) { //success
alert(data)
number = (Math.random() + ' ').substring(2,10) + (Math.random() + ' ').substring(2,10);
window.location.href = 'thankyou.php?OID=' + number + '&from=home';
}
});
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
If I Run The Following Code It's Directly Go To Error:Ajax Failed And Error Show on Fire Bug [Reference Error: Ajax Failed is not defined"].
Plz Tell Where I Make Mistake....?
Its My base 64 Encode Value For Name,Email,Gender,Password
var encodeRname = Base64.encode(name);
var encodeRemail = Base64.encode(email);
var encodeRgender = Base64.encode(lookingfor);
var encodeRpwd = Base64.encode(Pword);
var test = '.1!qkr*';
var decodertr = Base64.decode(test);
IT's My AJAX Call For Post
$.ajax({
//https://www.xxxxxxxxx.com/yyyyyyyyy/zzzzzzzzzzzz.svc/InsertRegistrationDetailsoverHTTPS?AuthToken={AUTHTOKEN}&RegName={REGNAME}&selGender={SELGENDER}&UserName={USERNAME}&UserPass={USERPASS}
url: "https://www.XXXXXXX/YYYYYY/ZZZZZZZZ.svc /InsertRegistrationDetailsoverHTTPS?AuthToken=" + decodertr + "&RegName=" + encodeRname + "&selGender=" + encodeRgender + "&UserName=" + encodeRemail + "&UserPass=" + encodeRpwd,
type: "POST",
contentType: "application/javascript",
dataType: "jsonp",
success: function (msg) {
},
error: AjaxFailed
});
function AjaxSucceeded(result) {
alert("success");
}
function AjaxFailed(result) {
alert('Error is : ' + result.status + ' ' + result.statusText);
}
Your error handling function must be defined like the following:
$.ajax({
//https://www.xxxxxxxxx.com/yyyyyyyyy/zzzzzzzzzzzz.svc/InsertRegistrationDetailsoverHTTPS?AuthToken={AUTHTOKEN}&RegName={REGNAME}&selGender={SELGENDER}&UserName={USERNAME}&UserPass={USERPASS}
url: "https://www.XXXXXXX/YYYYYY/ZZZZZZZZ.svc /InsertRegistrationDetailsoverHTTPS?AuthToken=" + decodertr + "&RegName=" + encodeRname + "&selGender=" + encodeRgender + "&UserName=" + encodeRemail + "&UserPass=" + encodeRpwd,
type: "POST",
contentType: "application/javascript",
dataType: "jsonp",
success: function (msg) {
},
error: function (error) {
// your error handling
}
});
I've searched the entire Internet, all of it, and cannot find an answer to this.
I'm using the ColdFusion CFWheels Framework to query a database. The query is done via AJAX like this:
var id = $("#ship-id").val();
$.ajax({
type: "POST",
url: "/my-controller/my-method?format=json",
data: {shipId: id},
dataType: "json",
success: function(response) {
var resultHtml = '';
$.each(response, function(i, value) {
resultHtml += '<tr><td>' + value.FIRSTNAME + ' ' + value.LASTNAME + '</td></tr>';
});
$("#my-table").html(resultHtml);
}
});
I need to paginate that result set. In CFWheels you normally do that by setting the handle, page, perPage and order values in the query like this:
var order = model("order").findAll(
select="id, firstname, lastname, email",
where="orderid IN (#ValueList(orders.id)#)",
handle="ordersQuery",
page=params.page,
perPage=5,
order="lastname"
);
Then you just put this line in your view:
<cfoutput>#paginationLinks(handle="ordersQuery")#</cfoutput>
But... how in the heck can you get pagination to work with an AJAX call?
I think that something along these lines might be your answer (notice I removed the url and added those params to data ...
$.ajax({
type: "POST",
data: {
shipId: id,
controller: myController,
action: myAction,
page: params.page,
},
dataType: "json",
success: function(response) {
var resultHtml = '';
$.each(response, function(i, value) {
resultHtml += '<tr><td>' + value.FIRSTNAME + ' ' + value.LASTNAME + '</td></tr>';
});
$("#my-table").html(resultHtml);
}
});