StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POcodeigniter, jQuery Mobile, jQuery UI - scripts not loading on first load, only refresh
text
Body
copied!<p>I am having a confusing time with my codeigniter app.</p> <p>I have a view/form(view 1) which when submitted loads another view (view 2). view 1, on initial page load does not load the correct js and css. it instead loads the js and css from view 1. if I then hit refresh on view 2, the correct css and js is loaded.</p> <p>To prove my point I placed a test js script</p> <pre><code><script type='text/javascript'> alert('test'); </script> </code></pre> <p>as the first bit of code on both view 1 and view 2. on loading view 1 for the first time, the alert is shown, when I click submit on view 1 and view 2 is loaded the alert is not shown. if I refresh though the alert shows as desired.</p> <p>So js and css not loading correctly on initial load but on refresh works perfectly.</p> <p>Any ideas?</p> <p><strong>View 1</strong></p> <pre><code><script type='text/javascript'> alert('test'); </script> <html> <head> <title> Capture New Order </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> </head> <body> <div data-role="page" data-theme="a"> <div class="wrap-header"> <div data-role="header" data-mini="true" data-ajax="false"> <a data-icon="grid" data-mini="true" data-theme="a" onclick="window.location.href='/pointer'">Menu</a> <h3>New Order Details</h3> </div> </div> <div data-role="content"> <form id="sales_order_details" action="/sales/new_blank_order_lines" method="post"> <label for="customer">Select Customer</label> <div id="autocomplete_dropdown"> <input type="text" id="customer" name="customer" /> </div> <label for="period">Desired Order Period</label> <select id="period" name="period"> <option value="0"></option> <?php for($i = 0; $i <= 365; $i ++){ $startdate = strtotime("today + $i day"); $enddate = strtotime("today + " . ($i + 6) . " day"); if(date('D', $startdate) == 'Mon'){ echo '<option value="' . date('Y-m-d', $startdate) . '">' .date('d M y', $startdate) . " to " . date('d M y', $enddate) . "</option>"; } } ?> </select> <label>Choose an order type below and provide requested details</label> <div data-role="collapsible-set"> <div data-role="collapsible"> <h3> Auto Spread Order </h3> <label for="asuom">Unit of Measure for Order</label> <select id="asuom" name="asuom"> <option value="0"></option> <option value="Bundles">Bundles</option> <option value="Cubes">Cubes</option> <option value="Pieces">Pieces</option> </select> <label>Number of Cubes to Autospread</label> <input type="text" name="ascubes" id="ascubes"> <label>Products over which to spread</label> must work on this... <input type="submit" name="previous_order" id="previous_order" value="Continue"> </div> <div data-role="collapsible"> <h3> Previous Order </h3> <label>Select Order to use as template</label> <input type="submit" name="previous_order" id="previous_order" value="Continue"> </div> <div data-role="collapsible"> <h3> Blank Order </h3> <label for="buom">Unit of Measure for Order</label> <select id="buom" name="buom"> <option value="0"></option> <option value="cubes">Bundles</option> <option value="cubes">Cubes</option> <option value="pcs">Pieces</option> </select> <input type="submit" name="blank_order" id="blank_order" value="Continue"> </div> </div> </form> </div> </body> </html>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#customer").autocomplete({ source: "get_customers", messages: { noResults: '', results: function() {} } }); }); </script> </code></pre> <p><strong>View 2</strong></p> <pre><code><script type='text/javascript'> alert('test'); </script> <?php $newperiod = date('Y-m-d',strtotime($period) + (24*3600*6)); ?> <html> <head> <title> Capture blank Order </title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript"> function callAutocomplete(element) { $(element).autocomplete( { source: "get_sku_codes", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var selectedObj = ui.item; $.post('sales/get_sku_prices', {data:selectedObj.value},function(result) { $(ui).parent('tr').find('input[id^="pricepercube"]').val(result); }); } }); } $(function() { var counter = 1; jQuery("table.authors-list").on('change','input[name^="qty"]',function(event) { event.preventDefault(); counter++; var newRow = jQuery('<tr>'+ ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' + ' <td><input type="text" id="product' + counter + '" name="product' + counter + '" /></td>' + ' <td><input type="text" id="qty' + counter + '" name="qty' + counter + '" /></td>'+ ' <td><input type="text" id="price' + counter + '" name="price' + counter + '" /></td>'+ ' <td><input type="text" id="discount' + counter + '" name="discount' + counter + '" /></td>'+ ' <td valign=top><input type="checkbox" id="treated' + counter + '" name="treated' + counter + '" /></td>'+ ' </tr>'); jQuery('table.authors-list').append(newRow); callAutocomplete("#product"+ counter); }); $("#product").autocomplete( { source: "get_sku_codes", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var selectedObj = ui.item; $.post('<?=site_url("sales/get_sku_price")?>', {data:value},function(result) { $("#price").val(result); }); } }); }); </script> </head> <body > <div class="wrap-header"> <div data-role="header" data-mini="true" data-ajax="false"> <a data-icon="grid" data-mini="true" data-theme="a" onclick="window.location.href='/pointer'">Menu</a> <h3>New Blank Order</h3> </div> </div> <div data-role="content"> <center> <table width=80%><tr><td> <input type="text" name="customer" id="customer" value="<?php echo $customer; ?>" disabled> </td><td> <input type="text" name="period" id="period" value="<?php echo $period." to ".$newperiod; ?>" disabled> </td><td> <input type="text" name="buom" id="buom" value="<?php echo $buom; ?>" disabled> </td></tr></table> </center> </div> <table class="authors-list" border=0> <tr><td></td><td>Product</td><td>Qty</td><td>Price/Cube</td><td>Discount</td><td>treated</td></tr> <tr> <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td> <td><input type="text" id="product" name="product" /></td> <td><input type="text" id="qty" name="qty" /></td> <td><input type="text" id="price" name="price" /></td> <td><input type="text" id="discount" name="discount" /></td> <td valign="top" ><input type="checkbox" id="treated" name="treated" /></td> </tr> </table> </body> </html> </code></pre> <p><strong>Initial Page Load</strong> - no alert or js/css working - only css and js from view 1 <img src="https://i.stack.imgur.com/N8hGB.png" alt="enter image description here"></p> <p><strong>Refresh Load</strong> - no css or js from view 1, only view 2 css and js loaded. note I have removed all styling from view 2 just to test and get working. So below image is what I desire. alert is shown here. this is load after clsing alert. <img src="https://i.stack.imgur.com/A4gLa.png" alt="enter image description here"></p> <p>I have tried this in IE, Firefox and Chrome all with same result.</p> <p>Any advice is appreciated. thanks</p> <p><strong>UPDATE</strong></p> <p>View 1:</p> <pre><code><html> <head> <title> Capture New Order </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript"> $(document).on('pageshow', '#pagebody', function(){ $(function(){ $("#customer").autocomplete({ source: "get_customers", messages: { noResults: '', results: function() {} } }); }); }); </script>  </head> <body> <div data-role="page" data-theme="a"> <div class="wrap-header"> <div data-role="header" data-mini="true" data-ajax="false"> <a data-icon="grid" data-mini="true" data-theme="a" onclick="window.location.href='/pointer'">Menu</a> <h3>New Order Details</h3> </div> </div> <div data-role="content"> <form id="sales_order_details" action="/sales/new_blank_order_lines" method="post"> <label for="customer">Select Customer</label> <div id="autocomplete_dropdown"> <input type="text" id="customer" name="customer" /> </div> <label for="period">Desired Order Period</label> <select id="period" name="period"> <option value="0"></option> <?php for($i = 0; $i <= 365; $i ++){ $startdate = strtotime("today + $i day"); $enddate = strtotime("today + " . ($i + 6) . " day"); if(date('D', $startdate) == 'Mon'){ echo '<option value="' . date('Y-m-d', $startdate) . '">' .date('d M y', $startdate) . " to " . date('d M y', $enddate) . "</option>"; } } ?> </select> <label>Choose an order type below and provide requested details</label> <div data-role="page" data-theme="a" id="pagebody"> <div data-role="collapsible-set"> <div data-role="collapsible"> <h3> Auto Spread Order </h3> <label for="asuom">Unit of Measure for Order</label> <select id="asuom" name="asuom"> <option value="0"></option> <option value="Bundles">Bundles</option> <option value="Cubes">Cubes</option> <option value="Pieces">Pieces</option> </select> <label>Number of Cubes to Autospread</label> <input type="text" name="ascubes" id="ascubes"> <label>Products over which to spread</label> must work on this... <input type="submit" name="previous_order" id="previous_order" value="Continue"> </div> <div data-role="collapsible"> <h3> Previous Order </h3> <label>Select Order to use as template</label> <input type="submit" name="previous_order" id="previous_order" value="Continue"> </div> <div data-role="collapsible"> <h3> Blank Order </h3> <label for="buom">Unit of Measure for Order</label> <select id="buom" name="buom"> <option value="0"></option> <option value="cubes">Bundles</option> <option value="cubes">Cubes</option> <option value="pcs">Pieces</option> </select> <input type="submit" name="blank_order" id="blank_order" value="Continue"> </div> </div> </form> </div> </body> </html> </code></pre> <p>View 2:</p> <pre><code><?php $newperiod = date('Y-m-d',strtotime($period) + (24*3600*6)); ?> <html> <head> <title> Capture blank Order </title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).on('pageshow', '#pagebody', function(){ function callAutocomplete(element) { $(element).autocomplete( { source: "get_sku_codes", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var selectedObj = ui.item; $.post('get_sku_prices', {data:selectedObj.value},function(result) { $(element).parent().parent().find('input[id^="price"]').val(result); }); } }); } $(function() { var counter = 1; jQuery("table.authors-list").on('change','input[name^="qty"]',function(event) { event.preventDefault(); counter++; var newRow = jQuery('<tr>'+ ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' + ' <td><input type="text" id="product' + counter + '" name="product' + counter + '" /></td>' + ' <td><input type="text" id="price' + counter + '" name="price' + counter + '" /></td>'+ ' <td><input type="text" id="qty' + counter + '" name="qty' + counter + '" class="linetotal" /></td>'+ ' <td><input type="text" id="total' + counter + '" name="total' + counter + '" /></td>'+ ' <td><input type="text" id="discount' + counter + '" name="discount' + counter + '" /></td>'+ ' <td valign=top><input type="checkbox" id="treated' + counter + '" name="treated' + counter + '" /></td>'+ ' </tr>'); jQuery('table.authors-list').append(newRow); callAutocomplete("#product"+ counter); }); $("#product").autocomplete( { source: "get_sku_codes", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var selectedObj = ui.item; $.post('get_sku_prices', {data:selectedObj.value},function(result) { $("#product").parent().parent().find('input[id^="price"]').val(result[0]); }); } }); //code to calculate line cost (price*qty) var total=Number($('input[id^="price"]').val()) + Number($('input[id^="qty"]').val()); $('input[id^="total"]').val(total); //code to calculate Grand Total of all line costs (sum of all line totals) }); }); </script> </head> <body > <div data-role="page" data-theme="a" id="pagebody"> <div class="wrap-header"> <div data-role="header" data-mini="true" data-ajax="false"> <a data-icon="grid" data-mini="true" data-theme="a" onclick="window.location.href='/pointer'">Menu</a> <h3>New Blank Order</h3> </div> </div> <div data-role="content"> <center> <table width=80%><tr><td> <input type="text" name="customer" id="customer" value="<?php echo $customer; ?>" disabled> </td><td> <input type="text" name="period" id="period" value="<?php echo $period." to ".$newperiod; ?>" disabled> </td><td> <input type="text" name="buom" id="buom" value="<?php echo $buom; ?>" disabled> </td></tr></table> </center> </div> <table class="authors-list" border=0> <tr><td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>Line Total</td><td>Discount</td><td>treated</td></tr> <tr> <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td> <td><input type="text" id="product" name="product" /></td> <td><input type="text" id="price" name="price" /></td> <td><input type="text" id="qty" name="qty" onchange="fill()" /></td> <td><input type="text" id="total" name="total" class="linetotal" /></td> <td><input type="text" id="discount" name="discount" /></td> <td valign="top" ><input type="checkbox" id="treated" name="treated" /></td> </tr> </table> </div> </body> </code></pre> <p></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload