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/
7 Answers
Answers 1
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/
Answers 2
$(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'); Answers 3
$(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); }); Answers 4
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> Answers 5
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); Answers 6
Here is link of my code you can go through it might be it can help you -
Add these lines in your code
JAVASCRIPT Code $('#addonsWrap789').addClass('foroneclass'); $('#addonsWrap790').addClass('fortwoclass'); Answers 7
Thanks for sharing. It's very useful.
0 comments:
Post a Comment