I m creating a Dialog box in my javascript using Alertify library,
alertify.myAlert || alertify.dialog('myAlert',function factory(){
return {
main:function(content){
this.setContent(content);
},
setup:function(){
return {
options:{
modal:false,
basic:true,
maximizable:false,
resizable:false,
padding:false,
visible:false
}
};
},
hooks: {
onshow: function() {
this.elements.dialog.style.height = '50%';
this.elements.dialog.style.width = '15%';
}
}
};
});
And, invoking it using below code..
alertify.myAlert("my html content");
Once it is launched, how can I close it ?
I tried diff combinations like alertify.myAlert.close(), alertify.myAlert.hide() but nothing worked..
try this :-
alertify.alert().destroy();
#Nero, #MK : Thank you.
close() and then show() did the job. They retain the state of dialog.
2 more questions,
Can we refer an external HTML file inside alertify.dialog() implementation. Currently am using below code, which takes the html code and builds dialog content.
alertify.myAlert('MY HTML Content');
It looks dirty to have all html code in here. Do we have any option to specify path to html file?
How to set the visibility of Dialog to false intially. I tried setting visibility:hidden, show:false, hide:true etc in options but didn work.
you can use the same class by applying the remove
$('.alertify').remove();
Related
Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.
I am using window popup and selecting template from that window. Now I want to show selected html template in ckeditor in another window.
I tried following code but is showing me html content in ckeditor instead of html template.
function sendValue(selvalue){
$.getJSON("A2B_entity_mailtemplate.php", { id: ""+ selvalue, action: "load" },
function(data){
window.opener.CKEDITOR.instances.msg_mail.setData(unescape(data.messagetext));
window.opener.document.getElementById('from').value = data.fromemail;
window.opener.document.getElementById('fromname').value = data.fromname;
window.opener.document.getElementById('subject').value = data.subject;
window.close();
});
}
I have also tried following but it is also not working for me.
if (window.opener.CKEDITOR.instances.msg_mail.mode == 'wysiwyg') {
window.opener.CKEDITOR.instances.msg_mail.insertHtml(unescape(data.messagetext));
} else {
window.opener.CKEDITOR.instances.msg_mail.setMode('wysiwyg', function() {
window.opener.CKEDITOR.instances.msg_mail.insertHtml(unescape(data.messagetext));
window.opener.CKEDITOR.instances.msg_mail.setMode('source');
});
}
So how can I get html template instead of html content in ckeditor?
Any help/suggestion would be appreciated.
I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.
This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
I'm trying to something like this if in the html there is a div called "#super" load it in the simple modal if not do nothing. I managed to do this with the my skill :D which is none: to load the modal if the #super exists, but it still loads doesn't matter if it exitst or not. PLease help I'm absolute noob on jquery.
if( $('super') ){ $("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
}});
I'm using this jquery plugin link text
If #super does not exist, nothing will happen. So, the following should fit your needs:
$("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
});
I'm not quite sure what it is that you want to do, in the if/else conditions, but to test for the existence of something:
if ($('#super').length) {
// it exists, do stuff
}
else {
// it doesn't exist, do other stuff. Or nothing
}
I'm sorry I can't be more specific, but I've not worked with the dialog/modal plugin.
The problem is this check
if( $('#super') )
will always return true, since the jQuery function always return a jQuery object which is not a false value.
Instead try this
if( $('#super').length > 0 )
I am trying to use jQupload to upload an image asynchronously. The script uses an iframe off of the page to upload and then catches the .load() event of the iframe to return the JSON message that is returned.
If I display the form at the bottom of a standard HTML page and include the javascript then it works fine. However, I would like to load the upload form into a modal window and I am using facebox for this. The form is therefore included with the style tag set to "display:none" at the bottom of the page and it displays in the modal window when a specific button is clicked.
Within the modal window, the form submit's without a problem and the iframe is populated, however the code the form's submit event is not being caught by the javascript. I have tried alerting a simple string in the function but I get no result. However, if I alert out a string using the "onsubmit" tag of the form then it works ok.
The following line of code executes ok and adds a target attr to the form:
$(this).attr("target",data.iframe);
This is the next line of code that is not firing within the modal window:
$(this).submit(function(){
alert('hello!');
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
$.jQupload.jsonMessage(data1)
}
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
This code comes from within the jQupload functions which are called using the following 2 lines:
$("#image_upload_form").jqupload();
$("#image_upload_form").jqupload_form();
This is the full jQupload code and is being used as described at http://jqframework.com/jqupload_doc.html :
/* jQupload - jQuery Upload v0.1
* jQupload is distributed under the terms of the MIT license
* For more information visit http://jqframework.com/jqupload
* Copyright (C) 2010 jqframework.com
* Do not remove this copyright message
*/
$.jQupload = {
fadeOutTime:3000,
callback:{},
output:{},
init: function(id,obj){
if(obj.callback){
$.jQupload.callback[id]=obj.callback
}
if(obj.output){
$.jQupload.output[id]=obj.output
}
if(obj.fadeOutTime){
$.jQupload.fadeOutTime=obj.fadeOutTime
}
},
defaultMessage:function(data){
alert(data)
},
jsonMessage:function(data){
eval("data="+data);
$("#"+$.jQupload.output[data.formid.value]).html(data.message).fadeOut($.jQupload.fadeOutTime)
}
};
$.fn.extend({
jqupload:function(obj){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
if(!obj)
obj={};
$.jQupload.init(id,obj)
})
},
jqupload_form:function(){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
var data=$.extend(
{},
{iframe:id+"_iframe"},
data
);
$("body").append("<iframe name="+data.iframe+' id="'+data.iframe+'"></iframe>');
//$("#"+data.iframe).css({position:"absolute",left:"-1000px",top:"-1000px",width:"0px",height:"0px"});
$("#"+data.iframe).css({position:"absolute",left:"0px",top:"0px",width:"500px",height:"500px"});
$(this).attr("target",data.iframe);
$(this).submit(function(){
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
}
$.jQupload.jsonMessage(data1)
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
return true
})
}
});
Any ideas?
Matt, I believe the problem is the selector you're using not actually rigging anything up to the form:
$(this).submit(function() {...
only works in a certain context, it should be this to work everywhere:
$("#myFormId").submit(function() {....