Sync active panel with active modal with switch button

Question

I have a row of panels with an active button in each one. In each panel there are a option to edit the panel too, so when it's click to the orange icon (see fiddle below), it's open a modal and shows a list of options, including another button to active the panel that you have clicked from the modal. I want to sync the active button of the modal to the panel that you have clicked, so if i clicked in the panel 3 and in the modal y activated it and click on save changes, the panel 3 will be activated.

JSFiddle: http://jsfiddle.net/FG228/2/

HTML structure of one of the panels:

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="2" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">

      <div class="ptitle">Task 2</div>
       <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="2"></span>
<div class="miniswitch">
    <input type="checkbox" data-id="12">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
  </div>
    </div>
    </div>
    <div class="panel-body">
      <div class="row">  
        <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong><span>&nbsp;/cron/test</span>/task2
        </div>
      </div>
    </div>
    </div>
  </div>

JS structure of the switch icons of each panel (miniswitch icons):

 $(".miniswitch").click(function () {
    var $panel = $(this).closest('.panel');
    $panel.toggleClass('panel-off2 panel-success');
    $(this).find('input').prop('checked', $panel.hasClass('panel-success'))

});

JS structure of the switch icons of the modal (miniswitchmodal icons):

 $('.miniswitchmodal input[type=checkbox]').click( function(){
                $( "#chkActive" ).toggleClass("green");
            $( ".ui-widget-header" ).toggleClass("greenhead");
            $( ".ui-widget-header .ui-state-default" ).toggleClass("greenhead noborder");
            $( ".ui-widget-content" ).toggleClass("bordergreen");
         $("input[type=checkbox]").attr('checked',miniswitch);
      });
    $(".miniswitch").click(function () {
    var $panel = $(this).closest('.panel');
    $panel.toggleClass('panel-off2 panel-success');
    $(this).find('input').prop('checked', $panel.hasClass('panel-success'))

});

Answer 1

The easiest way is for the modal events to know what the current panel is. So we can use a global variable (though this is not recommended). Here's a jsfiddle of this: http://jsfiddle.net/FG228/5/

I added a global variable

var currentPanel=null  //global variable to store current panel
$(window).resize(function(){

Assign the variable when the edit button is clicked

$(".glyphicon-edit").click(function () {
    currentPanel=$(this).closest('.panel') //this refers to edit button

And finally use it when needed

//in  $('.miniswitchmodal input[type=checkbox]').click()
$(currentPanel)
   .toggleClass('panel-off2 panel-success',$("#modalSwitch").attr("checked"))

I also added the id modalSwitch to the checkbox in the modal dialog for easier reference.

This should get you started, though I recommend looking into other ways of doing it, such as using javascript's ability to have functions inside functions

$('.glyphicon-edit').click(function(){
    var currentPanel=this
    $("#btnSave").unbind('click'); //clear the click from other panels
    $("#btnSave").click(function(){
       $(currentPanel).toggleClass(  ...  )
    })

    ...
    ...
})