Note that there are some explanatory texts on larger screens.

plurals
  1. POkilling loaded view before load another one
    text
    copied!<p>I am loading four different views using query. It is working fine for loading only. Now I want to kill the loaded view before loading new one. For example, when website is loaded, the first view is loaded. Then when user clicks any other link then before loading second view the first view should killed first before the new one is loaded. How can I achieve this. Here is my code</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt; &lt;meta http-equiv="Content-Language" content="en-us" /&gt; &lt;style type="text/css"&gt; .header { width: 100%; height: 50px; background: lightblue; } .header ul { margin: 0; padding: 0; list-style: none; } .header ul li { float: left; margin-right: 50px; } .container { width: 100%; height: 500px; background: lightgreen; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $('.container').load('viewone.html'); $('.header ul li a').click(function() { var el = $(this).attr('rel'); $('.container').load(el + '.html'); return false; }); }); &lt;/script&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class='header'&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" rel='viewone'&gt;Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" rel='viewtwo'&gt;Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" rel='viewthree'&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" rel='viewfour'&gt;Link 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class='container'&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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