Solved

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

Posted on 2014-03-03
8
383 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 42

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
 
LVL 42

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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 42

Accepted Solution

by:
Chris Stanyon earned 500 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now