Search jQuery

jQuery Forum

Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

in Using jQuery • 12 years ago

Hi all

I'm trying to add extra DIVs after the first one on a page. This is for a CMS with form fields in them. Here is the first DIV:

<div class="OptExtra">
<h3>Additional Option</h3>
<label for="RESAddType">File type (i.e. “CD” or “Download”)</label>
<input name="RESAddType[]" type="text" id="RESAddType" size="48" class="FW" />
<label for="RESAddTitle">File title (i.e. “Boxed Set of 4 CDs”)</label>
<input name="RESAddTitle[]" type="text" id="RESAddTitle" size="48" class="FW" />
<label for="RESAddFType">File format (As “MP3” // “WORD” // “PDF”)</label>
<input name="RESAddFType[]" type="text" id="RESAddFType" size="48" class="FW" />
<label for="RESAddPrice">File price (Enter as “6.99” – <strong>NO “£” SIGN!</strong>)</label>
<input name="RESAddPrice[]" type="text" id="RESAddPrice" size="48" class="FW" />
<label for="RESAddFName">File name</label>
<input name="RESAddFName[]" type="text" id="RESAddFName" size="48" class="FW" />
<label for="RESAddTxt">File text</label>
<textarea name="RESAddTxt[]" id="RESAddTxt" cols="70" rows="50" class="mceAdvanced"></textarea>
<input type="button" value="Add another option" class="SubmitButton" onclick="inserter()" />
<hr />
</div>

The script I have is thus:

<script type="text/javascript">
function inserter()
{
$("<div class='OptExtra'><h3>Additional Option</h3><label for='RESAddType'>File type (i.e. “CD” or “Download”)</label><input name='RESAddType[]' type='text' id='RESAddType' size='48' class='FW' /><label for='RESAddTitle'>File title (i.e. “Boxed Set of 4 CDs”)</label><input name='RESAddTitle[]' type='text' id='RESAddTitle' size='48' class='FW' /><label for='RESAddFType'>File format (As “MP3” // “WORD” // “PDF”)</label><input name='RESAddFType[]' type='text' id='RESAddFType' size='48' class='FW' /><label for='RESAddPrice'>File price (Enter as “6.99” – <strong>NO “£” SIGN!</strong>)</label><input name='RESAddPrice[]' type='text' id='RESAddPrice' size='48' class='FW' /><label for='RESAddFName'>File name</label><input name='RESAddFName[]' type='text' id='RESAddFName' size='48' class='FW' /><label for='RESAddTxt'>File text</label><textarea name='RESAddTxt[]' id='RESAddTxt' cols='70' rows='50' class='mceAdvanced'></textarea><input type='button' value='Add another option' class='SubmitButton' onclick='inserter()' /></div><hr />").insertAfter(".OptExtra");
}
</script>

The problem is it duplicates all the previous DIVs that have been added. For instance by clicking the "Add another option" button when 1 DIV shows produces 2 DIVs. Click the button again and 4 DIVs appear, click again and 8 DIVS appear. Basically it inserts all the DIVs that are already on the page.

So basically I have three issues:

I want to be able to click the button and only 1 DIV is added at a time.
I want the H3 header to change to "Additional Option 1", "Additional Option 2" etc., when a new DIV is added.
The TinyMCE editor doesn't work in the additional DIVs created (mceAdvanced textarea class), any ideas why?

Kindest regards in advance
Glynn

Replies(10)

jay.blanc..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

1.Try using id's for the div's instead of classes to do the selecting.
2. use a counter of some sort like i++ to create a number each time the new div is added, this can be used in the new div id as well as the header text
3. I would be surprised if TinyMCE could see the dynamically added div's at all as I am not sure how it interacts with the DOM. It is like viewing the source of a page where things have been added to the DOM dynamically - you typically do not see the there.

wowdesign..

Re: Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Hi Jay

That's what I need to know, how to implement an increasing integra, such as using i=0 and then i++. Not sure where to place it on my code and how I can then add that number to the H3 header. I'm great with PHP, but not Javascript.

If I could get the DIV ID to increment too, i.e. <div id='OptExtra1'> and then <div id='OptExtra2'> I wouldn't mind using the ID tag instead of class. But an ID tag should be unique and used only once on a page in order to verify for a DocType of strict.

I guess this is the downside to Javascript created DIVs, that they aren't physical on the page or embedded in the HTML. Very frustrating that the TinyMCE editor doesn't work in these DIVs.

Do you know of any other way of creating physical duplicates of the DIV form fields?

Kindest regards and thanks for your time so far.

Cheers
Glynn

charlietfl

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Big misconception going on here that source and DOM are the same. Elements inserted with script are in the DOM, and they can be seen live in inspectors like Firebug or Chrome console.

WHen you view page source, that is only what is sent from server, prior to any client side manipulation. Once you introduce a bunch of script manipulation, source becomes fairly useless.

TinyMCE and other WYSIWYG's themselves manipulate the DOM and introduce dynamic elements, that can be seen in inspectors

If the new element is put in DOM before the script that looks for it fires, browser could care less if it was introduced by script or from source

jay.blanc..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

http://jsfiddle.net/jayblanchard/nq8PB/

You can actually take the onclick event (which you should anyhow, unobtrusive JavaScript and all that) out of it's inline position. You have to use id's for the divs, but you can name them with a trailing number as the function should be fairly portable.

I hope that this helps!

One other note, you may need to disable the clickable item in the 'previous' div once it has been clicked. Clicking the first item will add option 1 again, etc - weird behavior to be sure.

charlietfl

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Using classes not ID is actuall simpler and using parent() as the insertAfter position

Here's example along with where to call timy which assumes you are using jQuery plugin version

http://jsfiddle.net/nq8PB/41/

jay.blanc..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Thanks for the clarification Charlie!

wowdesign..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Dear Jay and Charlie

Thank you so much for this, works a like a dream and that jsfiddle site is awesome!

Sorry for the delay in getting back to you both, I've been hectic since finding out my gorgeous wife is expecting our first

One question, where do I insert the tinymce bit? I've tried un-commenting the statement, but nothing?

I have:

$(".addAnother").live('click', function() {
var $parent=$(this).parent();
var totOptions=$('.OptExtra').length;
$('<div class="OptExtra"><h3>Option '+ (totOptions+1) +'</h3><label for="RESAddType">File type (i.e. “CD” or “Download”)</label><input name="RESAddType[]" type="text" id="RESAddType" size="48" class="FW" /><label for="RESAddTitle">File title (i.e. “Boxed Set of 4 CDs”)</label><input name="RESAddTitle[]" type="text" id="RESAddTitle" size="48" class="FW" /><label for="RESAddFType">File format (As “MP3” // “WORD” // “PDF”)</label><input name="RESAddFType[]" type="text" id="RESAddFType" size="48" class="FW" /><label for="RESAddPrice">File price (Enter as “6.99” – <strong>NO “£” SIGN!</strong>)</label><input name="RESAddPrice[]" type="text" id="RESAddPrice" size="48" class="FW" /><label for="RESAddFName">File name</label><input name="RESAddFName[]" type="text" id="RESAddFName" size="48" class="FW" /><label for="RESAddTxt">File text</label><textarea name="RESAddTxt[]" id="RESAddTxt" cols="70" rows="10" class="mceAdvanced"></textarea><span class="addAnother">Add Another Option</span><hr /></div>').hide().insertAfter($parent).slideDown(500).addClass('noMCE');
// now div is in DOM can initate tinyMCE
$('.noMCE').removeClass('noMCE').find('textarea').tinymce()
});

Once again, many thanks both for your input, very much appreciated.

Kindest regards
Glynn

wowdesign..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Hi Charlie/Jay

Can you tell me what I need to do please?

Kindest regards
Glynn

charlietfl

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

I'm not very familiar with Tinymce, are you using a jQuery adapter plugin to intialize it currently? If not that would likely be path of least resistance

posting a link to page would help

wowdesign..

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

12 years ago

Hi Charlie

Thanks for getting back to me. I though the code you wrote at the bottom was to get it working, sorry.

I've extracted the page from the CMS and put it on my website:

http://www.wowdesignsolutions.com/testing/yahweh/index.php

The name of the main TinyMCE area is "mceAdvanced" and the simple version is "mceVSimple". At the bottom of the page when you click on "Add Another Option", the drop down works, but no TinyMCE.

These are the javascript links I use:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.wdsplugins.co.uk/javascript/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="http://www.wdsplugins.co.uk/javascript/preload_images.js"></script>
    <script type="text/javascript" src="http://www.wdsplugins.co.uk/javascript/gbcf_focus.js"></script>
    <script type="text/javascript" src="http://www.wdsplugins.co.uk/javascript/uncheck_boxes.js"></script>
    
    <script type="text/javascript" src="http://www.congyah.co.uk/coy_cms/javascript/ddaccordion.js"></script>
    
    <script type="text/javascript" src="http://www.congyah.co.uk/coy_cms/javascript/vertical_slide.js"></script>
    <script type="text/javascript" src="http://www.congyah.co.uk/coy_cms/javascript/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="http://www.congyah.co.uk/coy_cms/javascript/tiny_config.js"></script>

Many thanks
Glynn

Top Reply

Response title

Attachments

jQuery Forum

Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Replies(10)

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Re: Insert 1 DIV ONLY after previous DIV, without multiplying ALL previous DIVs

Statistics

Tags

Actions