Why does my alert statement not fire? - javascript

When testing this code, I purposely make it so the text returned from the ajax call is not 1. It reaches that else statement. The other statements execute, however, I never see an alert.
$.ajax ( {
type: "GET",
processData: false,
url: SITE_URL + "/system/check_user_project/" + session_id + "/" + cart_id + "/" + project_id + "/" + revision_id, //send data to this url
dataType: 'text',
})
.done (function(text) //When we have the data
{
if ("1" == text)
{
photos_populate_albums(session_id); //Call function to populate albums
if (typeof(project_id) !== "undefined" && project_id > 0) //If we have a project
{
mattes_add_default_matte(null, null, null, null, SITE_URL + "/system/xml/export/" + project_id + "?rid=" + revision_id);
}
else //otherwise...
{
mattes_add_default_matte(); //Add the default matte
}
common_change_step(document.getElementById("step1")); //Set the step to 1
}
else
{
$("#content").empty();
alert("Invalid project.");
window.location.href = (SITE_URL + "/user/mystuff/projects/?pid=" + partner_id);
}
});
UPDATE: I just realized I accidentally checked the box that asks if you want to keep receiving alerts from this webpage when it came up. Now I don't know where to undo it.

The code works. To reset the alert setting I had to re-open the tab.

Probably it's because you're doing a redirect just after the alert, and it is being supressed.
You may try replacing this:
$("#content").empty();
alert("Invalid project.");
window.location.href = (SITE_URL + "/user/mystuff/projects/?pid=" + partner_id);
For something like this:
$("#content").empty();
if (alert("Invalid project.") || true)
window.location.href = (SITE_URL + "/user/mystuff/projects/?pid=" + partner_id);

Related

ajax data isn't the same in chrome vs firefox

Some reason I can return data fine from a POST in Chrome. The data returned looks like this when using Chrome:
{"email":"account#bytestand.com","customer_id":20413,"credit_amount":50.0,"currency_symbol":"$"}
But then when the same POST is completed on FireFox I get the following error:
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
Somehow the data isn't being handled the same and I don't know why.
Here is the code that generates the ajax request
function getCustomerAndCredit() {
console.log("getCustomerAndCredit");
$(function() {
$("form[action='" + shopAddress + "/account/login']").submit(function(event){
console.log("this is past the submit event in Firefox");
var custEmail = $("form[action='" + shopAddress + "/account/login'] input[type=email]").val();
var pass = $("form[action='" + shopAddress + "/account/login'] input[type=password]").val();
sessionStorage.setItem('custEmail', custEmail);
sessionStorage.setItem('pass', pass);
sessionStorage.setItem('loggedIn', true);
debugger;
$.ajax({
url: "/apps/proxy/return_customer",
data: {email: custEmail},
type: "POST",
dataType: "js",
complete: function(data) {
debugger;
if(noCustomerInDB(data)){
if(data.responseJSON == undefined){
sessionStorage.setItem('customer_id', JSON.parse(data.responseText).customer_id);
sessionStorage.setItem('creditAmount', JSON.parse(data.responseText).credit_amount);
sessionStorage.setItem('currency', JSON.parse(data.responseText).currency_symbol);
}
else {
sessionStorage.setItem('customer_id', data.responseJSON.customer_id);
sessionStorage.setItem('creditAmount', data.responseJSON.credit_amount);
sessionStorage.setItem('currency', data.responseJSON.currency_symbol);
}
}
// console.log("What is the credit_amount here in getCustomerAndCredit " + sessionStorage.getItem('creditAmount'));
},
});
});
});
}
And then this is where the data is going:
function noCustomerInDB(data){
console.log("this is the todd variable " + data);
console.log("stringify data " + JSON.stringify(data));
console.log("what about just data?? " + JSON.parse(data));
console.log("this is the response down here in the no customer function" + data.responseText);
if(data.responseText == ""){
return false;
}
else{
if (JSON.parse(data.responseText).customer_id == "no_customer"){
sessionStorage.setItem('creditAmount', "null");
return false;
}
else{
return true;
}
}
}
I did some more digging and now its looking like the ajax isn't being called on FireFox. Because the data returned from the POST looks like this:
{"readyState":0,"status":0,"statusText":"error"}
This cannot be - dataType: "js"
Use dataType: "json" instead. Also make sure that "/apps/proxy/return_customer" has the proper header configured to deploy JSON:
"Content-Type: application/json"

How to add a conditional statement for JQUERY AJAX response function

This is my code :
jQuery(document).ready(function () {
jQuery(".jlk").live("click", function (e) {
e.preventDefault();
var task = jQuery(this).attr("data-task");
var post_id = jQuery(this).attr("data-post_id");
var nonce = jQuery(this).attr("data-nonce");
var currentClass = $(this).attr('class');
jQuery(".status-" + post_id).html(" ").addClass("loading-img").show();
jQuery.ajax({
type: "post",
dataType: "json",
url: wtilp.ajax_url,
data: { action: "wti_like_post_process_vote", task: task, post_id: post_id, nonce: nonce },
success: function (response) {
jQuery(".lc-" + post_id).html(response.like);
jQuery(".unlc-" + post_id).html(response.unlike);
jQuery(".status-" + post_id).removeClass("loading-img").empty().html(response.msg);
}
});
});
// Other users tooltip
jQuery("span.wti-others-like").live("mouseover", function () {
jQuery(this).children("span").show();
});
jQuery("span.wti-others-like").live("mouseout", function () {
jQuery(this).children("span").hide();
});
});
And I'm trying to add the conditional statement like this :
if (jQuery(".lc-" + post_id).html(response.like)) {
$(".action-unlike-" + post_id + " img").removeClass('opacity-none'); $(".action-like-" + post_id + " img").addClass('opacity-none'); alert('positive');
}
else if (jQuery(".unlc-" + post_id).html(response.unlike)) { $(".action-like-" + post_id + " img").removeClass('opacity-none'); $(".action-unlike-" + post_id + " img").addClass('opacity-none'); alert('negative'); }
But it always alert 'positive' like its not reading my conditions.
How can i accomplish this?
If (response.like == 'true') {do this} else if (response.unlike == 'true') {do this} ?
the jQuery HTML Method always returns true since it is a method to set HTML when you pass in a value.
See: http://api.jquery.com/html/
If your HTML is an input string your looking for the "Val" Method.
See: http://api.jquery.com/val/
if you literally want to check the HTML you need to check the .html() with NO Values passed in. Then do a string or other comparison of that HTML.
H i,
The if statement is a declaration ( it is setting html, not getting html and checking )
if (jQuery(".lc-" + post_id).html(response.like)) { ...
do you mean to do :
if (jQuery(".lc-" + post_id).html()===response.like) { ...
You should actually check the HTML value like $(".lc-" + post_id).html() with the response.like instead of setting the value in it. You can replace the code with the below one:
if ($(".lc-" + post_id).html() == response.like) {
$(".action-unlike-" + post_id + " img").removeClass('opacity-none');
$(".action-like-" + post_id + " img").addClass('opacity-none');
alert('positive');
} else if ($(".unlc-" + post_id).html() == response.unlike) {
$(".action-like-" + post_id + " img").removeClass('opacity-none');
$(".action-unlike-" + post_id + " img").addClass('opacity-none');
alert('negative');
}
Good luck!

jquery dialog pause a script like alert()

I have next javascript code:
function getLetterOfResponsibilityNote(dialogNoteLink, visitCountryName) {
$.ajax({
type: "GET",
url: "/Admin/Applications/GetLetterOfResponsibilityNote/?selectedCountryName=" + visitCountryName,
cache: false,
success: function(data) {
if (data != "") {
dialogNoteLink.dialog();
dialogNoteLink.attr("title", "Letter Of Responsibility Note for " + visitCountryName);
dialogNoteLink.html("<p>" + data + "</p>");
}
}
});
}
I want to call it, for example, 5 times and get data from server, then I will display it in dialog. But I get one Jquery UI Dialog with message. Problem is that script doesn't pause while dialog is open.
If I write instead of it:
dialogNoteLink.dialog();
dialogNoteLink.attr("title", "Letter Of Responsibility Note for " + visitCountryName);
dialogNoteLink.html("<p>" + data + "</p>");
with alert() - it works fine!
How I can resolve this problem?
That is how JavaScript alert works. If you want to make the calls wait for the dialog to close, then you will have to make the subsequent calls in a callback after the dialog is closed. You should do something like this -
var arrayofNotesAndCountryNames = [{
"dialogNoteLink" : link1,
"visitCountryName" : "country1"
},{
"dialogNoteLink" : link2,
"visitCountryName" : "country2"
},{
"dialogNoteLink" : link3,
"visitCountryName" : "country3"
}];
var currentIndex = 0;
function getLetterOfResponsibilityNote() {
var dialogNoteLink = arrayofNotesAndCountryNames[currentIndex].dialogNoteLink;
var visitCountryName = arrayofNotesAndCountryNames[currentIndex].visitCountryName;
$.ajax({
type: "GET",
url: "/Admin/Applications/GetLetterOfResponsibilityNote/?selectedCountryName=" + visitCountryName,
cache: false,
success: function(data) {
if (data != "") {
dialogNoteLink.dialog({close : function(){
currentIndex++;
if (currentIndex < arrayofNotesAndCountryNames.length){
getLetterOfResponsibilityNote();
}
}
});
dialogNoteLink.attr("title", "Letter Of Responsibility Note for " + visitCountryName);
dialogNoteLink.html("<p>" + data + "</p>");
}
}
});
}
getLetterOfResponsibilityNote();
The dialog should be shown from the callback of the query to the server.
There are no blocking function or dialogs on JQuery.

Ajax success function issue

My javascript looks like that.
There are some problems that I can't figure out, where I did mistake
#status_message doesn't show generated message
$("#status").className = 'fail'; doesn't override current class
var message=$("#status_message"), form=$("#bcscan"), ids=$('#itemids'),proctype, destination, counter=0, tenWordCounter = 0, autoPostInterval=null, errorcount=0, successcount=0;
function ajaxPost() {
formData = form.serialize()+'&process=Scan';
formUrl = form.attr('action');
formMethod = form.attr('method');
$.ajax({
url: formUrl,
type: formMethod,
dataType: "json",
data: formData,
success: function (data) {
var now = new Date();
if(data.err_detected==="yes")
{
if(data.errors.indexOf(",") != -1)
errorcount=errorcount+data.errors.split(",").length;
else errorcount=errorcount+1;
$("#status").className = 'fail';
message =errorcount+" errors found";
$('#errors').prepend(data.errors).slideDown("slow");
}
$('#success').prepend(data.success).slideDown("slow");
if(data.success.indexOf(",") != -1)
successcount=successcount+data.errors.split(",").length;
else successcount=successcount+1;
message +="Last submitted:"+now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$("#status_message").text(message);
}
});
}
Here is page in action
If you want to test, please choose some option from selects like, output from db, ebay.fr and press "scan". Enter 10 digits seperated by comma try 41,42 (they exist in db tables) too between them. After 10th digit it will post textarea via ajax.
For the message, you've declared a jQuery object pointing at the element:
var message = $('#status_message'), ...
but then you're overwriting it with a string:
message = errorcount + ' errors found';
You should be calling:
message.text('some string...')
to change its contents.
For the class change, the correct syntax is:
$("#status").addClass('fail');
How about
$('#status').attr('class','fail');
This will override the current class.
did you try this?? $("#status").addClass( 'fail');

Deselect a text box in jQuery after page reload if content is active

I have a Google Instant style jQuery search script that queries a PHP file then parses the results into an HTML div. When no query is active the text box is automatically selected but when a query is active I want it not to be automatically selected. I know this is possible to do by using the .blur(); function, but how can I make it only use the .blur(); function when a query is active and the page has been reloaded? I hope everyone can understand my question.
My jQuery code is:
$(document).ready(function () {
$('[id^=type_]').click(function () {
type = this.id.replace('type_', '');
$('[id^=type_]').removeClass('selected');
$('#type_' + type).addClass('selected');
return false;
});
$('#query').focus();
if (window.location.hash != "") {
var full = window.location.hash.replace('#', '');
var queryType = full.substring(0, full.indexOf("/"));
$('#type_' + queryType).click();
} else {
$('#type_search').click();
}
$('#query').keyup(function () {
var query = $(this).val();
var url = '/' + type + '/' + query + '/';
window.location.hash = '' + type + '/' + query + '/';
document.title = $(this).val() + ' - My Search Script';
$('#results').show();
if (query == '') {
window.location.hash = '';
document.title = 'My Search Script';
$('#results').hide();
}
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
success: function (results) {
$('#results').html(results);
}
});
});
if (window.location.hash.indexOf('#' + type + '/') == 0) {
query = window.location.hash.replace('#' + type + '/', '').replace('/', '');
$('#query').val(decodeURIComponent(query)).keyup();
}
});
after reviewing the source I found that my suspicion was correct. Because there is only one text box on the page, once you blur the query one, it just goes back to it. You can make another input node on your html page e.g.
<input type="text" style="display:none" id="invisible">
and then use this code
if ($('#query').val().length) {
$('#invisible').focus();
}
and that should get you there :)
Ahha! I see what you mean. You can check if the textbox has anything in it with the .val() function in JQuery. Assuming that '#query' is the textbox, you can change that part to
if($('#query').val().length == 0)
$('#query').focus();

Categories