Databases
StackOverflow2013
Postsdbo
POAdding array item to existing header tag, as data-toggle
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding array item to existing header tag, as data-toggle
    primarykey
    data
    text
    <p>I am currently building a website in expressionengine and would like to place a dynamic data-toggle to some header 3 tags that are also dynamically displayed on the webpage. When a user creates a "section" on the website it creates a <code>&lt;h3&gt;</code> and <code>&lt;div&gt;</code> which contains the information they input. This is all working fine however I wish to apply a data-toggle to the header 3 tag using Javascript (and an ID to the div once this is sorted). I have created a piece of javascript which follows:</p> <pre><code>$(function(){ {exp:channel:entries channel="page" dynamic="yes"} var toggles = new Array( {body}"{section_title}"{if row_count != total_rows},{/if}{/body} ); {/exp:channel:entries} $.each( toggles, function( i, val ) { $('.about-content h3').attr("data-toggle", val); }); }); </code></pre> <p>There is some expressionengine code in there but that is essentially a loop. So what happens is the loop grabs the title of sections on the webpage and then plonks int into the array. This all works fine and the output is as follows:</p> <p><code>var toggles = new Array("Values","Accreditations","Careers","Downloads");</code></p> <p><em>side note: I'm going to remove capitalised characters and spaces once this bit is sorted</em></p> <p>I haven't used arrays in JavaScript / jQuery before so I am struggling to output each entry as a data-toggle for h3 tags that are generated dynamically further in the page. The <code>&lt;h3&gt;</code> tags are already there so don't need to be created with the function.</p> <p>So there will be, in this example, four <code>&lt;h3&gt;</code> tags in a row. Can I go through each array item, and add the item to each <code>&lt;h3&gt;</code> one after another? </p> <p>At present when I inspect the element with Firebug it displays the code as such:</p> <pre><code>&lt;h3 data-toggle="Downloads"&gt;Values&lt;/h3&gt; &lt;h3 data-toggle="Downloads"&gt;Accreditations&lt;/h3&gt; &lt;h3 data-toggle="Downloads"&gt;Careers&lt;/h3&gt; &lt;h3 data-toggle="Downloads"&gt;Downloads&lt;/h3&gt; </code></pre> <p>But if I look at the source it displays as:</p> <pre><code>&lt;h3 data-toggle=""&gt;Values&lt;/h3&gt; &lt;h3 data-toggle=""&gt;Accreditations&lt;/h3&gt; &lt;h3 data-toggle=""&gt;Careers&lt;/h3&gt; &lt;h3 data-toggle=""&gt;Downloads&lt;/h3&gt; </code></pre> <p>Any help would be greatly appreciated. </p> <p>Thank you. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USKieran McClung
    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
    1. This table or related slice is empty.
    1. COAs you are adding attributes using jQuery it will be visible using inspect element with Firebug but not with source. Since source show what is rendered by web server
      singulars
      1. POAdding array item to existing header tag, as data-toggle
      1. USSatpal
    2. COOkay, that makes sense. Thanks for clearing that part up :)
      singulars
      1. POAdding array item to existing header tag, as data-toggle
      1. USKieran McClung
 

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