i am using the following ajax script to replace the contents of a div. But it only changes the contents inside that div. I want to replace the entire div.
<script>
function sendmessage()
{
var message_content=$("#message").val();
$.ajax({
type: "POST",
url: "newmessage.php",
dataType: "html",
data: {message:message_content},
success: function(data) {
$("#newmessage").html(data);
}
});
}
</script>
Here contents of id="newmessage" is changed. I want to replace ... with ...
Use replaceWith
<script>
function sendmessage()
{
var message_content=$("#message").val();
$.ajax({
type: "POST",
url: "newmessage.php",
dataType: "html",
data: {message:message_content},
success: function(data) {
$("#newmessage").replaceWith(data);
}
});
}
</script>
Use .replaceWith() :
$("#newmessage").replaceWith(data);
Related
after deleting some data using ajax, i want to refresh my div. I am using Laravel 5.4 . I am a beginner in laravel. Please help me about this.
This is my code in refreshing a div :
var url = window.location.href;
function RefreshDiv() {
$(".uploaded-images").fadeOut();
$(".uploaded-images").load(url+" .uploaded-images", function() {
$(".uploaded-images").fadeIn();
});
}
When i execute the RefreshDiv function , it only makes my div empty, but when i press f5 to refresh my page, it successfully deleted my data. My only problem is my RefreshDiv where i wan't it to refresh my div but it gives me empty div.
Here is my delete function that executes well:
function deleteImage(product_img_id) {
$.ajax({
url: "{{ url('admin/del-img') }}/" +product_img_id,
type: "GET",
dataType: "JSON",
success: function(data) {
RefreshDiv();
}
});
}
here is my div that i want to refresh:
<div class="row" style="margin-top: 20px;">
<h5>Uploaded Images</h5>
<div class="uploaded-images">
</div>
</div>
inside of my uploaded-images div , is a delegate function from my other ajax.
Here is my delegate function :
function getProductDetails(product_id) {
$( ".uploaded-images" ).empty();
$.ajax({
url: "{{ url('admin/get-product') }}/" +product_id,
type: "GET",
dataType: "JSON",
success: function(data) {
for(var i=1;i<data.product_images.length;i++) {
$(".uploaded-images").append('<div class="img-wrap">'+'<span class="close">×</span>'+'<img src="'+"{{ asset('image_files') }}/"+data.product_images[i].product_image+'" data-id="'+data.product_images[i].product_img_id+'" style="max-height:50px; max-width:90px;">'+'</div>');
};
}
});
}
Why you want to refresh the div...If you're removing the image why not just remove the element on success from DOM?
Try this:
function RefreshDiv(product_img_id) {
$("img[data-id="+product_img_id+"]").closest('.img-wrap').remove();
}
Try this:
function deleteImage(product_img_id) {
$.ajax({
url: "{{ url('admin/del-img') }}/" +product_img_id,
type: "GET",
dataType: "JSON",
success: function(data) {
RefreshDiv(product_img_id);
}
});
}
var url = window.location.href;
function RefreshDiv(product_img_id) {
$(".uploaded-images img[data-id="+product_img_id+"]").parent().remove();
$(".uploaded-images").load(url+" .uploaded-images", function() {
$(".uploaded-images").fadeIn();
});
}
I have some XML code I returned. The question is, how do I push it to $("#container").html?
Would I do something like find the ID and push the details (ows_kxoi) to the container?
$(xData.responseXML).find("z:row, ows_ID=1").push($("#container").html)
The returned XML:
<z:row ows_Title='Safeway - 24-7 Nurseline' ows_ID='1'
ows_kxoi='<div class="ExternalClassE873CA13CAC245429C873C746B5A144E">24-7 Nurseline</div><div class="ExternalClassE873CA13CAC245429C873C746B5A144E"><div>866-670-5681 Option 6</div><br></div>' ows_MetaInfo='1;#'
ows__ModerationStatus='0' ows__Level='1'
ows_UniqueId='1;#{7F7F703A-8EAB-4C54-9DB4-7BE5AF1924C1}'
ows_owshiddenversion='6' ows_FSObjType='1;#0'/>
This is what I did:
function getData() {
$.ajax({
url: dataSet.SiteUrl + "/_vti_bin/lists.asmx",
type: "POST",
dataType: "html",
data: soapEnv,
success: function(result){
processResult();
var data = $.parseHTML(result);
$('#container').html($(data).attr('ows_kxoi'));
},
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
}
Here is the JSFiddle demo
This will set the content in the element with id 'container'.
I am trying to post via link. But I think there is a problem. I am not good at Javascript.
I want to send attribute and show with div.
Here is my Code :
<script type="text/javascript">
$(document).ready(function() {
$("#slidingProduct").click(function() {
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
dataType: "POST",
data: {
"number1": aa
},
success: function(json) {
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
You can do something like this:
$(".slpd").on('click',function(){
var aa = $(this).data('urun_id');
var json={"number1":aa};
$.ajax({
url: "data.php",
type: "POST",
dataType:'JSON',
data: JSON.stringify(json),
success: function(result){
$("#result").html(result.number1);
}
});
});
As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and
some modifications in html - It's good to use data-* property of html5:
A
B
O
$(document).ready(function() {
$("a").on('click', function(e) {
e.preventDefault(); // Stop redirection
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
type: "POST"
dataType: "JSON",
data: {
"number1": aa
},
success: function(response) {
$("#result").html(response.number1); // This depends on how you've sent response from server
}
});
});
});
I'm using Jquery V1.11.1 and I want to replace a cell in a HTML table after a Jquery AJAX request. I want the result in the cell.
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});
});
});
When I click on the text in the desired cell, nothing is replaced. How can i fix this?
You need to set the context in ajax call to current object. You can use context option from ajax to do that:
context: this,
Modified ajax call:
$.ajax({
url: "/permissions/update",
type: "POST",
context: this,
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});
Your context has changed. in the 'click' function this referce to the button. But in the callback function the context has changed. You should save the context to a variable first (var self).
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
var self = this;
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
self.html(html);
}
});
});
});
I want to ignore tags like divs and scripts and just get the json texts.
my ajax call doesnt work if i have none json format texts. but i think it would be pointless if you have a page with pure json format only.
My ajax call
$.ajax({
url: "secpage.html",
type: "POST",
dataType: "json",
success: function(data) {
$("#load").html(data);
alert(data);
}
});
My page to be returned
<script></script>
{"msg" : "Hello"}
I want to igonre those script tags and just have the json text. plss help.
maybe something like this?
$.ajax({
url: "secpage.html",
type: "POST",
dataType: "json",
success: function(data) {
var newdata='';
data=data.split('\n');
for (var i in data) {
if (i.charAt(0)=='{'){
newdata+=i + '\n';
}
}
alert(newdata);
}
});