I'm building a tagger. After a user submits a tag, ajax returns:
{"returnmessage":"The Ajax operation was successful.","tagsinserted":"BLAH, BLOOOW","returncode":"0"}
I want to take the tagsinserted and loop through it, and during each loop take the item in the list and insert it on the HTML page. suggestion on how to do this right?
Here is the current code:
$("#tag-post").click(function(){
// Post $('#tag-input').val()
$.ajax({
url: '/tags/ajax/post-tag/',
data: { newtaginput : $('#tag-input').val(), userid : $('#userid').val()},
success: function(data) {
// After posting
alert('done');
}
});
});
You can do something like this:
$("#tag-post").click(function(){
$.ajax({
url: '/tags/ajax/post-tag/',
data: {newtaginput : $('#tag-input').val(), userid : $('#userid').val()},
success: function(data) {
$.each(data.tagsinserted.split(', '), function(i, v) {
$("<div></div>").text(v).appendTo("#tagHolder");
});
}
});
});
You can loop through the tags by calling data.tags.split(',') and looping through the array it returns.
You can insert tags to the page by calling $('<li />').text(tag).appendTo('someSelector').
Related
I am new to jQuery and I am trying to iterate through a list of strings after making an ajax call to a controller. In this controller, I am returning a list of strings and I want to iterate over this list in jquery and present it to the screen. Here is my code.
This is my controller
[HttpPost]
public ActionResult GetComments() {
var cmts = ex.GetComments(psts, psons);
var lstCmt = ex.GetCommentsList(cments, psons);
return Json(lstCmt);
}
This is my view:
<div>
<button id="ldBtn" class="btn btn-primary">Load</button>
</div>
<div id="cments">
</div>
<script src="~/Scripts/jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
$("#ldBtn").on('click', function(evt) {
$("#cments").empty();
$.ajax({
type: "POST",
dataType: "html",
url: '#Url.Action("GetComments")',
data: {},
success: function(lists) {
//Something needs to be fixed here
$.each(lists, function(i, name) {
$('#comments').append('<p>' + name.Value + '</p>');
});
}
});
});
});
</script>
When I return the list, I am getting a huge string. How do I fix this?
Thanks in Advance
There's a couple of issues in your JS code. Firstly you're telling jQuery to expect a HTML response in the dataType setting. This is why you see the response as a string. This should be changed to JSON instead, that way jQuery will deserialise the response for you.
Secondly you're attempting to concatenate a Value property on each item in the list, yet they are strings (as you state you're returning a List<string> from your action), and will not have that property. You can simply append the name itself. Try this:
$("#ldBtn").on('click', function(evt) {
$("#cments").empty();
$.ajax({
url: '#Url.Action("GetComments")',
type: "POST",
dataType: 'json',
success: function(comments) {
$('#cments').append('<p>' + comments.join('</p><p>') + '</p>');
}
});
});
I assume the #comments/#cments discrepancy is only due to amending parts of your code when creating the question.
Also note that I simplified the append() logic so that it appends all comments in a single call, which should be slightly faster.
I append a value from my .js file like so
elemscore.append("You Scored: " + score);
I then need to access database records based on the score. How can I achieve this after the append
You can perform an ajax request something like this.
var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&
$.ajax({
type:"POST",
url: url
data: {postVar1:"value",postVar2:"second value"},
success: function(result){
// either do something with whats returned or call another jquery function
console.log(result);
},
error: function(){
// error reporting/handling
}
});
I'm currently working on a project using Laravel platform.
I'm trying to delete data from a model asynchronously using ajax. And when all is done my data should be removed from the table. My code runs perfectly, data are being removed from my database , yet "tr" elements arent really faded or removed. Here is my code :
ajax sucess not really working.
$(document).on('click', '.btn-remove-interview' , function() {
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(this).parents("tr").remove();
}
});
});
Use
$(this).closest('tr').remove();
Instead of
$(this).parents("tr").remove();
The problem is that the success function callback within your ajax request no long refers to the button when you use this. You need to get an explicit variable to the button if you want to use it.
$(document).on('click', '.btn-remove-interview' , function() {
// Get this button as a variable so we can use it later
var el = $(this);
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(el).parents("tr").remove();
}
});
});
Solution was by removing dataType json . My function doesnt return any data .
Today I have a problem sending id with ajax and jquery ,I have a foreach in the view of laravel like this ,
<div class="ident" id="auctionIdentifier-{{$i}}" auction="{{$auction->id}}"></div>
this in the elements recieve correctly the id of auctions but when I try to doing a click I only send the first id.
I don't know when I doing a click in the next bid , I don't send the id corresponding.
id}}">
$(".inscription").click(function(){
console.log($(".ident").attr('auction'));
$.ajax({
url:'../bid/inscription',
dataType:'json',
type:'get',
cache:true,
success: function (response) {
console.log("ok");
},
});
});
Maybe this helps:
$(".ident").click(function(){
var id = $(this).attr('auction');
$.ajax({
url:'../bid/inscription',
dataType:'json',
type:'get',
cache:true,
data: {
id: id
},
success: function (response) {
console.log("ok");
},
});
});
Basically you need to get the currently clicked element auction attribute. Also you might want to add data- in front of it like so: data-auction="VALUE". This way you can get it with $(el).data('auction').
I am making a webapp with Jquery Mobile. I got my data back from a webservice function.
Now to get this data in my web page I am using a ajax call.
$('[data-role=page]').live('pageshow', function () {
var userId = $("#userId").val();
$.ajax({
url: "~SYSTEM.URL~~CAMPAIGN.URL~/SelligentMobile/Webservice/WebService.asmx/getNieuwtjes",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{'userId':'" + userId + "'}",
success: function (response) {
var nieuwtjes = response.d;
if (nieuwtjes.length > 0) {
$.each(nieuwtjes, function (i, entity) {
$('#nieuwtjesList').append(
//Here come's the data from web function
});
}
}
});
});
Now in #nieuwtjesList should come all the data that I get back from the server. These data is a newsTopic. And it should show it like this.
<li>~ITEM.ONDERWERP~ </li>
My question is, how can I create the line above for every record I got back from my webservice function.
Kind Regards.
Stef
You can use this code to create the HTML to append for each line
$("<li/>").append($("<a/>")
.attr("href", <HREF FROM YOUR DATA>)
.text(<TEXT FROM YOUR DATA>)
);
You can use jQuery.tmpl to easily implement this.
var nieuwtjes = response.d;
if (nieuwtjes.length > 0) {
var html ='';
$.each(nieuwtjes, function (i, entity) {
html += '<li>'+ i.ONODERWERP+'</li>';
});
$('#nieuwtjesList').append($(html));
}