Develop Reference

JavaScript runtime error: InvalidStateError

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 });

"Error: A reference already exists for the specified id" how do I hide/fix this alert?

I'm developing a music app and if I were to go onto the page where you can play sounds, leave that page and then immediately revisit I get this error.
I've googled the problem and I can't seem to find anything similar at all.
I'm using the cordova media player and LowLatencyAudio plugin for my application.
Below is the code on the specified page and an image of the error I receive.
Any help would be greatly appreciated as I'm well and truly stuck!
<div class="drum" id="bass" ontouchstart="play('bass');" ontouchend="touchEnd(event);">Bass</div>
<div class="drum" id="highhat" ontouchstart="play('highhat');" ontouchend="touchEnd(event);">High Hat</div>
<div class="drum" id="snare" ontouchstart="play('snare');" ontouchend="touchEnd(event);">Snare</div>
<div class="drum" id="bongo" ontouchstart="play('bongo');" ontouchend="touchEnd(event);">Bongo</div>
<script type="text/javascript">
var lla;
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if( window.plugins && window.plugins.LowLatencyAudio ) {
lla = window.plugins.LowLatencyAudio;
lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/snare.mp3', 'assets/snare.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/highhat.mp3', 'assets/highhat.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/bongo.mp3', 'assets/bongo.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
}
}
function play(drum) {
document.getElementById(drum).className = 'drum touched';
lla.play('assets/' + drum + '.mp3');
}
function touchEnd(event) {
event.target.className = 'drum';
}
</script>
Error: A reference already exists for the audio id.

It looks like it is having an issue with lla.preloadFX being called for the same asset more than once. After reading the plugin doc, and the actual java code, This error is real a warning/notice and not an error. I have reformatted my example to show how I would ignore this message as it will not affect your application.
Here is an example:
function onDeviceReady() {
if( window.plugins && window.plugins.LowLatencyAudio) {
lla = window.plugins.LowLatencyAudio;
lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ if(msg != 'A reference already exists for the specified audio id.') { alert( 'Error: ' + msg ); } });
}
}
Using this code, you will see an error if there is a 'real' error, otherwise it will ignore the message about the resource already being loaded. This should resolve the issue.

actually deviceready event call function lla.preloadFX whenever you start the Application and preloadFx() try to load asset again those already loaded. so you can unload the assets on application exit by just handling backbutton event.
function onBodyLoad() {
document.addEventListener("backbutton", onBackButton, false);
}
function onBackButton() {
var assets=['bass','snare','highhat','bongo'];
for (x in assets) {
lla.unload(assets[x], function (msg) {}, function (msg) {});
}
navigator.app.exitApp();
}

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)

Get data (json format) from another domain without jsonp

How can i get data (json format) from another domain?
My problem is: I want to get data from: http://pin-codes.in/api/pincode/400001/
I have tried to use CORS but it didn't work.
My console is:
GET http://pin-codes.in/api/pincode/400001 [HTTP/1.1 200 OK 780ms]
Error Error
My code by client-script:
$(document).ready(function() {
$("#get_data_btn").click(function() {
var data_path = "http://pin-codes.in/api/pincode/400001";
$.getJSON(data_path, null)
.done(function(data) {
console.log("Success: " + data.status);
})
.fail(function(jqxhr, textStatus, error) {
console.log("Error Error");
});
});
});

You probably don't own the other domain right?
No problem at all. Never mind nay-sayers, in computing everything is a yay!
Just use a simple proxy on your server or look into YQL.
this simple query will work:
select * from json where url="http://pin-codes.in/api/pincode/400001/ "
Just test this link (bypassing cross-domain security bull$#!7).
It will get the data you requested as normal plain json (no jsonp) data wrapped in callback-function cbfunc.
Have a look at this question for further info (I did quite a lot of yql scrape answers on SO).
Update:
Here is a crude fiddle demonstrating the whole process: so you enter a url, click fetch and watch the magic happen: http://jsfiddle.net/NbLYE/
function getJSON(url) { //quick and dirty
var script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
}
function cbfunc(json){ //the callback function
if(json.query.count){
var data=json.query.results.json;
// do your work here, like for example:
//document.getElementById('output').innerHTML=data.toSource();
} else {
alert('Error: nothing found'); return false;
}
}
function fetch(url){ //scrape the url you'd want
var yql="select * " +
" from json" +
" where url='" + url + "';";
yql="http://query.yahooapis.com/v1/public/yql?q=" +
encodeURIComponent(yql) +
"&format=json" +
"&callback=cbfunc";
getJSON(yql);
}
That should get you started (and motivated that it is easy).
Hope this helps!

You don't have the correct CORS headers on your server.
You need to add
Access-Control-Allow-Origin: *
(or something similar) server-side to the response.
Edit: From the HTTP response, it appears you are using PHP. Use the header function in your response.
<?php header('Access-Control-Allow-Origin: *'); ?>

You can't do it using jquery only, you can use any server side script like PHP
Try using php,
<?php
echo file_get_contents('http://pin-codes.in/api/pincode/400001');
?>
Save above code in pincode.php and use jquery like,
$(document).ready(function() {
$("#get_data_btn").click(function() {
var data_path = "pincode.php";
$.getJSON(data_path, null)
.done(function(data) {
console.log("Success: " + data.status);
})
.fail(function(jqxhr, textStatus, error) {
console.log("Error Error");
});
});
});
Also read this

Can't run server side script using jquery

Firstly, thanks so much in advance for any help you might be able to give me on this!
Right, what I want to do, is to call a php script to run server side, which takes in a single value (which will be an email) and write it to a text file.
This is the .php file that I want run. I haven't added any of the email functionality, but after hours of trying I can't even seem to get it to create a text file and directory. If I run it in the IDE, it runs perfectly, it creates the script and displays the "test me" text at the bottom. However, when It runs from the jquery call, all it does it read the text at the bottom of the file. This is where I call it in jquery:
$(document).ready(function()
{
$("#emailForm").submit(function()
{
alert("Beginning jquery");
$("#div1").load("handleEmailAddresses.php");
alert("Load called");
//$.post("handleEmailAddresses.php");
});
I've also tried the post function you can see commented out. Nothing works. Here is the php file that is called:
<html>
<?php
$dir = 'myDir';
if ( !file_exists($dir) )
{
mkdir ($dir, 0777);//This just gives me r/w access to the folder
}
file_put_contents ($dir.'/test.txt', 'Hello File');
?>
Test Text
</html>
Please help, its killing me! Thanks so much!

Try Ajax
$.ajax({
url : '/handleEmailAddresses.php',
});
and if you want to check also:
$.ajax({
url : '/handleEmailAddresses.php',
}).done(function() {
console.log('completed');
});

Use This Script and try
Jquery:
$(document).ready(function()
{
$("#emailForm").submit(function(e)
{
e.preventDefault();
alert("Beginning jquery");
$("#div1").load("handleEmailAddresses.php", function(response, status, xhr) {
if (status == "error")
{
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
else
{
alert("Load Compleated");
}
});
});
PHP :
<?php
$dir = 'myDir';
if ( !file_exists($dir) )
{
if (!mkdir($dir, 0)) {
echo('Failed to create folders...');
exit;
}
}
$r = file_put_contents ($dir.'/test.txt', 'Hello File');
if ($r)
echo "Success";
else
echo "Error";
?>