CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to add a class to the corresponding popup

I have got two div's 

<div id="one">
and
<div id="two">

Each div has got a button class named addonsBtn , when clicked on that it will open a popup and append data to the corresponding popup

If clicked on First Addon , is it possible to add class by name 'foroneclass' so that it looks this way 

<div data-role="popup" id="addonsWrap789" class='foroneclass' data-theme="a">
</div>

Similarly

If clicked on Second Addon , is it possible to add class by name 'fortwolass' so that it looks this way 

<div data-role="popup" id="addonsWrap790" class='fortwolass' data-theme="a">
</div>

This is my fiddle http://jsfiddle.net/cod7ceho/109/

Upvotes: 7

Views: 1811

Answers (6)

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Here is link of my code you can go through it might be it can help you -

JSFiddle

Add these lines in your code

JAVASCRIPT Code

$('#addonsWrap789').addClass('foroneclass');
$('#addonsWrap790').addClass('fortwoclass');

Upvotes: 0

Chris
Chris

Reputation: 58182

Sure. There are a few ways to skin a cat



Basic solution

Based on your fiddle, you can extend the following two lines:

Line 8 is:

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin();

Becomes:

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass("foroneclassfo");

And line 15:

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin();

Becomes:

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin().addClass("foretwoclassfo");



Cleaner solution

I've cleaned up your jsfiddle file a bit. We can approach it in a bit more of a reusable way by taking the toppname and appending your desired class suffix onto the end. This way, you could have 2 or 10 modals and it would continue to work as intended. 

$(document).on('click', '.addonsBtn', function (e) {
  var toppname = $(this).data('toppname');
  var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>';

  $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate');
  $("#addonsWrap789").trigger('create').trigger('pagecreate');
  $("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass(toppname + 'class');
});

Updated fiddle: http://jsfiddle.net/cod7ceho/110/

Upvotes: 5

toha
toha

Reputation: 5510

$(document).on('click', '.addonsBtn', function(e) {
    var toppname = $(this).data('toppname');
    var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>';
    if (toppname === 'forone') {
        $("#addonsWrap789").addClass($(this).attr('data-toppname')+'class');
        $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate');
        $("#addonsWrap789").trigger('create').trigger('pagecreate');
        $("#addonsWrap789").popup({
            history: false
        }).popup('open').enhanceWithin();
    } else if (toppname === 'fortwo') {
        $("#addonsWrap790").addClass($(this).attr('data-toppname')+'class');
        $("#addonsWrap790").html(html).trigger('create').trigger('pagecreate');
        $("#addonsWrap790").trigger('create').trigger('pagecreate');
        $("#addonsWrap790").popup({
            history: false
        }).popup('open').enhanceWithin();
    }
});

Highlight this code: 

$("#addonsWrap789").addClass($(this).attr('data-toppname')+'class');

and :

$("#addonsWrap790").addClass($(this).attr('data-toppname')+'class');

Upvotes: 1

Deepak Singh
Deepak Singh

Reputation: 650

Here i'd suggest a simpler way of doing this. Lets say that you put the desire class name in a attribute of both of your div's.

div id="one" key="foroneclass" and div id="two" key="fortwolass"

Now when user will click what you can do is pick the value of attribute key.
var current_clasname = $(this).attr("key");

and then place it it the class name of your popup.

$(".pop_up").removeAttr("class"); // To make sure that previous class is removed!!
$(".pop_up").adddClass(current_clasname);

Upvotes: 0

Raja Khoury
Raja Khoury

Reputation: 3195

Here is a Demo

$(document).on('click', '.addonsBtn', function(e) {
 var $toppName = $(this).data('toppname'),
     $topClass = $(this).data('topclass'),
     $popup = $("#" + $(this).data("popup")),
     $popupContent = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>';

  $($popup).html($popupContent).trigger('create').trigger('pagecreate');
  $($popup).trigger('create').trigger('pagecreate');
  $($popup).popup({
    history: false
  }).popup('open').enhanceWithin().addClass($topClass);

// addClass method will keep the class even when the popup is hidden

});

and you can add the Popup Class and Id reference within the Button's data attributes - No need for If statements -

 <button class='btn-d addonsBtn' data-toppname="forone" data-topclass="foroneclassfo" data-popup="addonsWrap789" ui-btn ui-shadow ui-corner-all><a data-rel="popup" data-position-to="window" aria-haspopup="true" aria-expanded="false" class="ui-link">Addons First Item</a></button>

Upvotes: 0

Mitul
Mitul

Reputation: 3427

$(document).on('click', '.addonsBtn', function(e) {
  var toppname = $(this).data('toppname');
  var id = $(this).attr('id');
  var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>';

  $("#" + id ).html(html).trigger('create').trigger('pagecreate');
  $("#" + id ).trigger('create').trigger('pagecreate');
  $("#" + id ).popup({
    history: false
  }).popup('open').enhanceWithin().addClass(toppname);

});

Upvotes: 0

Related Questions