[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2014-03-03
8
Medium Priority
?
395 Views
Last Modified: 2014-03-08
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

0
Comment
Question by:brihol44
  • 4
  • 3
8 Comments
 
LVL 13

Expert Comment

by:stergium
ID: 39902568
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
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39903024
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

0
 

Author Comment

by:brihol44
ID: 39905610
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>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39905968
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

0
 

Author Comment

by:brihol44
ID: 39911549
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
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39912063
OK. You've changed the code around slightly so now clicking on the Delete link won't toggle the bold on and off, and it toggles the values individually from 0:1, rather than toggle them all at the same time, so if you have values of 0:1:0 the toggle will switch them to 1:0:1 - is that what you intended. You also have several element in your page with the same ID - IDs need to be unique. You should probably switch to classes (div class="group")

I've updated the fiddle to toggle the new input so have a play:

http://jsfiddle.net/ChrisStanyon/z2fQP/1/
0
 

Author Closing Comment

by:brihol44
ID: 39914771
Thanks! Awesome
0
 

Author Comment

by:brihol44
ID: 39915350
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/
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question