Javascript load file fails without error - javascript

When I run this:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
try {
$("#div1").load("demoddd.txt"); //there is no demoddd.txt
}
catch (err)
{
alert("Error: " + err); //this never runs
}
finally {
alert("Finally");
}
});
});
</script></head>
<body>
<button id="btn">Load file</button>
<div id="div1"></div>
</body>
</html>
I get "Finally" but no error. In the debug console, I see the 404. Can I trap 404 errors when using the load() function?

Use the complete function as shown in the documentation:
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});

You need to get the httprequest status, you can't catch an 404 with that catch.
Use this:
$("#div1").load("/demoddd.txt", function(responseText, statusText, xhr){
if(statusText == "success")
alert("Successfully loaded!");
if(statusText == "error")
alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
});
The first thing I would try is to set the full URL, and not a relative one. See if that works first.

Related

statusTxt, jqXHR not working in Iframe jQuery

I am trying to get the responseTxt, statusTxt, jqXHR output but it is not working in the iframe instead it only working in the load function. I have seen the related threads but it was not helpful.
I am trying after load iframe it will show an alert as LOADED as in my code but it not working.
Could you please help me to create this function how I get responseTxt, statusTxt, jqXHR response while iframe src change?
$(document).ready(function() {
$(document).on("click", "li> a[target='iframeload']", function(e) {
e.preventDefault();
var designation = $(this).attr("href");
if (!window.navigator.onLine) {
alert("Net Lost");
return false;
} else {
$("iframe#iframeID").attr("src", designation, function(responseTxt, statusTxt, jqXHR) {
if (statusTxt == "success") {
alert("LOADED");
} else {
if (statusTxt == "error") {
alert("Error : " + jqXHR.status + " " + jqXHR.statusText);
return false;
}
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sapui5 - javascript error handling - without try-catch in every callback

I am developing a SAPUI5-App. Is there a way to show all errors directly to the customer without having to put a try-catch-block into every callback of sapui5? He will use my app in a mobile device and wouldn´t be able to see the log.
I tried already the following code:
<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
var extra = !col ? '' : '\ncolumn: ' + col;
extra += !error ? '' : '\nerror: ' + error;
alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);
return false; //true = suppress error alert
};
window.addEventListener("error", handleError, true);
function handleError(evt) {
if (evt.message) {
alert("error: "+evt.message +" at linenumber: "+evt.lineno+" of file: "+evt.filename);
} else {
alert("error: "+evt.type+" from element: "+(evt.srcElement || evt.target));
}
}
jQuery.sap.log.addLogListener({
onLogEntry : function(oLogEntry) {
if(oLogEntry.level == '1'){
alert(oLogEntry.details + ' - '+oLogEntry.message);
}
}});
</script>
But I like to actually copy the error-message from the log into an alert for the customer, so he can send me screenshots of the error in his device.
All my attempts did not show enough information or didn´t fire on every error in the console-log.

Loading contents of PHP file with AJAX script

I'm trying to load the contents of a php file into a script using AJAX with the following code:
<button onclick="changeText3()"><img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'></button>
<script> function changeText3(){
$("#test").click(function(){
$("#test").load("file.php");
}
}
</script>
<div id='test'>test</div>
Nothing happens when I click anything. I'm brand new to AJAX and am likely missing something simple. I've tried a number of different methods I've seen and I've had no luck.
<button id="showOutput">
<img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'>
</button>
<script>
$(document).ready(function(){
$("#showOutput").click(function(){
$("#test").load("file.php");
});
});
</script>
<div id='test'>test</div>
Here we can see that as you tried JQuery so I removed JS function and catch JQuery event.
You should try to specify file.php's whole address in your ajax call like this -
$("#test").click(function(){
$("#test").load('url to home.php');
});
If that won't solve the case, you should log a bit more of your ajax response and you'll be able to easily observe and solve it by yourself, like this:
$("#test").load("home.php", function(response, status, xhr) {
if (status == "error") {
console.log(msg + xhr.status + " " + xhr.statusText);
}
});
Check your console for errors.
Corrected your code. You don't need a Event listener, cause you already use onclick="changeText3()"
function changeText3(){
$("#test").load("test.php", function(response, status, xhr) {
if (status == "error") {
console.log(msg + xhr.status + " " + xhr.statusText);
}
});
}

How to tie bind and load methods?

Loaded content on the page to another page. If the information is read incorrectly, then you should use the bind () method to display a message about it. How to do it?
$("#result").load("university.html");
If you just want to know if the request succeeded, you can use a callback function.
$("#result").load("university.html", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});

Content loading with Ajax and Jquery

I would like some content to be loaded into my div on page load, but then I would like to have buttons which will load up new content, and replace the content in the DIV currently.
This is my HTML:
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
This is my Javascript:
$(document).ready(function(){
$('#aboutlink').click(function(){
$('#contentbox').load('/includes/about-info.html');
});
$('#testlink').click(function(){
$('#contentbox').load('/includes/test-info.html');
});
})
http://jsfiddle.net/spadez/GCg4V/1/
I just wondered what I have done wrong, because when I tried this on my server it didn't load up any content. I was also wondering if there is a better way to achieve something like this, because it doesn't seem like I can do any loading binding to it.
Thank you for any help or advice you can give.
The load method will only set the html of the first matched element if the status is (200 OK).. If it is something other than this, like (404 Not Found) or (403 Forbidden) , then it won't set the html..
To set it regardless of the response, try this jsFiddle I edited.
First try something like this:
$.get('/includes/test-info.html', data, function(data){alert(data);})
And then you'll be able to see exactly what is being returned.
I think its something to do with how you have specified the urls for the load.
Try something like
$(document).ready(function () {
$('#aboutlink').click(function () {
$('#contentbox').load('includes/about-info.html');
});
$('#infolink').click(function () {
$('#contentbox').load('includes/test-info.html');
});
})
without the leading "/"
Okay then run this code to check what happening out there:
<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#aboutlink').click(function () {
$('#contentbox').load('/includes/about-info.html', function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
$('#infolink').click(function () {
$('#contentbox').load('/includes/test-info.html', function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
})
</script>
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
<div id="error"></div>

Categories