Databases
StackOverflow2013
Postsdbo
POjQuery toggle, display animation and load url
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggle, display animation and load url
    primarykey
    data
    text
    <p>I started learning php and smarty few months ago, all is going good so far. Now I came to the point where I need to use jQuery.</p> <p>I have a list of articles which I want to load into div without reloading the page. This is my html/smarty code:</p> <pre><code>&lt;a class="title" id="link_{$val.id}" href="#id{$val.id}" onclick="load('{$baseurl}/read-{$val.id}.html');return false;"&gt;{$val.title}&lt;/a&gt; &lt;div id="loadingDiv_{$val.id}" style="display:none"&gt; &lt;img src="{$templatepath}/images/loading.gif" /&gt; &lt;/div&gt; &lt;div id="Loaded_{$val.id}" class="full-article"&gt; &lt;/div&gt; </code></pre> <p>What I'm trying to do is when I click on link, I want the <code>&lt;div id="loadingDiv"&gt;</code> to toggle down displaying my loading animation while the page is being loaded and when it's ready I want the animation to go away and load the content of my page into my <code>&lt;div id="Loaded_{$val.id}"&gt;&lt;/div&gt;</code>. When my visitors finish reading chosen article, I want them to be able to click on that link again and toggle the <code>&lt;div id="Loaded_{$val.id}"&gt;&lt;/div&gt;</code> up.</p> <p>I've been looking for hours now and can't get it to work. I tried using this</p> <pre><code>&lt;script&gt; function load(url){ var target = event.target.id; $("#Loaded_"+target).toggle(); $("#Loaded_"+target).load(url); } &lt;/script&gt; </code></pre> <p>and it kinda works but there are 3 major problems with my code:</p> <ul> <li><p>it toggles down, loads the page into div but when I click the link again it toggles up and loads the page again so every toggle down and toggle up adds 2 views to my article</p></li> <li><p>it works in chrome but doesn't work in firefox</p></li> </ul> <blockquote> <p>-- ReferenceError: event is not defined</p> </blockquote> <ul> <li>can't get the loading animation to show</li> </ul> <p>I'm not looking for complete solution, I would like to know which functions do I need to use/combine to achieve what I want. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAngelika
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery toggle, display animation and load url
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery toggle, display animation and load url
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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