Session Storage error on firefox only - javascript

My code works well in Chrome and Edge, but I'm getting this error in Firefox:
TypeError: 'key' called on an object that does not implement interface Storage
function goToNextStep() {
$.post("../manager.php", {
dados: sessionStorage,
action: "save"
}, function(response) {
if (response === "1") {
$.ajax({
type: "GET",
url: "../final.php",
success: function(data) {
$('#content').html(data);
}
});
}
});
}

You're attempting to pass the entire sessionStorage object in an AJAX request. Don't do that. Instead pull out the specific keys that you require. Something like this:
function goToNextStep() {
$.post("../manager.php", {
dados: {
foo: sessionStorage.getItem('foo'),
bar: sessionStorage.getItem('bar')
},
action: "save"
}, function(response) {
if (response === "1") {
$.ajax({
type: "GET",
url: "../final.php",
success: function(data) {
$('#content').html(data);
}
});
}
});
}
I'd also suggest that you return JSON instead of plain text, as the latter can lead to issues with whitespace causing unexpected results. It's also better typed, so you can return a boolean state flag, eg:
if (response.success) {
// your logic here...
}

I was able to solve this with the following workaround:
function goToNextStep() {
$.post("../manager.php", {
dados: JSON.parse(JSON.stringify(localStorage)), // <----- change
action: "save"
}, function(response) {
if (response === "1") {
$.ajax({
type: "GET",
url: "../final.php",
success: function(data) {
$('#content').html(data);
}
});
}
});
}

Related

how to wait load() complete and get variable in selector

my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});
It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.

How to access a selector on AJAX Complete?

I make an Ajax Request that adds content to the page with HTML from the back-end, and then I make another Ajax Request that modifies that dynamically added HTML.
$("#list-customers-button").click(function () {
var selectedAcquirer = $("#acquirer-select").val();
if (selectedAcquirer === "adyen") {
if (listed) {
listed = false;
$("#customer-list-area").hide().html('').fadeIn(fadeTime);
} else {
listed = true;
$.ajax({
type: "GET",
url: "/adyen_list_customers",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#list-progress").show();
},
success: function (data) {
console.log(JSON.stringify(data));
$("#customer-list-area").hide().html(data["response_html"]).fadeIn(fadeTime).promise().done(function () {
$(".collapsible").collapsible();
resetDatepicker();
});
},
complete: function () {
$(document).on("change", "#file-download-datepicker", function () {
$("#file-download-progress").hide();
$("#file-download-date").val(selectedDate);
fileDownloadData = $("#file-download-form").serialize();
displayMessage(fileDownloadData);
$.ajax({
type: "POST",
url: "/adyen_update_file_list_by_date",
data: fileDownloadData,
beforeSend: function () {
$("#file-download-progress").show();
},
success: function (response) {
},
complete: function (response) {
$("#file-download-progress").hide();
console.log(response.responseText);
// Doesn't work. Selector should exist, but it doesn't.
$("#merchant-file-list").html(response.responseText);
},
error: function (response) {
displayMessage(response["responseText"]);
}
});
});
},
error: function (data) {
displayMessage(data);
},
});
}
} else if (selectedAcquirer === "stone") {
displayMessage("Adquirente indisponível no momento.");
} else {
displayMessage("É necessário selecionar uma adquirente.");
}
});
I get a perfect HTML response from the server, but selectors that were previously added with HTML also from the server (#file-download-progress, #merchant-file-list) are completely ignored. .html() doesn't work, nor anything, and I don't know how to use .on() to work around this because I just need to access that content. Since the ajax request is being made after the previous one is complete, they should be able to be accessed. They just don't exist nowhere in time.

Calling a controller method via javascript

I have an ASP.NET application where I am invoking a controller methode from JavaScript. My JavaScript code looks like this:
function OnNodeClick(s, e) {
$.ajax({
type: "POST",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
success: function (data) {
if (data != null) {
$('#GridView').html(data);
}
},
error: function (e) {
alert(e.responseText);
}
});
}
This calls the Home controller's DeviceManifests() method.
This is what the method looks like:
public ActionResult DeviceManifests(Guid selectedRepo)
{
var repoItem = mock.GetRepoItem(selectedRepo);
return View("Delete", repoItem.childs);
}
The method gets invoked but the problem is the Delete-View doesn't get rendered. There's no error, just nothing happens.
How can I update my code to get my desired behaviour?
Do like below code so if you have error you will have it in alert box or success result will rendered in DOM
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
dataType: "html",
success: function (data) {
if (data != null) {
$('#someElement').html(data);
}
}
},
error: function (e) {
alert(e.responseText);
}
});
You can do the redirect in the javascript side.
function OnNodeClick(s, e) {
$.ajax({
type: "GET ",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
success: function (msg)
{
window.location = msg.newLoc;
}
});
}
Make sure you include the redirect url in action and return JsonResult and not ActionResult. I'd also include pass the guid so that the destination Action and let it look up the data.

While ajax, async:true,deferred

3 hours i cant resolve the problem and found solution in internet. Some one please help me.
How i can create loop of ajax requests, while the data from ajax not equally "stop" using while and async:true?
This is not work example:
do {
promise = json('json.php');
promise.success(function again(data) {
if(data === 'stop') {
return false;
} else {
console.log('data');
}
});
} while (again());
function json(url) {
return $.ajax({
type: "GET",
dataType: 'text',
url: url
});
}
function again(data) {
if (data !== 'stop') {
alert(data);
sendReq();
}
}
function sendReq() {
json(location.href).success(again);
}
function json(url) {
return $.ajax({
type: 'GET',
dataType: 'text',
url: url
});
}
sendReq();

jquery exit function in ajax call

Is there a way to exit a function, depending on the result of an GET request.
For example, in the below function, hi, if the GET results in data, where data === '1', I want to exit the function.
function hi () {
$.ajax({
url: "/shop/haveItem",
type: "GET",
success: function (data) {
if (data == '1') {
// exit hi() function
}
}
});
// some executable code when data is not '1'
}
How can I go about accomplishing this?
I think the solution can be something like this
function hi () {
$.ajax({
url: "/shop/haveItem",
type: "GET",
success: function (data) {
if (data == '1') {
ifData1();
} else {
ifDataNot1()
}
}
});
}
function ifData1 () { /* etc */ }
function ifDataNot1 () { /* etc */ }
If you have an ajax function, you should always work with callback functions. If you make an ajax function synchronous, then the browser will be blocked for the duration of ajax call. Which means that the application will remain non-responsive during the duration of the call.
You should be able to return false to simulate "exit".
function hi()
{
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
return false
}
});
//some executable code when data is not '1'
...
}
One thing you can do is have a flag variable. Assign it to true or false, depending on if you want to exit or not.
function hi()
{
var flag=false;
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
flag=true;
}
});
if ( flag ) return;
//some executable code when data is not '1'
...
}
Creating a global flag variable I think would work the best. Tested and working!!
window.flag = [];
function hi()
{
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
flag = true;
}
});
if (flag) {
return false;
}
//some executable code when data is not '1'
...
}

Categories