asked on

Selecting multiple rows and updating fields dynamically based off of one click

I have a dynamically generated page that has multiple headings followed by multiple sets of collapse bootstrap menus. I need help in being able to click on "Delete" within multiple main headings and bolding the parent items ("X" marks) plus adding a value of "1" within the input field so I which items to delete. However I also need to be able to toggle the delete off and on individual "X" marks.

<div class="heading">
Heading Title 1
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_1" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_2" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_3" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


<div class="heading">
Heading Title 2
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_4" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_5" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_6" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Open in new window

stergium

Hello.
I am a bit confused on the delete and the X mark. The following should run on the end of your page.

$('div.delete').click(function(){
$(this).parent().find('input').val(1);
$(this).parent().css('font-weight','bold');
});

Open in new window

By clicking on the X , with class delete, i change the input value to 1 and setting bold on the parent div.
hope that helps

Chris Stanyon

This should do it. It will toggle the value from 0/1 and the weight from normal/bold

$('div.delete').click(function(e) {
    input = $(this).parent().find('input');
    value = (input.val() == 0) ? 1 : 0;
    weight = (input.val() == 0) ? 'bold' : 'normal';

    $(this).css('font-weight',weight);
    input.val(value);
});

Open in new window

brihol44

ASKER

I see the individual "X" delete works when I click on the "X" mark but when I click on the main title delete button none of the parent "X" marks or input fields fill in with 1

http://jsfiddle.net/h5K7L/

<div class="heading">
Heading Title 1
<div class="delete pull-right">
<a href="#">Delete</a>
</div>
</div>

Chris Stanyon

The 'Delete' link has no parent rows, so I'm assuming you mean the rows from the following 'panel-group'. You'll need 2 functions - one for the X clicks and one for the Delete clicks. Based on your HTML, this will do it:

$('.pull-right a').click(function(e) {
    e.preventDefault();
    $(this).parents('.heading').next('.panel-group').find('.panel-title').each(function() {
        $('.delete', this).css('font-weight','bold');
        $('input', this).val(1);
    });
});

$('div.delete').click(function(e) {
    input = $(this).parent().find('input');
    value = (input.val() == 0) ? 1 : 0;
    weight = (input.val() == 0) ? 'bold' : 'normal';

    $(this).css('font-weight',weight);
    input.val(value);
});

Open in new window

brihol44

ASKER

Ok, cool. I just have two issues and I tried doing this myself but for someone who could get this done in a second I thought I would ask...

http://jsfiddle.net/z2fQP/

I modified/cleaned it up a little but the one last thing I need to be able to do is toggle a input at the main heading area now in case I also want to delete the main category as well.

<a href="#">Delete</a> <input id="cat_1" type="text" value="">

So if I click the main "Delete" link at the header area it toggle them all 0 : 1 but the main toggle at the title should also fill in 0 : 1 based off the current value. I spent some time trying to do this but there's something I'm not quite getting. thx

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brihol44

ASKER

Thanks! Awesome

brihol44

ASKER

Hi Chris, looks like I needed to change this up a little using checkboxes so I can filter out just the checked values instead of all of them. I've tried to work this in but I can't seem to see where I'm going wrong. If I need to re-post for points no problem.

I added in checkboxes but I will end up hiding those anyways. I just have them visible for testing.

1. I basically need the exact same functionality as before but the checkboxes just checked instead of 0 or 1. And of course the individual checking which doesn't seem to be working as well.

Thanks for the help,

http://jsfiddle.net/Lrg3M/