JS not running first time HTML page loads

The javascript function does not run when the HTML page loads for the first time. However, if I do a page refresh, the script runs just fine.

Description :

My index page has a button which points to a showdata HTML page. The problem is that when I click the button in the index page, I can see (in the URL) that the showdata.html page is loaded but the JS code does not run (as I cannot see any alerts).

However, if I do a page refresh or hit the URL manually, the JS runs fine and I can see the alert statements.

Tried this on Chrome and Firefox and same results at both the places.

If I am not wrong the $(function() is a shorthand for $(document).ready. In any case, I've tried using both the syntax but the results are same.

The current code for the page is:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<script type="text/javascript"> 
    $(function() { alert("hello"); });
</script>
</head>
  <body></body>
</html>

I am unable to see the expected alert box when the page first loads. When I reload the page, the alert comes as expected.

Update:

I cleared the cache but no results.

Also, when I remove the

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

tag from the index page where the link to my current page is present, the JS fires correctly on the first load of the showdata.html page. However, this causes loss of styling in the index page.

Inside your .get, make sure you are specifying the type of data. By adding your "refresh" to .done, it tells AJAX to wait until after the success call to reload the table, I believe it will work. Another thing you can try, is put the javascript after your </table> in the body so the HTML table is always loaded first.

<script type="text/javascript">
$(function() {
    jQuery.get('filename.txt', function(data) {
    var lines = data.split("\n");  
    var newrow = "";
    for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
        newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
        $('#tableoverview').find('tbody:last').append(newrow);
        }
    },'text').done(function() {
                $("#tableoverview").table("refresh");
            });
}); 
</script>

You can also try $(document.body).ready which should not execute until after the body has loaded.

<script type="text/javascript">
$(document.body).ready(
    $(function() {
        jQuery.get('filename.txt', function(data) {
        var lines = data.split("\n");  
        var newrow = "";
        for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
            newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
            $('#tableoverview').find('tbody:last').append(newrow);
            }
        $("#tableoverview").table("refresh");
        });
    });
);
</script>

EDIT:

I did some research on this and you seem to be using a mix of the table widget and the reflow table widget .table("refresh");.
Have you tried removing that and using .table("reflow"); along with <table data-role="table" id="tableoverview" data-mode="reflow" class="ui-responsive table-stroke"> instead?

来源：https://stackoverflow.com/questions/25301412/js-not-running-first-time-html-page-loads

标签

javascript

jquery

html

webpage