JavaScript runtime error: InvalidStateError - javascript

I'm getting an "Unhandled Exception" error at this specific point of the code:
{
function loadAccount(accountId) {
// here->
$("#accountDetails").load('/RxCard/GetAccount', { accountid: accountId }, function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
}
I have no idea what is causing this. I'm trying to run an application that will save the changes a user submits. The error appears as soon as I click on the "save" button. Any help is appreciated. Thanks.

Try closing your $("#accountDetails").load with });

Related

Ajax call from dropdown select

I am trying to make an Ajax request to the page specified in the drop down menu. I have successfully used most of my script code in binding a mouse click to table rows, but it does not work in this case when I try it here. I get ReferenceError: fnsuccess is not defined. I did not get this ReferenceError when I used most of this script to bind a mouse click.
<script type="text/javascript">
function isValid(frm){
$("#courseinfo").hide();
$("#frm").validate();
var four04 = $("#frm :selected").val();
console.log('Testing console');
if (four04 == "404")
{
console.log("404");
var txt = ($(this).text());
$.ajax({url:"404.json", data:{coursename:txt}, type:"GET", dataType:"json",
success:fnsuccess, error:fnerror});
function fnsuccess(serverReply) {
if (serverReply && serverReply.info) {
$("#infohere").text(serverReply.info);
$("#courseinfo").show();
} else
fnerror();
}
function fnerror() {
alert("Error occurred");
$("#courseinfo").hide();
}
}
else
{
console.log("else 404");
}
}
</script>
Course -->
Rating
404 error
403 error
Fix:
<script>
function isValid(frm){
$("#otherPageContent").hide();
$("#frm").validate();
var dropDownSelected = $("#frm :selected").val();
if (dropDownSelected == "404")
{
var txt = ($(this).text());
$.ajax({url:"404_error.json",
data:{coursename:txt},
type:"GET",
dataType:"json",
success:fnsuccess,
error: function(xhr, status, error){
$("#infohere").text(
"The requested page was: 404_error.json" +
". The error number returned was: " + xhr.status +
". The error message was: " + error);
$("#otherPageContent").show();
}
}); // end of ajax
} // end of if 404
function fnsuccess(serverReply) {
if (serverReply && serverReply.info) {
$("#infohere").text(serverReply.info);
$("#otherPageContent").show();
}
}
return false; // pause message on screen
}
</script>
define function fnsuccess(serverReply) and fnerror outside isValid function

jQuery load 3 divs from single page

I am currently loading the same page 3 times with 3 different .load() calls. I am wanting to know if there is something I can do to optimize the code.
When I click a link currently it loads the page 3 times
$("#"+target).load(url + " #page", function(response, status, xhr){
if(status === "error")
{
$("#"+target).load('error.php?error=503 #page', function(response, status, xhr){
if(status === "error")
{
alert("Something has gone very wrong right now, please contact an admin quoting 'error.php'");
return;
}
}); // This should never fail but if it does kill the page
console.log('Content failed to load ' + xhr.status + ' ' + xhr.statusText);
//Force update the title to error
document.title = "Error";
$("#pageBreadcrumbs").load('error.php #breadcrumbs');
}
else
{
console.log('Content was loaded');
//Load the title dynamically
document.title = "Venus | " + name;
$("#pageBreadcrumbs").load(url + ' #breadcrumbs');
if(sidebar === true)
$("#pageSidebar").load(url + ' #sidebar');
}
Is there anyway I can shorten this to just 1 call to the url or error page and extract it from there?
You can use this code:
$.get(url, function(response) {
var $nodes = $(response);
... some conditions ...
var $container1 = $("#"+target).html('');
$nodes.find('#page').appendTo($container1);
... some conditions ...
var $container2 = $("#pageBreadcrumbs").html('');
$nodes.find('#breadcrumbs').appendTo($container2);
});
I'm not really sure that it works, but you can try it...
UPDATE
This code assumes that whole server response is wrapped in one container (div)

Casperjs catch console.log and console.error

I'am trying to catch site console.log and console.error by casperjs. In the case of console.log I have working code:
casper.on('remote.message', function(message) {
this.echo('remote message caught: ' + message);
});
But I can't figure out how to catch console.error. I need this for catching any resources error (like images not found).
There's also the page.error handler:
casper.on("page.error", function(msg, trace) {
this.echo("Error: " + msg, "ERROR");
});
Depending on which errors you need to catch, this one may be better.
Ok it's weird to answer my own question but I found a solution on a coderwall blog posted by dpashkevich:
casper.on('resource.received', function(resource) {
var status = resource.status;
if(status >= 400) {
casper.log('Resource ' + resource.url + ' failed to load (' + status + ')', 'error');
resourceErrors.push({
url: resource.url,
status: resource.status
});
}
});
Works brilliant
You can use the following event to get remote errors:
casper.on("resource.error", function(resourceError) {
this.echo("Resource error: " + "Error code: "+resourceError.errorCode+" ErrorString: "+resourceError.errorString+" url: "+resourceError.url+" id: "+resourceError.id, "ERROR");
});
Works like charm!

JavaScript Buttons don't work with a HTTPS Connection

When I go to the Games section of my website, the buttons work perfectly: http://sharepanel.net/games/
When I go to the page with a Secure SSL connection, the buttons don't do anything: https://sharepanel.net/games/
Am I missing something?
This is the Javascript code for the buttons:
<script>
function getPage(el,page){
$(el).load(page, function(response, status, xhr) {
if (status == "error") {
var msg = "Error While Loading Page: ";
$(el).html(msg + xhr.status + " - " + xhr.statusText);
}
});
}
$(function(){
$("#top10").on("click",function(){
getPage("#main","/games/top10.php");
});
$("#action").on("click",function(){
getPage("#main","action.php");
});
$("#adventure").on("click",function(){
getPage("#main","adventure.php");
});
$("#timemanage").on("click",function(){
getPage("#main","timemanage.php");
});
$("#fungames").on("click",function(){
getPage("#main","fungames.php");
});
$("#newgames").on("click",function(){
getPage("#main","newgames.php");
});
$("#randomgames").on("click",function(){
getPage("#main","randomgames.php");
});
});
</script>
Thanks for all the help guys,
I just fixed this by saving all the jQuery files to my website and replacing the urls to the jQuery code to the urls on my webserver.
Thanks
Hrach

XMLRequest ResponseText is blank

I've got a JavaScript function that I want to report an alert message to the users if it successfully updates the database, or if it has an error.
In the main X.JSP file I have:
function startRequest(pChange)
{
//alert("startRequest");
createXmlHttpRequest();
//alert("sending message");
//var u1=document.f1.user.value;
//alert("Running startRequest for: " + pChange.id);
//xmlHttp.open("GET","updateEntry.jsp&pID=pChange.id&pStatus=pChange.status&pAddress=pChange.address&pDate=pChange.date&pNotes=pChange.note&pAssigned=pChange.assigned" ,true)
xmlHttp.open("GET","updateEntry.jsp?pID=" + pChange.id + "&pAddress=" +pChange.address + "&pStatus=" + pChange.status +"&pNote=" + pChange.notes +"&pAssigned=" +pChange.assigned ,true)
//alert(xmlHttp.responseText);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
function handleStateChange()
{
//alert("handleStateChange");
var message = xmlHttp.responseText;
alert("Return Code:" + message);
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//alert("test2");
//alert("recieved Message");
var message = xmlHttp.responseText;
alert(message);
}
}
else
{
alert("Error loading page"+ xmlHttp.status +
":"+xmlHttp.statusText);
}
}
I then run a method in updateEntry.jsp that does a number of things, but of interest is this section:
if(nId.equals("NMI")||nId.equals("MI")||nId.equals("NI")||nId.equals("SA")||nId.equals("S"))
{
org.hibernate.Query query2 = session2.createQuery("update Leads set Status = :nstatus where Id = :nid");
query2.setParameter("nid", nId);
query2.setParameter("nstatus", nstatus);
query2.executeUpdate();
out.println("Update successfully with: " + nstatus);
// Actual contact insertion will happen at this step
session2.flush();
session2.close();
}
else
{
out.println("Status must be: NMI, MI, NI, SA or S");
}
My understanding is that this should only create a single alert, if the function completes successfully. Instead it creates like 9 alerts all of which are blank. What am I doing wrong? I'm seeing both the "Return Code: " message and a blank " " message, (two different sections of code) but both output blank message variables.
If the readystate is not 4, it does not mean it is an error. Ajax has multiple states that inform the clientside about what is happening. Your code says that those connection states are all errors.
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//alert("test2");
//alert("recieved Message");
var message = xmlHttp.responseText;
alert(message);
} <-- your else should most likely be up here
}
else <-- this is incorrect
{
alert("Error loading page"+ xmlHttp.status +
":"+xmlHttp.statusText);
}
Read the document at MDN - Ajax Getting Started

Categories

Resources