We Keep Coding

Update Shopify cart with ajax without page refresh

I am changing a users Shopify shopping cart with Ajax, the cart is being changed successfully but in order to display the updated cart the user has to refresh the page. I want to display the cart changes WITHOUT a refresh.
I'm using the ajax api just fine, and I can add and remove items with:
Shopify.addItem();
Shopify.removeItem();
Those work great, but they require the user to reload the page to see the new/changed items in their cart. Do you know of a way to display the updated cart WITHOUT a page reload?
So everyone has the complete picture, here is my code:
function poll(products) {
$.ajax({
url: "/apps/proxy",
data: {products: products},
type: "GET",
dataType: "json",
complete: setTimeout(function()
{cartAdd(); poll(products)}, 15000),
success: function(data) {
$.each(data, function(incoming_key, incoming_value){
Shopify.getCart(function(cart){
$.each(cart.items, function(cart_key, cart_value){
if(cart_value.variant_id == incoming_value.id_to_remove){
Shopify.addItem(incoming_value.variant_id, incoming_value.quantity);
Shopify.removeItem(incoming_value.id_to_remove);
console.log("some reason the incoming id is null or maybe not " + incoming_value.variant_id );
}
else if(cart_value.variant_id == incoming_value.variant_id && cart_value.quantity != incoming_value.quantity){
Shopify.changeItem(cart_value.variant_id, incoming_value.quantity);
}
});
});
});
},
});
}

Do an ajax call to the cart page /cart, get the required elements and replace them on the current page.
Add the code for the above after the first $.each function.

you can use the shopify ajax cart, after insert or update call the GET action:
using-ajax-api#get-cart

Call/load Jquery Page

I have a login screen which the user logs in using Jquery and AJAX. That's fine. Now what I want is that if the user logs in correctly, I want to load another page.
I tried using document.location = "home.html"; but that refreshes my page. What I want is like that transition that normally we have when we click on tag like
<a href="SchoolMaterials.html"> <!-- this does not refresh -->
I don't know if I explained myself clearly.
Thanks

It will be better to load the page in your callback function of successful login with:
$("#the_div_container_for_new_page").load("SchoolMaterials.html")
UPDATED:
it is something like this:
$(document).ready() {
function login() {
//post with ajax to login
$.post(......, function(result){
if (result.success) {
// load some page after successful login.
$('#id_of_container_div').load("thepage.html");
return;
} else {
// handle error
}
})
}
}

window.location is just what you need. You can also create an anchor element using jQuery and simulate a click on it :
$("<a href='your url'></a>").click();
But i wouldn't recommend that, it's better to post your data to the server and redirect to the page you want.

page will not refresh after a jQuery post

I have a button call this script, so it does the post in the background, but I need to reload the current page to display an updated php query, I realize there was probably a better way in jquery to the query part, but its crunch time, and all I want to do is get a successful page refresh.
Because the buttons were generated in php, the javascript code is at the end of the body.
I've tried location.href, window.location.reload(true);, document.write which only wrote to the page, document.location.href did nothing.
We are using jQuery/jQuery mobile, I was not on front end dev team, so I'm desperate to get this to work. to clarify, I need a page refresh after the $.post() command, within this code, which does work
<script type="text/javascript">
$('#reserveBook').click(function () {
var isbn = sessionStorage.getItem('isbn');
$.post(
"../inventory/postpage.php",
{ isbn: isbn }
);
});
</script>

There's no point in using AJAX if you need a page refresh regardless. As Dan Bracuk said in his comment, you'd be better off just doing a traditional form submission.
However, if you're set on having the page refresh, just add window.location.reload() in the success handler for your AJAX call:
$.post(
"../inventory/postpage.php",
{ isbn: isbn },
function(response) {
window.location.reload();
}
);

any way to stay in the same location when refreshed

i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>

Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Presuming that you're using Ajax to change your page states, why not look at something like History.js?

JS/AJAX: Refresh part of a page on the click of a button

I'm currently in the midst of creating a generator which echoes a random line from a .txt file. All is well and good however I need to have this certain part of the page which echoes the random line refresh when a button is clicked. I've tried multiple methods to no avail and I'm running out of ideas - I'm still quite new to JavaScript/AJAX and have no idea on how to go about it. Any help would be brilliant, thanks!

Use Jquery Ajax to get contents from the file and display the contents into a div
$.ajax({
type: "GET",
url: "yourfilename.txt"
}).done(function( msg ) {
$("#YOURDIVID").html(msg.d);
});
Bind click event of your button
$(function(){
$("#YOURBUTTONID").on("click",function(){
//do your work
});
});
Refreshing logic can be wrapped into a function and called on click of button OR you can use javascript settimeout method.