locked
simple .each statement is failing RRS feed

  • Question

  • User1868852945 posted

    The below code will pad multiple columns in a select list for presentation purpose.  I got it from a jfiddle example but for some reason I cannot get the initial .each statement to work.  Can someone please advise on what I have wrong?  Thanks.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style type="text/css">
    *, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1vw;
    margin: 0px;
    padding: 0px;
    }

    #timezones {
    height: auto;
    }

    select {
    font-family:"Courier New", Courier, monospace
    }
    </style>

    <script type="text/javascript">

    alert("top of java");

    var spacesToAdd = 5;
    var biggestLength = 0;

    $("#timezones option").each(function () {
    alert("looping in the select list");  // this never gets invoked because the above .each is failing
    var len = $(this).text().length;
    if (len > biggestLength) {
    biggestLength = len;
    }
    });

    var padLength = biggestLength + spacesToAdd;

    $(function () { //begin overall function

    $("#timezones option").each(function () {
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for (var x = 0; x < (padLength - strLength) ; x++) {
    parts[0] = parts[0] + ' ';
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0') + '+' + parts[1]).text;
    });

    }) //end of overall function

    </script>
    </head>
    <body>
    <select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +12:00 </option>
    <option value="2">Australia/Brisbane +10:00 </option>
    <option value="3">Aust +10:00 </option>
    <option value="3">A +10:00 </option>
    </select>
    </body>
    </html>

    Monday, June 13, 2016 2:29 PM

Answers

  • User753101303 posted

    And if using F12, Console to check for JavaScript errors ?

    Ah my link was wrong. What if you try https://code.jquery.com/jquery-1.12.4.min.js instead? Also always with F12, Network you should have seen that the http request for the JavaScript file returned a 404 not found error.

    Debugging is IMO much easier when you focus first on what happens so that you can then  fix the exact problem you found (rather than starting too early to fix your code without even knowing yet what is the exact problem).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 13, 2016 4:23 PM

All replies

  • User-1672470423 posted

    Based on the code you posted. Try moving script below select control.

    Your script is getting called before control is initialized.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style type="text/css">
    *, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1vw;
    margin: 0px;
    padding: 0px;
    }

    #timezones {
    height: auto;
    }

    select {
    font-family:"Courier New", Courier, monospace
    }
    </style>


    </head>
    <body>
    <select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +12:00 </option>
    <option value="2">Australia/Brisbane +10:00 </option>
    <option value="3">Aust +10:00 </option>
    <option value="3">A +10:00 </option>
    </select>

    <script type="text/javascript">

    alert("top of java");

    var spacesToAdd = 5;
    var biggestLength = 0;

    $("#timezones option").each(function () {
    alert("looping in the select list");  // this never gets invoked because the above .each is failing
    var len = $(this).text().length;
    if (len > biggestLength) {
    biggestLength = len;
    }
    });

    var padLength = biggestLength + spacesToAdd;

    $(function () { //begin overall function

    $("#timezones option").each(function () {
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for (var x = 0; x < (padLength - strLength) ; x++) {
    parts[0] = parts[0] + ' ';
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0') + '+' + parts[1]).text;
    });

    }) //end of overall function

    </script>
    </body>
    </html>

    Monday, June 13, 2016 2:35 PM
  • User-474980206 posted

    the javascript code is running before the html elements are created. move the script to after the select html, or place in $.ready()

    Monday, June 13, 2016 2:36 PM
  • User753101303 posted

    Hi,

    It always best to tell exactly how it fails rather than just that it doesn't work. For now it seems you included jquery ui but not jquery. What if you try https://code.jquery.com/jquery-1.11.4.min.js instead (not sure you really want jQuery UI).

    Also it's best to include this kind of script in a document.ready function (see the doc) to ensure the function runs once the whole HTML page is loaded (if it runs before the remaining of the page is loaded, it could for example not fiond HTML elements because they have not yet been parsed).

    Monday, June 13, 2016 2:41 PM
  • User1868852945 posted

    This did not work.  After moving script below select control, the alert("looping in the select list"); still does not fire. (as well as everything else).

    Also, https://code.jquery.com/jquery-1.11.4.min.js did not help.

    Monday, June 13, 2016 3:52 PM
  • User753101303 posted

    And if using F12, Console to check for JavaScript errors ?

    Ah my link was wrong. What if you try https://code.jquery.com/jquery-1.12.4.min.js instead? Also always with F12, Network you should have seen that the http request for the JavaScript file returned a 404 not found error.

    Debugging is IMO much easier when you focus first on what happens so that you can then  fix the exact problem you found (rather than starting too early to fix your code without even knowing yet what is the exact problem).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 13, 2016 4:23 PM
  • User-1672470423 posted

    Link provided above is redirecting to old one. So just copy paste new one.

    Monday, June 13, 2016 4:50 PM
  • User753101303 posted

    The correct link should be what is shown that is:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    BTW your own site uses https?

    Monday, June 13, 2016 5:01 PM
  • User1868852945 posted

    1.12.4 was the solution - will handle the select options, $("#timezones option").each.  Thanks

    Monday, June 13, 2016 5:41 PM