Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript not working when loaded in header view in Codeigniter
    primarykey
    data
    text
    <p>I am using Twitter Bootstrap and Codeigniter. I am also using a Template system.</p> <p>In the header view, I load both jquery.min.js and bootstrap.min.js and the paths are found as I can click and see the code when I do view-source.</p> <p>In my controller, I have the following to generate the view:</p> <pre><code>$this-&gt;template-&gt;set_partial('header', 'layouts/admin_header'); $this-&gt;template-&gt;set_partial('footer', 'layouts/admin_footer'); $this-&gt;template-&gt;set_partial('sidebar', 'layouts/admin_sidebar'); $this-&gt;template-&gt;build('admin/category/order', $this-&gt;data); </code></pre> <p>In the header layout view, I have:</p> <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="&lt;?=base_url();?&gt;assets/admin/js/bootstrap.min.js"&gt;&lt;/script&gt; </code></pre> <p>Now, in the order.php view, if I just have the following, the button doesn't work:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#button').button(); $('#button').click(function() { $(this).button('loading'); }); }); &lt;/script&gt; &lt;button class="btn" id="button" data-text-loading="Loading..."&gt;Press Me&lt;/button&gt; </code></pre> <p>If I change the view to this, it does work (the only changed is that I repeated the bootstrap.min.js from the header into the actual view above the jQuery):</p> <pre><code>&lt;script src="&lt;?=base_url();?&gt;assets/admin/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#button').button(); $('#button').click(function() { $(this).button('loading'); }); }); &lt;/script&gt; &lt;button class="btn" id="button" data-text-loading="Loading..."&gt;Press Me&lt;/button&gt; </code></pre> <p>If I view-source after the whole page is generated, the bootstrap.min.js is found twice, once in the header, and again directly above the button jQuery.</p> <p>I can put other jQuery into this page and it works perfectly fine. It's only the Twitter Bootstrap javascript that has issues.</p> <p>This is driving me absolutely nuts, does anyone know why it's doing this? I really do not want to have to add the bootstrap.min.js to each individual view...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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