Develop Reference

Google Places API works in Chrome but not in Firefox

I use the Google Places API and when I change address it works perfectly in Chrome but doesn't always work in Mozilla Firefox.
I use jQuery, Bootstrap 4 and JS and Symfony 4 for the backend.
function onPlaceChangedEditUser() {
console.log('1');
var place = this.getPlace();
$('.postal_code').val('');
for (var i in place.address_components) {
var component = place.address_components[i];
for (var j in component.types) {
var type_element = $('.' + component.types[j]);
if (component.types[j] == "country") {
$('#country').find('option').attr('selected', false);
$('#country').find('option[data-country="' + component.short_name + '"]').attr('selected', true);
$('#country_iso').val(component.short_name);
$('#country').change();
$('.country-short').val(component.short_name);
if ($('.country').length) {
$.ajax({
url: Routing.generate("front.dashboardbabysitter.find.language"),
type: "POST",
headers: {
"cache-control": "no-cache"
},
async: false,
cache: false,
data: {
'isoCountry': component.short_name
},
success: function(json) {
if (!json.hasError) {
$('.country option:selected').removeAttr('selected');
$('.country option[value=' + json.idLanguage + ']').attr('selected', 'selected');
$('.country').val(json.idLanguage);
}
},
error: function(XMLHttpRequest, textStatus) {
if (textStatus !== 'abort') {
var error = "TECHNICAL ERROR: unable to send login informations \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus;
$.growl.error({
message: error
});
return false;
}
},
complete: function() {}
});
}
if (jQuery.inArray(component.short_name, mp_country_prefix)) {
var phone_number = '+' + mp_country_prefix[component.short_name];
var flag_class = (component.short_name).toLowerCase();
$('#flag').removeClass().addClass('flag position-absolute ' + flag_class);
$('#phone').val(phone_number);
} else {
console.log('there is no iso');
}
}
if (type_element) {
type_element.val(component.long_name);
}
if ($("#latitude").length) {
$("#latitude").val(place.geometry.location.lat());
$("#longitude").val(place.geometry.location.lng());
}
if ($(".latitude").length) {
$(".latitude").val(place.geometry.location.lat());
$(".longitude").val(place.geometry.location.lng());
}
if ($('#address1').length) {
$('#address1').val($('.street_number').val() + ' ' + $('.route').val())
}
if ($('#edit_babysitter_personal_info_address_address1').length) {
$('#edit_babysitter_personal_info_address_address1').val($('.street_number').val() + ' ' + $('.route').val())
}
if ($('#parent_personal_info_address_address1').length) {
$('#parent_personal_info_address_address1').val($('.street_number').val() + ' ' + $('.route').val())
}
}
}
}
function initializeAutocomplete(id) {
var element = document.getElementById(id);
if (element) {
var autocomplete = new google.maps.places.Autocomplete(element, {
types: ['geocode'],
language: _mpop.current_lang
});
if (id == "parent_personal_info_fullAddress" || id == "edit_babysitter_personal_info_fullAddress" ||
id == "address_bb" || id == "home_address") {
google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChangedEditUser);
}
}
}

You can use addEventListener instead of addListener
Reference - link
Identify the browser and apply the event accordingly.

How to fire the ajax request on error?

I have an ajax call using jquery.
$.ajax({
type: "POST",
url: "recorded-vigil.aspx/GetCameraTimeLineMinutes",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
error: function (xhr) {
$('.loader').hide();
alert('Error in fetching timeline. Please try again');
console.log(xhr);
},
success: function (results) {
$('.loader').hide();
$('#spnTimeSelect').html("Please select minute");
console.log('GetCameraTimeLineMinutes');
if (results != null && results.d != null && results.d.result != null) {
var HourSel = $("#MinuteSelect").empty();
for (var i = 0; i < results.d.result.length; i++) {
var Minute = i;
//if (results.d.result[i] == 1)
// HourSel.append('<button class="dayClass activeCam minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
//else
// HourSel.append('<button class="dayClass minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
if (results.d.result[i] == 1)
HourSel.append('<div class="btn on minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
else
HourSel.append('<div class="btn minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
//if (i == 16)
// oSel.append('<hr style="visibility:hidden;"><div id="dayBreak"> </div>');
}
breakMinutes();
$('.minuteClass').on('click', onMinuteClick);
}
}
});
This used to throw error because of server timeout.
Is there any way to fire this again on error. If we try this say 3 times, then we can show the timeout error. Is it possible?

If I understand your situation correctly, then yes this is possible. There are many ways you can achieve this - consider the following adjustments to your code to show how this could be achieved:
var retries = 3; // Track the number of retries
function doRequest() {
$.ajax({
type: "POST",
url: "recorded-vigil.aspx/GetCameraTimeLineMinutes",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
error: function (xhr) {
$('.loader').hide();
alert('Error in fetching timeline. Please try again');
console.log(xhr);
retries--; // Decrement the number of remaining retries
if(retries >= 0) { // If more retries available, fire another request
doRequest()
}
},
success: function (results) {
retries = 3; // Optional reset if you want to do this also
$('.loader').hide();
$('#spnTimeSelect').html("Please select minute");
console.log('GetCameraTimeLineMinutes');
if (results != null && results.d != null && results.d.result != null) {
var HourSel = $("#MinuteSelect").empty();
for (var i = 0; i < results.d.result.length; i++) {
var Minute = i;
//if (results.d.result[i] == 1)
// HourSel.append('<button class="dayClass activeCam minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
//else
// HourSel.append('<button class="dayClass minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
if (results.d.result[i] == 1)
HourSel.append('<div class="btn on minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
else
HourSel.append('<div class="btn minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
//if (i == 16)
// oSel.append('<hr style="visibility:hidden;"><div id="dayBreak"> </div>');
}
breakMinutes();
$('.minuteClass').on('click', onMinuteClick);
}
}
});
}

why my ajax makes me to refresh my page to see content?

I want when my ajax detect changes on database automatically show the content in html without refresh , but it isnt doing nothing. I have to refresh the page , how can I fix it? I am trying to do ajax long polling
$(function(doc, win, $) {
var has_focus = true;
var notification = win.Notification || win.mozNotification || win.webkitNotification;
var $badge = $("#notifications-badge");
var $list = $("#notifications-list");
var $button = $("#notifications-button");
URL_GET_NOTIFICATION = BASE_URL + 'notify/pusher';
URL_GET_NOTIFICATION_UPDATE = BASE_URL + 'notify/update';
if ('undefined' === typeof notification) {
console.log('Web notification not supported');
} else {
notification.requestPermission(function(permission) {});
}
function check_notifications(timestamp) {
$.ajax({
type: 'GET',
url: URL_GET_NOTIFICATION,
data: { timestamp : timestamp },
dataType: 'json',
async: true,
success: function (data) {
for (var i in data.notifications) {
notify(data.notifications[i].message, data.notifications[i].type, data.notifications[i].timestamp);
}
check_notifications(data.timestamp);
}
});
}
function notify(message, type, created_at) {
var type_txt = 'info';
var url = '#';
var icon = 'info-circle';
if (type == 0) {
type_txt = 'success';
icon = 'check';
} else if (type == 1) {
type_txt = 'info';
icon = 'exclamation';
} else if (type == 2) {
type_txt = 'warning';
icon = 'exclamation-triangle';
} else if (type == 3 || type == 4) {
type_txt = 'danger';
icon = 'fire';
}
$badge.show();
$badge.text(parseInt($badge.text()) + 1);
$list.find(".item").eq(13).nextAll(".item").remove();
var item = '<li class="item text-' + type_txt + '"><a href="' + url + '"><span class="text-' + type_txt + '">' +
'<i class="fa fa-' + icon + ' fa-fw"></i> ' + message.substr(0, 22) + '</span>' +
'<span class="pull-right text-muted small" data-time="' + created_at + '">X</span></a></li>' +
'<li class="item divider"></li>';
$list.prepend(item);
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
return true;
}
$(win).on("blur", function () {
has_focus = false;
});
$(win).on("focus", function () {
has_focus = true;
});
$button.on("click", function () {
$badge.fadeOut(300, function () {
$badge.text(0);
});
$list.find("span[data-time]").each(function (index) {
var $this = $(this);
$this.text(moment.unix($this.data('time')).fromNow());
});
});
check_notifications();
}(document, window, jQuery));

Ajax Request, automatically receive data every 30 seconds (with a number of users using the website simultaneously)

I have ajax request below - where it will get a number of pledges (tiles) by users in which when there's a pledge, the tile will flip and show:
var reveal = 0;
$.ajax({
type: 'GET',
dataType: "json",
url: '/Services/getpledge.ashx',
success: function (data) {
if (data.status === "Success") {
$.each(data.Pledges, function (i, v) {
if (typeof v.TileID !== 'undefined') {
jQuery('.square-container div[data-id=' + v.TileID + ']').find('.front div').removeClass('box1').addClass('box3');
jQuery('.square-container div[data-id=' + v.TileID + ']').parent().addClass('complete');
jQuery('.square-container div[data-id=' + v.TileID + ']').attr('data-content', v.PledgeContent);
jQuery('.square-container div[data-id=' + v.TileID + ']').attr('data-smoke', v.isSmoker);
jQuery('.square-container div[data-id=' + v.TileID + ']').attr('data-fb_uid', v.FBID);
if (v.Lastname != null)
jQuery('.square-container div[data-id=' + v.TileID + ']').attr('data-name', v.Firstname + ' ' + v.Lastname);
else
jQuery('.square-container div[data-id=' + v.TileID + ']').attr('data-name', v.Firstname);
}
reveal += 1;
});
//reveal = data.Pledges.length;
//console.log(data.Pledges.length + ' ' + reveal);
$('.changeMe').text(reveal + '/' + number_square);
}
},
error: function () {
console.log('An error has occured, please refresh page and try again');
}
});
On the day of the launch, there will be a number of users using the website simultaneously, so I was wondering how can I make sure the request is done automatically - every 30 seconds so the page always updated.

You could simply do the following which will run every 30 seconds..
window.setInterval(function() {
// code you want to run..
}, 30000);

problem ajax load with autocomplete.?

i created a jquery autocomplete it work true, but loading LOADING... it after removed value by Backspace don't work true. it not hide and Still is show.
how can after removed value by Backspace, hide LOADING... ?
EXAMPLE: Please click on link and see problem
my full code:
$(document).ready(function () {
/// LOADING... ///////////////////////////////////////////////////////////////////////////////////////
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
/// autocomplete /////////////////////////////////////////////////////////////////////////////////////////
$('.auto_complete').keyup(function () {
var specific = '.' + $(this).closest('div.auto_box').find('b').attr('class');
var cl_list = '.' + $(this).closest('div.auto_box').find('ul').attr('class');
var id = '#' + this.id;
var url = $(id).attr('class');
var dataObj = $(this).closest('form').serialize();
$.ajax({
type: "POST",
dataType: 'json',
url: url,
data: dataObj,
cache: false,
success: function (data) {
//alert(url)
var cl_list = '.' + $('.auto_box '+ specific +' ul').attr('class');
var id_name = $(cl_list).attr('id');
$(cl_list).show().html('');
if (data == 0) {
$(cl_list).show().html('<p><b>There is no</b></p>');
}
else {
$.each(data, function (a, b) {
//alert(b.name)
$('<p id="' + b.name + '">' + b.name + '</p>').appendTo(cl_list);
});
$(cl_list + ' p').click(function (e) {
e.preventDefault();
var ac = $(this).attr('id');
$('<b>' + ac + '، <input type="text" name="'+id_name+'[]" value="' + ac + '" style="border: none; display: none;" /></b>').appendTo($('.auto_box ' + specific + ' span'));
$(this).remove();
return false;
});
$('.auto_box span b').live('click', function (e) {
e.preventDefault();
$(this).remove();
return false;
});
}
if ($(specific + ' input').val() == '') {
$(cl_list + " p").hide().remove();
$(cl_list).css('display','none');
$(".list_name").show().html('');
};
$('body').click(function () {
$(cl_list + " p").hide().remove();
$('.auto_complete').val('');
$(cl_list).show().html('');
$(cl_list).css('display','none')
});
},
"error": function (x, y, z) {
// callback to run if an error occurs
alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
}
});
});
});

I recommend you to use jsfiddle next time you post code examples in a link.
Nevermind. The "loading" message keeps there because there's no fallback to empty values on results.
A quick fix could be just by test that there's a value in the input before making any post like if(this.value == ""){
$(cl_list).css('display', 'none');
return false;
}
Here's how it works with it