I have an ajax request on a customer's site on the product page, which, when selecting the available product size, changes the price, but in ajax return instead of just taking the price it takes all the HTML from the page, ie it loads the entire page with the changed price. What I want is to get the price.
I think it's a conflict with the friendly url, I'm not sure, I tried everything, I even tried to pull the data via json but it does not work.
What would be the cause of this problem?
You can only get content from a specific div in Ajax return.
For example, suppose that on the page you are in div with id #preco with value of $ 100 :
<div id="preco">
R$ 100,00
</div
Now you want to get the new value that returns from Ajax and it is returning all the HTML from the page, but you only want the contents of div #preco to refresh on the page it is on. Let's say you return the HTML below in Ajax:
<html>
<head>
</head>
<body>
<h1>Bla Bla</h1>
<div id="preco">R$ 200,00</div>
</body>
</html>
You want to get the value that is in div #preco of HTML ( $ 200.00 ) returned and play in div #preco of current page. For this, you can use the code below in pure JavaScript:
var http = false;
http = new XMLHttpRequest();
var url_="pagina.php";
http.open("GET",url_,true);
http.onreadystatechange=function(){
if(http.readyState==4){
var html = http.responseText;
var html = new DOMParser().parseFromString(html, "text/html");
document.getElementById('preco_original').innerHTML = html.getElementById('preco').innerHTML.trim();
}
}
http.send(null);
Or in jQuery:
$.ajax({
url: 'pagina.php',
dataType: 'html',
success: function(html) {
$("#preco").html($(html).filter('#preco').text().trim());
}
});