Issue with ajax update url
I'm working on a drawer cart populated via ajax for a shopify site. There's also a quantity field with plus and minus buttons within this cart.
This is the code for the plus button:
// This button will increment the value
$('.ajax-cart-form').on("click",'.qtyplus.qtyplus-2', function(){
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[id='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
var currentVal2 = parseInt($('input[id='+fieldName+']').val());
var currentProd = $('input[id='+fieldName+']').attr('id');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { currentProd : currentVal2 }},
dataType: 'json',
success: function() {
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: function() {
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
$('.drawer-subtotal').remove();
$('.ajax-subtotal').css('display','none');
$(function(index, cartItem) {
var line2= index +1;
var cents2 = "";
if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
$('.ajax-subtotal2').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
});
$('#item_count').text(currentVal2);
});
}
});
}
});
});
As you can see I'm getting the value of the quantity field to update the quantity in the ajax post request via the variable currentVal2. This works fine. I'm also getting the product ID via the id of the input field.
I've tried
alert(currentProd);
and this outputs the ID correctly. However, when I'm trying to use this variable in the update function like this
data: { updates: { currentProd : currentVal2 }},
I'm getting the error that update.js is not found so I'm assuming it's not pulling in the Product ID correctly.
If instead I try
data: { updates: { 35450129542: currentVal2 }},
so input the product ID directly it works.
Any ideas how to fix this?
javascript ajax
add a comment |
I'm working on a drawer cart populated via ajax for a shopify site. There's also a quantity field with plus and minus buttons within this cart.
This is the code for the plus button:
// This button will increment the value
$('.ajax-cart-form').on("click",'.qtyplus.qtyplus-2', function(){
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[id='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
var currentVal2 = parseInt($('input[id='+fieldName+']').val());
var currentProd = $('input[id='+fieldName+']').attr('id');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { currentProd : currentVal2 }},
dataType: 'json',
success: function() {
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: function() {
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
$('.drawer-subtotal').remove();
$('.ajax-subtotal').css('display','none');
$(function(index, cartItem) {
var line2= index +1;
var cents2 = "";
if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
$('.ajax-subtotal2').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
});
$('#item_count').text(currentVal2);
});
}
});
}
});
});
As you can see I'm getting the value of the quantity field to update the quantity in the ajax post request via the variable currentVal2. This works fine. I'm also getting the product ID via the id of the input field.
I've tried
alert(currentProd);
and this outputs the ID correctly. However, when I'm trying to use this variable in the update function like this
data: { updates: { currentProd : currentVal2 }},
I'm getting the error that update.js is not found so I'm assuming it's not pulling in the Product ID correctly.
If instead I try
data: { updates: { 35450129542: currentVal2 }},
so input the product ID directly it works.
Any ideas how to fix this?
javascript ajax
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
if you are trying to use a dynamic property name (currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example:var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters:... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
I'm just saying if you do this:{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to{ "currentProd" : currentVal2 }
. (take note of the quotes)
– ippi
Nov 26 '18 at 12:29
1
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31
add a comment |
I'm working on a drawer cart populated via ajax for a shopify site. There's also a quantity field with plus and minus buttons within this cart.
This is the code for the plus button:
// This button will increment the value
$('.ajax-cart-form').on("click",'.qtyplus.qtyplus-2', function(){
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[id='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
var currentVal2 = parseInt($('input[id='+fieldName+']').val());
var currentProd = $('input[id='+fieldName+']').attr('id');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { currentProd : currentVal2 }},
dataType: 'json',
success: function() {
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: function() {
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
$('.drawer-subtotal').remove();
$('.ajax-subtotal').css('display','none');
$(function(index, cartItem) {
var line2= index +1;
var cents2 = "";
if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
$('.ajax-subtotal2').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
});
$('#item_count').text(currentVal2);
});
}
});
}
});
});
As you can see I'm getting the value of the quantity field to update the quantity in the ajax post request via the variable currentVal2. This works fine. I'm also getting the product ID via the id of the input field.
I've tried
alert(currentProd);
and this outputs the ID correctly. However, when I'm trying to use this variable in the update function like this
data: { updates: { currentProd : currentVal2 }},
I'm getting the error that update.js is not found so I'm assuming it's not pulling in the Product ID correctly.
If instead I try
data: { updates: { 35450129542: currentVal2 }},
so input the product ID directly it works.
Any ideas how to fix this?
javascript ajax
I'm working on a drawer cart populated via ajax for a shopify site. There's also a quantity field with plus and minus buttons within this cart.
This is the code for the plus button:
// This button will increment the value
$('.ajax-cart-form').on("click",'.qtyplus.qtyplus-2', function(){
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[id='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
var currentVal2 = parseInt($('input[id='+fieldName+']').val());
var currentProd = $('input[id='+fieldName+']').attr('id');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { currentProd : currentVal2 }},
dataType: 'json',
success: function() {
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: function() {
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
$('.drawer-subtotal').remove();
$('.ajax-subtotal').css('display','none');
$(function(index, cartItem) {
var line2= index +1;
var cents2 = "";
if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
$('.ajax-subtotal2').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
});
$('#item_count').text(currentVal2);
});
}
});
}
});
});
As you can see I'm getting the value of the quantity field to update the quantity in the ajax post request via the variable currentVal2. This works fine. I'm also getting the product ID via the id of the input field.
I've tried
alert(currentProd);
and this outputs the ID correctly. However, when I'm trying to use this variable in the update function like this
data: { updates: { currentProd : currentVal2 }},
I'm getting the error that update.js is not found so I'm assuming it's not pulling in the Product ID correctly.
If instead I try
data: { updates: { 35450129542: currentVal2 }},
so input the product ID directly it works.
Any ideas how to fix this?
javascript ajax
javascript ajax
edited Nov 26 '18 at 12:15
MariaL
asked Nov 26 '18 at 12:06
MariaLMariaL
355325
355325
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
if you are trying to use a dynamic property name (currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example:var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters:... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
I'm just saying if you do this:{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to{ "currentProd" : currentVal2 }
. (take note of the quotes)
– ippi
Nov 26 '18 at 12:29
1
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31
add a comment |
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
if you are trying to use a dynamic property name (currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example:var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters:... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
I'm just saying if you do this:{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to{ "currentProd" : currentVal2 }
. (take note of the quotes)
– ippi
Nov 26 '18 at 12:29
1
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
if you are trying to use a dynamic property name (
currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example: var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters: ... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
if you are trying to use a dynamic property name (
currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example: var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters: ... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
I'm just saying if you do this:
{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to { "currentProd" : currentVal2 }
. (take note of the quotes)– ippi
Nov 26 '18 at 12:29
I'm just saying if you do this:
{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to { "currentProd" : currentVal2 }
. (take note of the quotes)– ippi
Nov 26 '18 at 12:29
1
1
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480772%2fissue-with-ajax-update-url%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480772%2fissue-with-ajax-update-url%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi Marial, Looks like the location of update.js file is not correct. url: '/cart/update.js', how about try with absolute url and see if that works.
– Santosh Sapkota
Nov 26 '18 at 12:10
if you are trying to use a dynamic property name (
currentProd
) then you cannot set the parameter inline. Instead use bracket notation. For example:var myData = { updates : {} }; myData.updates[currentProd] = currentVal2;
and later in the $.ajax-parameters:... url: '/cart/update.js', data: myData, dataType: 'json', ...
– ippi
Nov 26 '18 at 12:24
I'm just saying if you do this:
{ currentProd : currentVal2 }
then currentProd will always be interpreted as a property name (string), identical to{ "currentProd" : currentVal2 }
. (take note of the quotes)– ippi
Nov 26 '18 at 12:29
1
@ippi thanks! got it working like this data: { updates: { [currentProd] : currentVal2 }}
– MariaL
Nov 26 '18 at 12:30
Oh cool. Now I learned something as well.
– ippi
Nov 26 '18 at 12:31