We Keep Coding

How to replace content with javascript from Ajax response

I wan't to replace a section from div in my index view with new data that I get from partial View. I get a correct responce, which I see in firebug. For now I only display on success an alert window, that says it's working. Bellow is my Ajax code and a part of response which i get(20 list-group items inside an ul). So do I have to write for every div javascript code just like in my view or is there another option? Maybe some examples please?
Regards!
<script>
function testAjax() {
debugger;
$.ajax({
url: "#Url.Content("~/Controller/MyAction")",
data: "searchString=search",
type: "Post",
beforeSend: function () {
//Code for before send whatever you have to do.
},
success: function (data) {
alert("It's Working!");
},
error: function (response) {
//Your code when error ocure
alert(response.responseText);
},
failure: function (response) {
//your code for failure
alert(response.responseText);
}
})
}
</script>
my response:
<ul class="list-group infinite-scroll">
<li class="list-group-item col-md-6">
<div class="noo-event-featured-item grow">
<div class="sc-event-content">
<h3>text</h3>
<div class="bottom">
<div class="create-date">
<span>
date
</span>
</div>
</div>
</div>
<div class="sc-event-item">
<div class="event-thumbnail">
<a href="link" >
<img src="image link">
</a>
<div class="sc-meta">
<span class="sc-date"><i class="fa fa-clock-o"></i><span> text</span></span>
<span class="sc-address">
<i class="fa fa-map-marker" style="padding-left: 3px;"></i>Place<span class="tribe-address">
<span class="tribe-street-address">Street</span><span class="tribe-delimiter"
>, </span>
<span class="tribe-locality">Country</span>
</span>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>

Thank you all, I have figured it out. You have to use a dot before divid $(".divid").replaceWith(data);

If your response its a html code(in plain text) you can try use something like this in your success function:
$('yourDiv').html(data);//replace child nodes

how to show my DIV?

I have a one dropdown menu so when I click on first item, I want to show DIV id=city3. and while I select another item, It will show DIV id=km automatically.
Problem : While I select first item, Div id=city3 is not visible and while I select another item, Div id=km is visible. So I want to show div id=city3 while I select first item.
Here is code.
$("#city_to").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
if(id==1)
{
$("#city3").show();
$(".km").hide();
$(".distance").val('');
$(".allowance1").val('');
$(".hq_allowance1").val('');
$(".exhq_allowance1").val('');
$(".os_allowance1").val('');
$(".total_allowance").val('');
$(".total").val('');
}
else
{
$(".km").show();
$("#city3").hide();
$(".allowance").val('');
$(".hq_allowance").val('');
$(".exhq_allowance").val('');
$(".os_allowance").val('');
$(".total_allowance1").val('');
$(".total").val('');
$.ajax
({
type: "POST",
url: "ajax_pages/km.php",
data: dataString,
cache: false,
success: function(html)
{
$(".km").html(html);
}
});
}
});

See my example so you can understand the working process.
DEMO WORK
<ul>
<li class="abc" data-id="abc1">Home</li>
<li class="abc" data-id="abc2">about</li>
<li class="abc" data-id="abc3">serive</li>
<li class="abc" data-id="abc4">contact</li>
</ul>
<div class="mm" id="abc1">Home worlld</div>
<div class="mm" id="abc2">about worlld</div>
<div class="mm" id="abc3">Service worlld</div>
<div class="mm" id="abc4">Contact worlld</div>
$(document).ready(function(){
$(".mm").hide();
$(".abc").click(function(){
var mm = $(this).data("id");
$(".mm").hide();
$("#"+mm).show();
});
});

How can I update underlying JSViews data from onclick event

I have a photogallery produced from a JSViews template with an upvote and downvote button. The OnClick triggers a database update to increment the underlying score. I also need to increment the Score field in the HTML rendered in the page so that it is consistent with the new values in the database.
The code below is my first attempt, but it doesn't work. How could I achieve this?
<script type="text/x-jsrender" id="gallerycat1">
{{for List}}
<ul>
<li data-type="media" data-url="{{:MainImage}}"></li>
<li data-thumbnail-path="{{:Thumbnail}}"></li>
<li data-thumbnail-text>
<p data-link="Score" class="largeLabel"><span id="span-a-{{:ProfileId}}">{{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
<p class="smallLabel">Click to vote.</p>
</li>
<li data-info="">
<div class="voting-buttons">
<a href="#" data-link="Score" onclick="upVote('<%= userVoted%>',{{:[ImageId]}},1);">
<img width="30" src="/client/images_webdev/buttons/heart.png" alt="Upvote this" />
</a>
<a href="#" data-link="Score" onclick="downVote('<%= userVoted%>',{{:[ImageId]}},0);">
<img data-link="Score" width="30" src="/client/images_webdev/buttons/thumbs.png" alt="Downvote this" />
</a>
</div>
<p class="mediaDescriptionHeader"><span data-link="Score" id="scorem">{^{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
</li>
</ul>
{{/for}}
</script>
Here's the onClick event for voting
function castVote(userVoted, imageId, vote) {
jQuery.ajax({
url: '/client/webservice/voting.asmx/InsertVote',
type: "POST",
data: "{'userVoted':'" + userVoted + "','imageId':" + imageId + ",'vote':" + vote + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (response.d == 'True') {
var counter = jQuery('#scorem').text();
if (vote > 0) {
counter++;
} else {
counter--;
}
jQuery('#scorem').text(counter);
upVoteConfirm();
} else {
downVoteConfirm();
}
}
});

I assume you are using JsViews, not just JsRender. Are you calling the link method, or just the render method? The data-link expressions you have above won't work unless you are actually data-linking using JsViews link method.
If you are data-linking, then you need to call $.observable(listItem).setProperty("Score", listItem.Score+1); - and that will automatically update either data-link expressions like <span data-link="Score"></span> or data-linked tags like {^{:Score}}.
See for example http://www.jsviews.com/#jsvplaying, where there are two samples which have "Change" buttons to modify the name property.

How to insert data in child div?

i met a problem when tried to put some data in my block. I have div structure like this:
<div class="1">
<div class="2">
<div class="3">
<div class="4"></div>
</div>
<div class="5"></div>
</div>
</div>
<div class="1">
<div class="2">
<div class="3">
<div class="4"></div>
</div>
<div class="5"></div>
</div>
</div>
...
and i need to place some data only in<div class="4"></div>
when i use this JS:
function sendDataChild(btn) {
var form = $(btn).closest('FORM[name=answer-form]');
var data = form.serialize();
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: data,
cache: false,
success: function (data) {
form[0].reset();
$("div.4").html(data.error_name);
},
error: function (xhr, str) {
alert('Возникла ошибка: ' + xhr.responseCode);
}
});
return false;
};
it puts data in all div's with class = "4"
I tried to find parent, but it just put data in parent:
$("div.4").parent().html(data.error_name);
Can U advise how to make it right?
P.S
I used numbers just for example.)

As long as your button is under one div.1 you can replace your
$("div.4").html(data.error_name);
with
$(btn).closest("div.1").find("div.4").html(data.error_name);
Edit: Like the comments say you should not start your class names with numbers, but I hope this are just placeholders.

I suggest you identify your div by id and use the append method.

Read XML File with JQuery and Write XML Attributes to Series of HTML Elements on a Webpage

I have an image slider on a page that reads an XML file called "slider.xml" that kinda looks like this:
<slider>
<slide>
<link>http://www.example.com/1</link>
<path>http://image.jpg</path>
</slide>
</slider>
There's multiple "slide" elements but I didn't include them for space reasons. I have some HTML that looks like this:
<body>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</body>
I want to read this XML file and write the "link" attribute to the "div" elements on an HTML page as a title attribute. I want it to look like this:
<body>
<div class="slide" title="http://www.example.com/1"></div>
<div class="slide" title="http://www.example.com/2"></div>
<div class="slide" title="http://www.example.com/3"></div>
<div class="slide" title="http://www.example.com/4"></div>
<div class="slide" title="http://www.example.com/5"></div>
</body>
So far I have tried this but haven't had any luck:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "slider.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('slide').each(function(){
var url = $(this).find('link').text();
$('.slide').attr('title', url);
});
}
});
});
I don't have issues reading the XML file, but run into problems after I parse the XML attributes and attach it to the various divs. Should I create a loop and store the xml attributes in an array? Is there a better way to do this?
Also, I cannot edit the XML or HTML.

All your divs will have the same title since you call $('.slide') which select them all.
This should work:
$(document).ready(function () {
var slide = $('.slide');
$.ajax({
type: "GET",
url: "slider.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('slide').each(function(i){
var url = $(this).find('link').text();
slide.eq(i).attr('title', url);
});
}
});
});