We Keep Coding

How to close alertify.dialog

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();

jQuery Modal and FancySelect Plugin

I have the jQuery FancySelect plugin installed. Works fine. Now I am trying to call it in a modal popup, but it does not work. This is the code in the parent window:
<script src="/js/fancySelect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.fancyselect').fancySelect();
var repoName = 'fancyselect'
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
}
else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
Adding class="fancyselect" to any select in the parent works. However, does not work if added to modal popup select.

Just speculating here as you did not show the HTML or the JS logic that is dealing with the popup creation. Are the elements where you wan to apply the FancySelect method, from the popup plugin already on the page when you call the:
$('.fancyselect').fancySelect();
?
If the elements are added after the page load they won't be picked up by that statement. When displaying the popup you would do somehting like
$('#popupcontainer .fancyselect').fancySelect();
So they will all the required code will be applied on that elements as well.
Update:
Following the update give in your original post, you can add something like: [not tested]
onLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
$(wrap).find('.fancyselect').fancySelect();
}
This should be triggered after the popup has been populated.

put html in a custom javascript message box

How can I put HTML in custom JavaScript message box? I have an HTML file and I want to load its content (not its code) in a message box. In front of my var I can write HTML code and it works good, but I want to load HTML with a lot of code in a separate file. Here is my JS code:
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
};

I am assuming you are able to use your custom js box as mentioned in description,
I am just providing you option to get data from html via ajax and append to your target div.
I am not sure about click event handler, but you need to handle in this way, this is just example code provided by you.
Sample code is as below
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
$.get("htmlfile", function(data){
div = data;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
});
};

Alternatively you could use bootstrap modals
http://getbootstrap.com/javascript/#modals
Or JQuery Ui's dialog box
http://jqueryui.com/dialog

Using jquery to see if selector pulled any divs, find a div thats specific to example page

I'm pretty new to jquery, this is what i need help with: Using jquery to see if a selector pulled any divs, find a div thats specific to example page. See if first condition is false and if so redirect to example page. Thanks for any help!
Jquery partial code: "
$('.assessment-start').click(function () {
$('#startAssessmentDialog').empty();
//block
$('#startAssessmentDialog').block(_blockUISettings);
//block
var link = $('#startAssessmentDialog').attr('link');
AjaxUtil.Services.PageProxy.SendData(link, GLOBAL._HTTPVerbs.GET, {},
function (data) {
var $data = $(data);
$('#startAssessmentDialog').html($data.find('#surveyContainer'));
$('div[name*="*"]').val('*');</script>
// hide the unmapped capability areas
$("#unmappedCapabilityAreas").hide();
// unblocking
$('#startAssessmentDialog').unblock();
// unblocking
},
function (exception) {
AjaxUtil.DefaultExceptionHandler(exception);
$('#startAssessmentDialog').unblock();
}
);
"
Html code:
<div link="/Survey/details/#Global.CGSs[Model.CGSVersionID.Value].SelfAssessmentSurveyResourceID/#Model.ResourceID" id="startAssessmentDialog" class="noDisplay">
</div>

Seeing if selector got any divs:
var selector_pulled_divs=($(selector).filter("div").length!=0)
We'd need some code to work with to help you further.

You can check with nodeName property:
if ($(".selector").get(0).nodeName == 'div') { \\do stuff }

I think you're trying to do something:
if( $('#selector').length ) {
// do something if selector pulled a div
} else {
// do something if selector not pulled a div
// for page redirect write following line
window.location = 'YOUR_URL';
}
$('#selector').length will check the exists of div with id=selector.

Problem catching form submit with jQuery when using "display:none"

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() {....