We Keep Coding

Can I add a customized button in the ionic popup window body

I have created a ionic popup window, instead of the default two buttons at the bottom, I would like to add a button in the body of the popup window. Actually does it really possible to do so? If not, another other method / suggestion?
I have tried to insert some html code in the template but it didn't work.
I would like to add a button like the grey button as shown in the diagram. Thank you for your time for reading my question.

Yes, you can add a customized button to the body of an ionic popup by injecting it into the template. Below is based off of Ionics Popup nightly build with no logic.
Please visit the codepen at the bottom so you can see it in action. If you want to customize the popup, as well, you can apply a custom css class to it too.
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
// Triggered on a button click, or some other target
$scope.showPopup = function() {
$scope.data = {}
var myPopup = $ionicPopup.show({
title: 'Title',
template: '<p>Customer Detail</p> <button type="button">Print</button>',
scope: $scope,
cssClass:'customPopupClass',
buttons: [
{text: 'Back' },
{text: '<b>Submit</b>', type: 'button-dark',},
]
});
};
});
cssClass example to customize popup even more:
.customPopupClass{
.popup{
//style for popup
}
.popup-title{
//style for title
}
}
List of CSS classes to override and customize popup even further
.popup
.popup-head
.popup-title
.popup-sub-title
.popup-body
.popup-buttons.row
.popup-buttons .button
Here is the codepen so you can play around with it.

If by create you mean you actually created/designed this dialog box you can customize it any way you like. You can use http://jqueryui.com/dialog/.
You can use these libraries to create HTML elements that look and behave like a dialog box/popup window, allowing you to put anything you want (including buttons) in the dialog.

Opening one modal from another using the meteor way

How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},

Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});

Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.

JQuery UI dialog modal caching old values

I'm having a big problem using using Jquery dialog. The dialog is displayed when the user clicks on a link. The first time the form is opened, it works fine; the form is submitted to the server,
and the part of the page is updated.However, subsequent attempts to use the form are where the problems start. When i click on the hyperlink for the second time,
(with closing dialog or without closing dialog), it is showing the old values. This happens even if I navigate to a different screen in the application and then return.
The content of the page which is re-rendered after each submission includes the form which makes up the dialog,
so the 'old' values which are being submitted no longer even exist in the page markup.
They are being somehow 'remembered' by JQuery UI.
$(document).on("click", "#hyperLink", function () {
$("#divSection").dialog({
title: "User Details",
resizable: false,
autoOpen: false,
height: 'auto',
width: 300,
appendTo: "form"
});
});
I don't know how to work around this behaviour, can anyone please help me how to resolve this?

how to create a ckeditor into a jqueryui dialog?

I'm trying to use a CKEDITOR instance into a jqueryUI dialog.
$('[name=dialog]').dialog();
$('[name=content]','[name=dialog]').ckeditor();
It works fine until i want to use the dialogs from the editor (f.e. dialog to set an URL, dialog to create a table)
it's like i can't click on that dialog..
i was checking for the z-index (i think that is the problem) but nothing, it is the highest level and nothing, i can not use those dialogs.
Anybody knows why is this for?

I know this post is a little late, but maybe it'll help the next guy.
To create a ckeditor instance in a dialog, you have to load the dialog first and then create ckeditor like this:
$("#mydialog").dialog({
open: function() {
$("#mytextarea").ckeditor(); //LOAD IT HERE
},
close: function() {
//you might want to destroy the instance once the dialog closes
//to keep things clean
CKEDITOR.instances["mytextarea"].destroy();
},
autoOpen: true, ... more options
});
Hope this helps.

Its easy, just the next code ( sorry for the formatting, but I'm replying using my mobile )
$("<div><textarea id='foo'></textarea></div>").dialog({});
CKEDITOR.replace("foo");

jQuery UI .dialog() method failing silently in IE6

I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.
What could be causing this, and how I can fix this behavior?
Thanks.
$('#myDialog').dialog({
autoOpen: false,
buttons: {
"No": function()
{
$(this).dialog('close');
//do stuff
},
"Yes": function()
{
$(this).dialog('close');
//do stuff
}
},
draggable: false,
modal: true,
resizable: false,
title: "Confirmation",
width: "500px",
zIndex: 2000
});
and later
$('#myDialog').dialog('open').show();
Pretty standard.
New information
I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.
1.) An outer dialog uses ajax to replace its content with my content.
2.) My content launches a dialog that was previously created and set to not autoopen.
3.) The outer dialog is destroyed as the inner dialog is closed.
4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.

You should open your dialog using
$('#myDialog').dialog('open');
instead of
$('#myDialog').show();
The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.

I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.

I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.
More info: http://docs.jquery.com/UI/Dialog#option-bgiframe
Regards.

By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?
The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.
You may want to test it.
Marcus