CODEWITHSUNDEEP
jquery
BruceyBandit
BruceyBandit

Reputation: 4324

I want buttons to be displayed once, not twice

I have 2 buttons which are both displayed twice like below:

Button 1 (Performs the onclick='SelectAll(this)')
Button 1 (Performs the onclick='RemoveAll(this)')

Button 2 (Performs the onclick='SelectAll(this)')
Button 2 (Performs the onclick='RemoveAll(this)')

Both Button 1 and Button 2 should appear once like below:

Button 1 (Performs the onclick='SelectAll(this)')
Button 2 (Performs the onclick='RemoveAll(this)')

How can I achieve this above:

The code which displays these buttons are below:

function insertButton(form) {   


var $answer = $("<table class='answer'></table>");

$('.buttonOne:first, .buttonTwo:first').each(function() {
        var $this = $(this);
        var $BtnsClass = '';

        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);


        $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' />
        <br/>
        <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />")
        .attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));

        $BtnsClass.appendTo($cell);

    });  

        $tr.append($answer);

        }

Below is the html where the buttons in the jquery should match to

<p><input class="buttonOne btnsAll" name="allBtnsName" type="button" value="Button 1" onClick="selectAll(this);" />
<br/><input class="buttonTwo btnsRemove" name="allRemoveBtnsName" type="button" value="Button 2" onClick="removeAll(this);" /></p>

The html buttons only display each button once which is fine, so why is the jquery displaying the buttons twice and not once?

Upvotes: 1

Views: 286

Answers (4)

Tai Kahar
Tai Kahar

Reputation: 304

You could use jQuery.template Plugin

Example: http://jsfiddle.net/8rGe4/1/

Upvotes: 0

TLS
TLS

Reputation: 3150

Well, what you've got there in your code is a conversion function. It's taking the first instance of .buttonOne and the first instance of .buttonTwo and inserting two input type="button" tags for each one. Based on your code example, you're probably seeing is this as the output:

Button 1
Button 2

Button 1
Button 2

If that's the case, then you have some options to get it down to just one instance of each button. The simplest would be to remove the .buttonTwo:first from the selector where you activate the each call. This will make it convert only the first instance of .buttonOne into the two input tags.

Another option would be to split the each method into two separate calls - one for .buttonOne:first and one for .buttonTwo:first - so that the action only creates a single input tag for each matching element. You'd also need to modify the code to only insert a single input tag rather than the two tags that it's doing now.

A third option would be to make the code in the each function smart enough to look at the $this object and get the correct button CSS class (buttonOne or buttonTwo) and then create the correct input tag based on that class. That could require a bit of work to rewrite the code you have to give it that intelligence, but you'd end up with a more streamlined approach.

You could try something like the following (NOTE: UNTESTED):

    function insertButton(form) {
    var $answer = $("<table class='answer'></table>");

    $('.buttonOne:first, .buttonTwo:first').each(function() {
        var $this = $(this);
        var $BtnsClass, clickEvent = '';

        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);

        if ($this.hasClass('buttonOne')) {
            clickEvent = 'selectAll(this);';
        }
        else if ($this.hasClass('buttonTwo')) {
            clickEvent = 'removeAll(this);';
        }

        $BtnsClass = $("<input type='button' style='display: block;' onClick='" + clickEvent + "' />")
                .attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        $BtnsClass.appendTo($cell);
        });

    $tr.append($answer);
    }

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

I think you are looking for some functionality like below, 

function insertButton(form) {   

    var $answer = $("<table class='answer'></table>");

    var $btnOne = $('.buttonOne:first');
    var $btnTwo = $('.buttonTwo:first');

    var $BtnsClass = '';

    $row = $("<tr/>").appendTo($answer);
    $cell = $("<td/>").appendTo($row);

    $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' />
        <br/>
        <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />");

    $BtnsClass.attr('name', $btnOne.attr('name')).attr('value', $btnOne.val()).attr('class', $btnOne.attr('class')).appendTo($cell);

    $BtnsClass.attr('name', $btnTwo.attr('name')).attr('value', $btnTwo.val()).attr('class', $btnTwo.attr('class')).appendTo($cell);

    $tr.append($answer);
}

Upvotes: 1

Eirinn
Eirinn

Reputation: 836

The each function is triggering twice because it triggers once per selector... Even the selector doesn't look right.

function insertButton(form)
{
     var btn1 = $(document.createElement('button'));
         btn1.attr("name" somename);

     var btn2 = $(document.createElement('button'));
         btn2.attr("name" somename);

     $(form).append(btn1).append(btn2);
}

Your code is super confusing, but i think this is what you want? Or something like it?

Upvotes: 0

Related Questions