I have written some JavaScript functions that will do 2 things when a button is clicked:
It will change the label of the button to "Deactivate" from "Activate" and vice versa.
The value of the ActiveStatus property will change to 0 from 1 and vice versa.
The code works alright and the change is displayed perfectly in Mozilla Firefox, but whenever I try display the page in IE 8, change is not displayed, although in database, the value changes perfectly.
Here are the JavaScript codes for the button click:
$(function () {
var stat = document.getElementById("stat").value;
//alert(stat);
if (stat == 1)
document.getElementById("butt").value = "Activate";
else
document.getElementById("butt").value = "Deactivate";
});
function activeStatus(ActiveStatus) {
//alert(ActiveStatus);
if (ActiveStatus == 1) {
return "Activate";
}
else
return "Deactivate";
}
function change() {
var butt = document.getElementById("butt").value;
if (butt == 'Deactivate') {
document.getElementById("butt").value = "Activate";
document.getElementById("stat").value = 1;
}
else {
document.getElementById("butt").value = "Deactivate";
document.getElementById("stat").value = 0;
}
}
Also, an exception message I'm getting whenever I'm trying to view the page in IE 8 is:
Microsoft JScript runtime error: Object doesn't support this property or method
I'm getting this error at the Country.js JavaScript file. The place where I'm getting this exception is:
var url = "/Country/GetAllCountry";
var refresh = function () {
$.getJSON(url, {}, function (data) {
self.Countries(data);
});
};
More specifically, in this line:
self.Countries(data);
None of these happen, when I try to run my application in Firefox. All these happen when I try to run my application in IE 8.
Why am I facing this problem????
EDIT-1: I solved my problem partially. The exception:
Microsoft JScript runtime error: Object doesn't support this property or method
was displayed only because 'Countries' was undefined in Country.js. Countries must be a valid observable, but it has to be declared. I simply had to add this line of code next to it, doing the declaration:
self.Countries = ko.observableArray([]);
Now the exception has disappeared, still the page is not refreshed after the button click.
The answer to this problem is in these 5 simple steps:
Select Tools >> Internet Options.
Click the Settings button in Browsing History.
Select the Every time I visit the webpage radio button.
Click OK to close the Settings dialog.
Click OK to close the Internet Options dialog.
It works perfectly now.
Courtesy: Gonzalo (https://stackoverflow.com/users/203766/gonzalo)
Related
I have this problem that only exists on first page load in Chrome on desktop. It works in Chrome on the second or more page loads. It also works on mobile in Chrome on every page load.
It works fine in Safari and Firefox, MOST OF THE TIME. I have experienced the below error there as well, only on first page load, only on desktop, but I am not able to reproduce it there for about an entire day now.
Does anyone know what is going on?
The only thing I have been able to come up with is that somehow my redirect function is triggered. Because as you can see in the flow indicated below at number 6, after the error, the page redirects back to index.html. However that function would only trigger if the value of one of my sessionStorage values is null and I can see in the browser console that those values are set correctly when I press the button to go to the next page.
The error:
The flow:
Landing page is index.html with separate index.js
Upon selection of a few drop-downs, 3 values are stored in sessionStorage
Next page is called: normal-quiz.html with separate normal-quiz.js
Values from sessionStorage are retrieved to filter a data array
The loadQuiz function runs on the filtered array and sets a question element value to an object's 'english' property
On first page load, only in Chrome on desktop, the above error occurs which makes the browser return to index.html and sessionStorage is cleared
If I try the above again, it works without a problem
The line generating the error is where I use the loadQuiz function to set the question element's value in my html to the 'english' property value of the first object in the filtered array.
The code (js):
function redirect() {
if (selectedBook !== null) {
// do nothing
} else {
window.location = "<myURL>"
};
};
redirect();
function loadQuiz() {
const currentQuizData = quizArr[currentQuiz]; // currentQuiz is the question counter. It starts at 0 to get the first object, then increments by 1 after each question
questionEl.innerText = currentQuizData.english;
// line above is where the error is generated
counter.innerText = (currentQuiz + 1) + "/" + quizArr.length;
};
loadQuiz();
In my Rails 3 application I do:
render :js => "alert(\"Error!\\nEmpty message sent.\");" if ...
Sometimes, below this error message (in the same alert box) I see: "Prevent this page from creating additional dialogs" and a checkbox.
What does this mean ?
Is that possible not to display this additional text and checkbox ?
I use Firefox 4.
It's a browser feature to stop websites that show annoying alert boxes over and over again.
As a web developer, you can't disable it.
What does this mean ?
This is a security measure on the browser's end to prevent a page from freezing the browser (or the current page) by showing modal (alert / confirm) messages in an infinite loop. See e.g. here for Firefox.
You can not turn this off. The only way around it is to use custom dialogs like JQuery UI's dialogs.
You can create a custom alert box using java script, below code will override default alert function
window.alert = function(message) { $(document.createElement('div'))
.attr({
title: 'Alert',
'class': 'alert'
})
.html(message)
.dialog({
buttons: {
OK: function() {
$(this).dialog('close');
}
},
close: function() {
$(this).remove();
},
modal: true,
resizable: false,
width: 'auto'
});
};
Using JQuery UI's dialogs is not always a solution. As far as I know alert and confirm is the only way to stop the execution of a script at a certain point. As a workaround we can provide a mechanism to let the user know that an application needs to call alert and confirm. This can be done like this for example (where showError uses a jQuery dialog or some other means to communicate with the user):
var f_confirm;
function setConfirm() {
f_confirm = confirm;
confirm = function(s) {
try {
return f_confirm(s);
} catch(e) {
showError("Please do not check 'Prevent this page from creating additional dialogs'");
}
return false;
};
};
I designed this function to hopefully circumvent the checkbox in my web apps.
It blocks all functionality on the page while executing (assuming fewer than three seconds has passed since the user closed the last dialog), but I prefer it to a recursive or setTimeout function since I don't have to code for the possibility of something else being clicked or triggered while waiting for the dialog to appear.
I require it most when displaying errors/prompts/confirms on reports that are already contained within Modalbox. I could add a div for additional dialogs, but that just seems too messy and unnecessary if built-in dialogs can be used.
Note that this would probably break if dom.successive_dialog_time_limit is changed to a value greater than 3, nor do I know if Chrome has the the same default as Firefox. But at least it's an option.
Also, if anyone can improve upon it, please do!
// note that these should not be in the global namespace
var dlgRslt,
lastTimeDialogClosed = 0;
function dialog(msg) {
var defaultValue,
lenIsThree,
type;
while (lastTimeDialogClosed && new Date() - lastTimeDialogClosed < 3001) {
// timer
}
lenIsThree = 3 === arguments.length;
type = lenIsThree ? arguments[2] : (arguments[1] || alert);
defaultValue = lenIsThree && type === prompt ? arguments[1] : '';
// store result of confirm() or prompt()
dlgRslt = type(msg, defaultValue);
lastTimeDialogClosed = new Date();
}
usage:
dialog('This is an alert.');
dialog( 'This is a prompt', prompt );
dialog('You entered ' + dlgRslt);
dialog( 'Is this a prompt?', 'maybe', prompt );
dialog('You entered ' + dlgRslt);
dialog( 'OK/Cancel?', confirm );
if (dlgRslt) {
// code if true
}
This is a browser feature.
If you could, try to employ http://bootboxjs.com/, whit this library you can do the same of
alert("Empty message sent");
by writing:
bootbox.alert("Empty message sent", function(result) {
// do something whit result
});
You'll get a nice user interface too!
I was asked to take a look at what should be a simple problem with one of our web pages for a small dashboard web app. This app just shows some basic state info for underlying backend apps which I work heavily on. The issues is as follows:
On a page where a user can input parameters and request to view a report with the given user input, a button invokes a JS function which opens a new page in the browser to show the rendered report. The code looks like this:
$('#btnShowReport').click(function () {
document.getElementById("Error").innerHTML = "";
var exists = CheckSession();
if (exists) {
window.open('<%=Url.Content("~/Reports/Launch.aspx?Report=Short&Area=1") %>');
}
});
The page that is then opened has the following code which is called from Page_Load:
rptViewer.ProcessingMode = ProcessingMode.Remote
rptViewer.AsyncRendering = True
rptViewer.ServerReport.Timeout = CInt(WebConfigurationManager.AppSettings("ReportTimeout")) * 60000
rptViewer.ServerReport.ReportServerUrl = New Uri(My.Settings.ReportURL)
rptViewer.ServerReport.ReportPath = "/" & My.Settings.ReportPath & "/" & Request("Report")
'Set the report to use the credentials from web.config
rptViewer.ServerReport.ReportServerCredentials = New SQLReportCredentials(My.Settings.ReportServerUser, My.Settings.ReportServerPassword, My.Settings.ReportServerDomain)
Dim myCredentials As New Microsoft.Reporting.WebForms.DataSourceCredentials
myCredentials.Name = My.Settings.ReportDataSource
myCredentials.UserId = My.Settings.DatabaseUser
myCredentials.Password = My.Settings.DatabasePassword
rptViewer.ServerReport.SetDataSourceCredentials(New Microsoft.Reporting.WebForms.DataSourceCredentials(0) {myCredentials})
rptViewer.ServerReport.SetParameters(parameters)
rptViewer.ServerReport.Refresh()
I have omitted some code which builds up the parameters for the report, but I doubt any of that is relevant.
The problem is that, when the user clicks the show report button, and this new page opens up, depending on the types of parameters they use the report could take quite some time to render, and in the mean time, the original page becomes completely unresponsive. The moment the report page actually renders, the main page begins functioning again. Where should I start (google keywords, ReportViewer properties, etc) if I want to fix this behavior such that the other page can load asynchronously without affecting the main page?
Edit -
I tried doing the follow, which was in a linked answer in a comment here:
$.ajax({
context: document.body,
async: true, //NOTE THIS
success: function () {
window.open(Address);
}
});
this replaced the window.open call. This seems to work, but when I check out the documentation, trying to understand what this is doing I found this:
The .context property was deprecated in jQuery 1.10 and is only maintained to the extent needed for supporting .live() in the jQuery Migrate plugin. It may be removed without notice in a future version.
I removed the context property entirely and it didnt seem to affect the code at all... Is it ok to use this ajax call in this way to open up the other window, or is there a better approach?
Using a timeout should open the window without blocking your main page
$('#btnShowReport').click(function () {
document.getElementById("Error").innerHTML = "";
var exists = CheckSession();
if (exists) {
setTimeout(function() {
window.open('<%=Url.Content("~/Reports/Launch.aspx?Report=Short&Area=1") %>');
}, 0);
}
});
This is a long shot, but have you tried opening the window with a blank URL first, and subsequently changing the location?
$("#btnShowReport").click(function(){
If (CheckSession()) {
var pop = window.open ('', 'showReport');
pop = window.open ('<%=Url.Content("~/Reports/Launch.aspx?Report=Short&Area=1") %>', 'showReport');
}
})
use
`$('#btnShowReport').click(function () {
document.getElementById("Error").innerHTML = "";
var exists = CheckSession();
if (exists) {
window.location.href='<%=Url.Content("~/Reports/Launch.aspx?Report=Short&Area=1") %>';
}
});`
it will work.
In my Rails 3 application I do:
render :js => "alert(\"Error!\\nEmpty message sent.\");" if ...
Sometimes, below this error message (in the same alert box) I see: "Prevent this page from creating additional dialogs" and a checkbox.
What does this mean ?
Is that possible not to display this additional text and checkbox ?
I use Firefox 4.
It's a browser feature to stop websites that show annoying alert boxes over and over again.
As a web developer, you can't disable it.
What does this mean ?
This is a security measure on the browser's end to prevent a page from freezing the browser (or the current page) by showing modal (alert / confirm) messages in an infinite loop. See e.g. here for Firefox.
You can not turn this off. The only way around it is to use custom dialogs like JQuery UI's dialogs.
You can create a custom alert box using java script, below code will override default alert function
window.alert = function(message) { $(document.createElement('div'))
.attr({
title: 'Alert',
'class': 'alert'
})
.html(message)
.dialog({
buttons: {
OK: function() {
$(this).dialog('close');
}
},
close: function() {
$(this).remove();
},
modal: true,
resizable: false,
width: 'auto'
});
};
Using JQuery UI's dialogs is not always a solution. As far as I know alert and confirm is the only way to stop the execution of a script at a certain point. As a workaround we can provide a mechanism to let the user know that an application needs to call alert and confirm. This can be done like this for example (where showError uses a jQuery dialog or some other means to communicate with the user):
var f_confirm;
function setConfirm() {
f_confirm = confirm;
confirm = function(s) {
try {
return f_confirm(s);
} catch(e) {
showError("Please do not check 'Prevent this page from creating additional dialogs'");
}
return false;
};
};
I designed this function to hopefully circumvent the checkbox in my web apps.
It blocks all functionality on the page while executing (assuming fewer than three seconds has passed since the user closed the last dialog), but I prefer it to a recursive or setTimeout function since I don't have to code for the possibility of something else being clicked or triggered while waiting for the dialog to appear.
I require it most when displaying errors/prompts/confirms on reports that are already contained within Modalbox. I could add a div for additional dialogs, but that just seems too messy and unnecessary if built-in dialogs can be used.
Note that this would probably break if dom.successive_dialog_time_limit is changed to a value greater than 3, nor do I know if Chrome has the the same default as Firefox. But at least it's an option.
Also, if anyone can improve upon it, please do!
// note that these should not be in the global namespace
var dlgRslt,
lastTimeDialogClosed = 0;
function dialog(msg) {
var defaultValue,
lenIsThree,
type;
while (lastTimeDialogClosed && new Date() - lastTimeDialogClosed < 3001) {
// timer
}
lenIsThree = 3 === arguments.length;
type = lenIsThree ? arguments[2] : (arguments[1] || alert);
defaultValue = lenIsThree && type === prompt ? arguments[1] : '';
// store result of confirm() or prompt()
dlgRslt = type(msg, defaultValue);
lastTimeDialogClosed = new Date();
}
usage:
dialog('This is an alert.');
dialog( 'This is a prompt', prompt );
dialog('You entered ' + dlgRslt);
dialog( 'Is this a prompt?', 'maybe', prompt );
dialog('You entered ' + dlgRslt);
dialog( 'OK/Cancel?', confirm );
if (dlgRslt) {
// code if true
}
This is a browser feature.
If you could, try to employ http://bootboxjs.com/, whit this library you can do the same of
alert("Empty message sent");
by writing:
bootbox.alert("Empty message sent", function(result) {
// do something whit result
});
You'll get a nice user interface too!
I have several expandable divs in a project I am creating and am saving their state between pages. My code is as follows and works perfectly in Firefox and IE.
On page load, get the existing saved dashboard state and open the divs that were previously saved:
$(function () {
//Load the saved dashboard state
var dashState;
if (!sessionStorage.getItem("dashState")) {
dashState = new Object({
saved: []
});
sessionStorage.setItem("dashState", JSON.stringify(dashState));
} else {
dashState = JSON.parse(sessionStorage.getItem("dashState"));
}
for (var i = 0; i < dashState.saved.length; i++) {
var currClient = $(dashState.saved[i]);
$(currClient.selector).css("display", "block");
var parent = $(currClient.selector).parent();
$(parent[0].children[0]).attr("src", "/Content/minus.ico");
$(parent[0].children[0]).attr("alt", "minus");
}
});
When a user clicks the expand button, save which div was expanded (or minimized) and add/remove it from the currently saved session.
function expandClick(clicked, target) {
var dashState = JSON.parse(sessionStorage.getItem("dashState"));
if (clicked.attr("src") == "/Content/minus.ico") {
target.css("display", "none");
clicked.attr("src", "/Content/plus.ico");
clicked.attr("alt", "plus");
//Remove from dashboard saved state
dashState.saved.pop(target);
} else {
target.css("display", "block");
clicked.attr("src", "/Content/minus.ico");
clicked.attr("alt", "minus");
//Add to dashboard saved state
dashState.saved.push(target);
}
sessionStorage.setItem("dashState", JSON.stringify(dashState));
}
Like I said, works great in Firefox and IE. My problem is Chrome. When the very last line of code executes, sessionStorage.setItem("dashState", JSON.stringify(dashState)); I get the error "Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable." I'm confused because in the debugger, dashState has been initiated. Is this a scope problem I'm missing?
Most likely an issue occurs when you push the jQuery objects to the list and try and stringify them. It is possible that parts of the object are cleaned up by the browser as once you stringify them, they fall out of scope (though usually stringifying DOM elements results in a circular reference exception). I'd suggest trying assigning a unique ID to each element and storing that in your saved list:
dashState.saved.pop(target[0].id);
dashState.saved.push(target[0].id);