Display response description from shopify api (cart/add.js) - javascript

I'm trying to show an alert every time customer is trying to add variant quantity that is bigger than available quantity. When that's happens I see 422 response from add.js -
{status: 422, message: "Cart Error",…}
description: "All 1 Black Basic High Waisted Briefs - black / 1 are in your cart."
message: "Cart Error"
status: 422
I need to display the description for customers, how that is possible?
Here is my code -
var shopifyAjaxAddURL = '/cart/add.js';
var shopifyAjaxCartURL = '/cart.js';
var shopifyAjaxStorePageURL = '/search';
$(document).on('submit', 'form[action="/cart/add"]:not(.noAJAX, .feedback-go_to_cart)', function(e) {
var $form = $(this);
//Add to cart
$.post(shopifyAjaxAddURL, $form.serialize(), function(itemData) {
//Enable add button
$btn.html(theme.icons.tick + ' ' + {{ 'products.product.added_to_cart' | t | json }});
setTimeout(function(){
//Not added, show message
if(typeof(data) != 'undefined' && typeof(data.status) != 'undefined') {
var jsonRes = $.parseJSON(data.responseText);
window.showQuickPopup(jsonRes.description, $btn);
} else {
//Some unknown error? Disable ajax and submit the old-fashioned way.
$form.addClass('noAJAX');
$form.submit();
}
});

Your code seems bit buggy. Possible solution could be, check if the status is 422 and send the customer an alert message.
if( itemData.status === 422 ) { alert('Quantity not available in the inventory') }
Full code might look like:
var shopifyAjaxAddURL = '/cart/add.js';
var shopifyAjaxCartURL = '/cart.js';
var shopifyAjaxStorePageURL = '/search';
$(document).on('submit', 'form[action="/cart/add"]:not(.noAJAX, .feedback-go_to_cart)', function (e) {
var $form = $(this);
//Add to cart
$.post(shopifyAjaxAddURL, $form.serialize(), function (itemData) {
if( itemData.status === 422 ) { alert('Quantity not available in the inventory') }
else {
//Enable add button
$btn.html(theme.icons.tick + ' ' + {{ 'products.product.added_to_cart' | t | json }});
setTimeout(function () {
//Not added, show message
if (typeof (data) != 'undefined' && typeof (data.status) != 'undefined') {
var jsonRes = $.parseJSON(data.responseText);
window.showQuickPopup(jsonRes.description, $btn);
} else {
//Some unknown error? Disable ajax and submit the old-fashioned way.
$form.addClass('noAJAX');
$form.submit();
}
}
});

Related

Trigger web socket onmessage event manually

I have a small shoutbox chat written with PHP and Ratchet.
In JS, I have the following event, which fires a regular js function which happens on pressing enter at the moment:
socket.onmessage = function(evt) {
var data = JSON.parse(evt.data);
addMessage(data.msg);
};
That works, but I want to write a message "user is typing" while the user is typing and before the message is actually sent, so I am guessing I need to call the onmessage event manually, is that possible?
relevant js:
var chat = $('#chatwindow');
var msg = $('#messagebox');
function addMessage(msg) {
chat.append("<p>" + msg + "</p>");
}
msg.keypress(function( event ) {
if ( event.which != 13 ) {
return;
}
event.preventDefault();
if (msg.val() == "" || !open) {
return;
}
socket.send(JSON.stringify({
msg: msg.val()
}));
addMessage(msg.val());
msg.val("");
});
socket.onmessage = function(evt) {
var data = JSON.parse(evt.data);
addMessage(data.msg);
};
You have evt.data which is being passed from the server. Add another type of event, which will trigger when a user is typing.
Something like:
socket.onmessage = function(evt) {
var data = JSON.parse(evt.data);
if ( data.type == 'message' ) {
addMessage(data.msg);
} else if ( data.type == 'typing' ) {
showUserIsTyping();
} else if ( data.type == 'typingStopped' ) {
hideUserIsTyping();
}
};
All you'd need to do is send a message to the server when the user is typing, and maybe add a timeout, and send an event of typingStopped if the user hasn't typed anything in like 10 seconds or so.
Here is an example using the code you provided:
var msg = $('#messagebox');
function addMessage(msg) {
chat.append("<p>" + msg + "</p>");
}
msg.keypress(function( event ) {
event.preventDefault();
if (msg.val() == "" || !open) {
return;
}
//User pressed enter
if ( event.which == 13 ) {
socket.send(JSON.stringify({
type: 'message'
msg: msg.val()
}));
addMessage(msg.val());
msg.val("");
} else {
//Keypress, but not enter
socket.send(JSON.stringify({
type: 'typing'
}));
}
});
socket.onmessage = function(evt) {
var data = JSON.parse(evt.data);
switch ( data.type )
{
case 'message':
addMessage(data.msg);
break;
case 'typing':
notifyUserTyping(); //Create this function, and have it show/hide a "Typing..." textbox or similar.
break;
}
};

Login using Json

I am trying to develop a login process using json.
My problem is that when I make many login attempts , parameters are not overriden but concatenated.
Below is the code I'm writing.
I do not see where the problem is.
Thank you in advance .
var loginReq = Titanium.Network.createHTTPClient();
loginReq.onload = function() {
var json = this.responseText;
Titanium.API.info("step 1 done");
var response = JSON.parse(json);
if (response.status == true) {
Titanium.App.Properties.setString("key", response.key);
alert("Success");
} else {
alert("Email or password wrong");
}
};
function doConnVerif() {
if ($.email.value != '' && $.password.value != '') {
loginReq.open("POST", "URL");
loginReq.send({
'email' : $.email.value ,
'password' : $.password.value
});
} else {
alert("Enter email and password");
}
}
By your question I can't grasp the full aspect of the problem, but definitely a good idea would be only allow one login attempt at a time.
Something like:
var pendingRequest = false;
// ...
if(!pendingRequest) {
loginReq.send({
'email' : $.email.value ,
'password' : $.password.value
});
pendingRequest = true
}
// ...
loginReq.onload = function() {
pendingRequest = false
// ...

Placing the errors in its respective div

Here i am getting my Error Messages from a separate page and i am displaying it in a a div called #stage_error
$('#stage_error').html(error_string);
So, the errors will be displayed like this
The bus no field is required.
The comp id field is required.
The total seats field is required.
But what i want is to display the errors in its respective div's
i.e., the Bus no should be displayed near the div <div id='busno'> like this.
How can i do that ?
Json :
{"busno":["Bus No field is required"],"Comp Id":["Comp Id is required."]}
Update :
Script for request and showing error :
<script>
$(document).ready(function() {
$("#driver").click(function(event) {
var BusNo = $("#BusNo").val();
var CompID = $("#CompID").val();
var TotalSeats = $("#TotalSeats").val();
var _token = $("#_token").val();
$.post("managebus_register", {
_token: _token,
BusNo: BusNo,
CompID: CompID,
TotalSeats: TotalSeats
},
function(data) {
if (data != '') {
obj = JSON.parse(data);
var error_string = '';
$.each(obj, function(entry) {
error_string += obj[entry] + '<br/>';
});
$('#stage_error').html(error_string);
} else {
$('#stage_success').text('Resistered Succesfully');
$("#stage_error").hide();
}
});
});
});
</script>
Laravel Controller :
public function managebusregister()
{
$BusNo = Input::get('BusNo');
$CompID = Input::get('CompID');
$TotalSeats = Input::get('TotalSeats');
$data = Input::except(array('_token')) ;
$rule = array(
'BusNo' => 'required|unique:company_bus',
'CompID' => 'required',
'TotalSeats' => 'required|max:50'
) ;
$validator = Validator::make($data,$rule);
if ($validator->fails())
{
$messages = $validator->messages();
return json_encode($validator->messages()); //php encoded value
}
else
{
DB::insert('insert into company_bus (BusNo, CompID, TotalSeats) values (?, ?, ?)',
array($BusNo, $CompID, $TotalSeats));
return '';
}
}
Html Code :
<div id="stage_error" style="color:red;font-size:15px"></div>
<div id="stage_success" style="color:green;font-size:20px"></div>
and beyond that i have each field input boxes,
<input type="text" id="BusNo" name="BusNo"/>
<input type="text" id="CompID" name="CompID"/>
How can i throw error messages near the respective fields
Below is the approach: Observe I've added spans with error after text boxes.
CSS
<style>
.error { color:red; font-size:15px; }
</style>
Html
<input type="text" id="BusNo" name="BusNo" /><span class="error"></span>
<input type="text" id="CompID" name="CompID" /><span class="error"></span>
JavaScript I did some changes as per the jQuery standard, it should work well, if you're not interested then you can ignore all the changes but can take only below mentioned if logic block.
The error display added in if (!data) {...}
$(function () {
$(document).on("click", "#driver", function (event) {
var BusNo = $("#BusNo").val(),
CompID = $("#CompID").val(),
TotalSeats = $("#TotalSeats").val(),
_token = $("#_token").val();
$.post("managebus_register", {
_token: _token,
BusNo: BusNo,
CompID: CompID,
TotalSeats: TotalSeats
}).done(function (data) {
$("span.error").empty();//All previous error messages cleared here.
if (!data) {
var obj = JSON.parse(data);
//obj = {"busno":["Bus No field is required"],"Comp Id":["Comp Id is required."]}
$.each(obj, function (entry) {
var targetSelector='';
if (entry == "busno") {
targetSelector = "#BusNo";
}
if (entry == "Comp Id") {
targetSelector = "#CompID";
}
if(targetSelector) //Here we're setting error message for respective field
$(targetSelector).next("span.error").html(obj[entry]);
});
} else {
$('#stage_success').text('Resistered Succesfully');
$("#stage_error").hide();
}
});
});
});
you can try like this:
var json = JSON.parse('{"busno":["Bus No field is required"],"Comp Id":["Comp Id is required."]}');
// alert(json['busno']);
$("#busno").html(json.busno);// like this for others also.
change here:
obj = JSON.parse(data);
var error_string = '';
$.each(obj, function(entry) {
error_string += obj[entry] + '<br/>';
if(entry == 'busno'){
$("#busno").html(obj[entry]);// like this for others also.
}
if(entry == 'Comp Id'){
$("#compid").html(obj[entry]);// like this for others also.
}
});
$('#stage_error').html(error_string);

Javascript function "does not exist". Bad syntax but can't see it

The javascript is supposed to handle form submission. However, even if called with
script src="js/registerform.js"> Uncaught ReferenceError: sendreg is not defined .
The function is called onclick. Can be reproduced on www.r4ge.ro while trying to register as well as live edited. Tried jshint.com but no clue.
I will edit with any snips required.
function sendreg() {
var nameie = $("#fname").val();
var passwordie = $("#fpass").val();
var emailie = $("#fmail").val();
if (nameie == '' || passwordie == '' || emailie == '') {
alert("Please fill all the forms before submitting!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/register.php", {
numeleluii: nameie,
pass: passwordie,
mail: emailie
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
setTimeout(fillhome, 1000);
});
}
}
function sendpass() {
var oldpassw = $("#oldpass").val();
var newpassw = $("#newpass").val();
if (oldpassw == '' || newpassw == '') {
alert("Please fill all the forms before submitting!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/security.php", {
xoldpass: oldpassw,
xnewpass: newpassw
}, function(data2) {
alert(data2);
$('#passform')[0].reset(); // To reset form fields
});
}
}
function sendmail()
{
var curpass = $("#curpass").val();
var newmail = $("#newmail").val();
if (curpass == '' || newmail == '')
{
alert("Please fill all the forms before submitting!");
}
else
{
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/security.php", {
curpass: curpass,
newmail: newmail
}, function(data3) {
alert(data3);
$('#mailform')[0].reset(); // To reset form fields
});
}
}
I'm guessing here but... I imagine you are doing something like
...<button onclick="sendreg">...
And you have your <script> in the bottom on the code. Just put them on top or use $("#mybtn").click(sendreg)
Try using $("#mybtn").click(sendreg) instead of inline onclick.
The script wasn't called in the html. sorry for wasting time. A simple
<script src="js/registerform.js"></script> Fixed it.
There is no syntax error there, and I don't see any such error when trying the page.
The error that you get is that you can't make a cross domain call. Do the request to the same domain:
$.post("http://www.r4ge.ro/php/register.php", {
or:
$.post("/php/register.php", {

User Register Sign up Error

I am making a website and I have a signup.php page where the users can register and enter their information into the mysqli database. When I do this, I am almost there, I just keep getting a problem at this one line:
ajax.send("&u="+u+"&e="+e+"&p="+p1+"&g="+g);
It is basically sending the variables in the ajax/javascript check to get ready for transport to server. But I am getting an internal server 500 error at that line. Any ideas? I will post more code if you want me to.
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
function signup(){
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var g = _("gender").value;
var status = _("status");
if(u == "" || e == "" || p1 == "" || p2 == "" || g == ""){
status.innerHTML = "Fill out all of the form data";
} else if(p1 != p2){
status.innerHTML = "Your password fields do not match";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "signup_success"){
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
window.scrollTo(0,0);
_("signupform").innerHTML = "OK "+u+", check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
type:post;
ajax.send("&u="+u+"&e="+e+"&p="+p1+"&g="+g);
}
}
A 500 Internal Server Error code is an HTTP response code, indicating that you have reached out to the server and it has responded with an error. So it doesn't appear to be a problem with your JS code (at least as far as we can tell from what you've posted).
Try doing var_dump($_REQUEST); die(); as the first line in signup.php. Does that give you a 200 status code? If so, try moving that line down your code on the server until you get back to the 500 Internal Server Error, and you've found the line that's causing the problem.
You have the question tagged with jQuery, but I don't see any jQuery in your code sample. If you do have it, try this:
function signup() {
var status = $('#status');
var signupbtn = $('#signupbtn');
var data = {
u: $('#username').val(),
e: $('#email').val(),
p: $('#pass1').val(),
g: $('#gender').val()
};
if (data.u == '' || data.e == '' || data.p == '' || data.g == '') {
status.text('Fill out all of the form data');
return;
} else if (data.p != $('#pass2').val()) {
status.text('Your password fields do not match');
return;
}
signupbtn.hide();
status.text('please wait...');
$.ajax({
type: 'post',
url: 'signup.php',
data: data,
success: function(responseText) {
if (responseText != 'signup_success') {
status.text(responseText);
signupbtn.show();
return;
}
window.scrollTo(0, 0);
$('#signupform').html('OK '+ data.u +', check your email inbox and junk mail box at <u>'+ data.e +'</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.');
},
});
}

Categories

Resources