Databases
StackOverflow2013
Postsdbo
POAdjust jQuery code to show/hide div in CodeIgniter
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdjust jQuery code to show/hide div in CodeIgniter
    text
    copied!<p>I'm moving my site from HTML/CSS into CodeIgniter. Have some experience with PHP, but not much with jQuery. </p> <p>The jQuery script I was using to <code>.show()</code>/<code>.hide()</code> <code>&lt;div&gt;</code>s worked fine with HTML pages, but doesn't work in CodeIgniter. I know what the script does (and I have attempted a few hours worth of modifications), but can't get it to function properly in CodeIgniter.</p> <p>Here's what's happening: When I click on the <code>&lt;a href=""&gt;</code> link, a new page opens, instead of opening the view into the <code>&lt;div&gt;</code>. Because of CodeIgniter's controllers, I'm not actually opening the page. I think this is where the difficulty is, but am not sure.</p> <p>On the CodeIgniter side: I’ve already autoloaded the JavaScript library, and I am calling the script in the header. Here’s the jQuery code (HTML below):</p> <pre class="lang-js prettyprint-override"><code>$(document).ready(function() { var hash = [removed].hash.substr(1); var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #content'; $('#content').load(toLoad) } }); $('#nav li a').click(function(){ var toLoad = $(this).attr('href')+' #content'; $('#content').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;'); $('#load').fadeIn('normal'); [removed].hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content).show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); }); </code></pre> <p>and the HTML:</p> <pre class="lang-html prettyprint-override"><code>&lt;div id="leftcol"&gt; &lt;div id="usermenu"&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="/option1"&gt;Option 1&lt;/a&gt;&lt;/li&gt;&lt;br /&gt; &lt;li&gt;&lt;a href="/option2"&gt;Option 2&lt;/a&gt;&lt;/li&gt;&lt;br /&gt; &lt;li&gt;&lt;a href="/option2"&gt;Messages&lt;/a&gt;&lt;/li&gt;&lt;br /&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;/div&gt; &lt;div id="rightcol" &lt;/div&gt; </code></pre>
 

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