I'm trying to gather information from all of the textareas on my page, and then put that information into an array so I can send to the server via ajax/json.
Although I am not quite sure how to go about doing it.
I'm not sure how to pull the information I need from the
Here is what I have so far:
Example of my HTML
"<textarea id='tbObjective_" + counter + "' name='txtObjective' class='objectives' sequence='" + counter + "'></textarea>"
jQuery:
var objectiveList = [];
$('.objectives').each(function (objective) {
objectiveList.push({
id: objective.id,
sequence: objective.sequence,
text: objective.val()
});
});
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: objectiveList
});
Any help would be appreciated
Thanks
you can proceed with the following procedure. i have used python django and html5 for the purpose
1. make a text box which is hidden and after generating your json document set it in this text box (suppose id of textbox is "submit_json") than use
$("#submit_json").val(JSON.stringify(formData, null, '\t')), // (formData, null, '\t') this is js function that i have written for the ourpose
data = JSON.stringify({"jsonDoc":Generated JSON})
console.log(data);
$.ajax({
url: 'http://127.0.0.1:8000/catchjson/',
type: 'POST',
async: false,
contentType: 'application/json',
data: data,
dataType: 'json',
processData: false,
success: function(data){
alert('Done')
//Goto Next Page
},
error: function(jqXHR, textStatus, errorThrown){
alert("Some Error!")
}
})
Now on server you can catch this json if u have problem creating json from your text box let me know
I often use:
var formData = $("form").serialize();
for posting data over ajax, so maybe you could try:
var textareaData = $(".objectives").serialize();
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: textareaData
});
or alternatively make sure all the fields are in a form element and use the first example.
You can parameterise it with $.param(objectiveList)
see jQuery.param()
Related
I have 2 ajax calls, the second needs the first's result as input. My problem is that I want to call both of them at the same click. And however I tried I can't manage to get the first's result before the second starts.
If I create a second button and manually make the delay everything works. I tried to call a third function with sleep between the two functions but even that didn't work. Any idea would be very helpful, thank you! I bind the two functions two the button's onclick through a third function.
sendSearchToDB = event => {
$.ajax({
url: 'https://localhost:44348/api/user/GetUsers',
type: 'POST',
data: JSON.stringify(this.state.searchExpression),
contentType: 'application/json',
dataType: 'json',
async: false,
success: (data) => {
this.setState({peoples: data})
}});
}
The second ajax:
getBoolArray = event => {
let string = this.props.email
this.state.peoples.forEach(item => {
string = string + "$" + item.id
});
$.ajax({
url: 'https://localhost:44348/api/user/PendingFriendRequest',
type: 'POST',
data: JSON.stringify(string),
contentType: 'application/json',
dataType: 'json',
async: false,
success: (data) => {
this.setState({boolArray: data})
}});
}
Call the second ajax call within the success of the first ajax call. In this way you will get the result of first one and pass it to the second one
Hi guys I need to load data from my database into CKEditor. I searched it allready on google but I could not find recent solutions, and I tried some of them but they did not work. I tried this : var data = CKEDITOR.ajax.load( data.data[0].name );
this is my json
{"result":true,"message":"Post data success","data":[{"url":"sales","naam":"Sales\/B2B","id":"80","koppelid":"80","omschrijving":"
Sales\/B2B<\/p>\r\n"}]}
and here is my AJAX
$(document).on('focusout','#select-afdeling',function(){
$.ajax({
url: 'admin/afdeling/afdeling',
type: 'POST',
dataType: 'json',
data: $(' #select-afdeling').serialize(),
success: function(data){
if (data.result !== true) {
}else{
$("#afdeling-naam").val();
$("#afdeling-naam").attr("value",data.data[0].naam);
$("#afdeling-naam").val();
}
}
});
});
You can use SetData().
Example:
CKEDITOR.instances.editor1.setData('<p>This is the editor data.</p>');
I have many instances of the same type of problem using jQuery. Probably because I am missing some basic knowledge (jQuery newb). In my $.Ajax calls to get data - on the success: I perform many calls to other functions based on the data that gets returned. The calls need to be made in a specific order but this does not seem to happen. If I have a call to another jQuery function that I wrote and then three line later have a call to yet another function (which depends on some events that happen in the first function call) the second call is happening first. Ran this with debugger set many times in two different $.Ajax calls and it happens this way. Am I doing something completely wrong?
BTW - the data is coming in just fine and populating my table and form items. Per request I am posting code below - the comments show that GetInventory needs to execute before BuidlNav
$(document).ready(function () {
$('#searchNow').css('visibility', 'hidden'); //Hide Search Now button
$("#popup").css("display", "none");
$('#submit').prop('disabled', true);
$.ajax({
type: "POST",
url: "mypage.aspx/mywebmethod",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (states) {
var jsonCodes = JSON.parse(states.d);
for (var i in jsonCodes) {
$("#Select0").append(new Option(jsonCodes[i].regionname, jsonCodes[i].region_id));
}
var first = getUrlVars()["region"];
if (first) {
debugger;
$.fn.SetAllSelectors(reg);
$.fn.GetInventory(1, 10, reg, 'rank', 'asc'); //This should happen first
$.fn.BuildNav(); // This depends on GetInventory having been executed already.
}
else {
var myText = 'United States';
$("#Select0 option").filter(function () {
return $(this).text() == myText;
}).first().prop("selected", true);
$.fn.GetChildRegions("Select0");
}
}
});
}
);
If GetInventory and BuildNav also use ajax, you'll need a structure more like this. When making ajax calls, the data is fetched while not holding up the next command line, so chances are your 2nd or 3rd function is being called before the first finishes.
$.ajax({
type: "POST",
url: "mypage.aspx/mywebmethod",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (states) {
getInventoryAndBuildNav(states);
},
...
});
function getInventoryAndBuildNav(states){
$.ajax({
....
url: "mypage.aspx/getinventory",
success: function (inventory) {
$.fn.BuildNav();
},
...
});
}
The best way to accomplish this is to build functions for each item and allow a callback method to be passed.
Think of it this way
$.ajax({
type: "POST",
url: "mypage.aspx/mywebmethod",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (states) {
//This will trigger second since we had to wait for the process to finish
alert('The Ajax call has been made, finished, and the data received');
}
});
//This will trigger FIRST since the ajax call was initiated, but we're still waiting
alert('The Ajax call has been made. We're moving on to the next call.');
when I navigate to
http://localhost:54763/Colorbox/Service.svc/GetCustomers,
I get the json data displayed..
but this on the client side did not generate the json data I need.. why?
$.ajax(
{
type: "POST",
url: "../Service.svc/GetCustomers",
dataType: "json",
data: {},
contentType: "application/json; charset=utf-8",
success: function (json) {
var output = json;
$('#MyTemplateOutput').html(output);
});
}
});
you should try using the full url like so and edit this line:
url: "http://localhost:54763/Colorbox/Service.svc/GetCustomers",
try that and see if you get a response back.
I am trying to do an autocomplete input field. Everytime a user type a letter in that field, the value of the field is sent to the server and the server answer with words that match.
var acOptions = {
source:function (request, response) {
$.ajax({
url: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw",
type: "GET", dataType: "json",
data: { expr: request.term},
success: function (data) {
response($.map(data, function (item) {
return item.value;
}))
}
})
},
minChars: 1,
dataType: 'json'
};
$( "#search_box_input" ).autocomplete(acOptions);
This is an example of data from the server:
[{"value":"Greater"},{"value":"great"},{"value":"greatly"},{"value":"Greater-Axe"}]
The previous code do the right request to the server (and the server answer right) but it does not display anything in the text field.
I tried to do the autocomplete without an explicit ajax object but then I couldn't send the current value of the field (parameter "expr" of the request) to the server:
var acOptions = {
source: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw&expr=",
minChars: 1,
dataType: 'json'
};
$( "#search_box_input" ).autocomplete(acOptions);
Thank you for your help!
You can use jQuery to pull the value of your field to add it to URL parameter string.
var acOptions = {
source: "index.php?option=com_fmw&view=keywords_api&controller=keywords_api&format=raw&expr=" + $('#ID_OF_YOUR_TEXTBOX').val(),
minChars: 1,
dataType: 'json'
};
$( "#search_box_input" ).autocomplete(acOptions);