Develop Reference

Close jQuery UI dialog on overlay click

I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});

Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})

how to put a jquery confirmation dialog box for javascript method

i have this javascript method and i want to put jquery confirmation dialog box
function editcart(id,code,stock_qw,stock_rtq,pack){
if((stock_qw%pack) != 0){
if(!x) return false;
}
}
i have this jquery dialogbox and i am bit confuse how to put it together
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
//$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
// alert("No");
$('#msg').show();
}
}
anyone has better idea how this work?

What about pure JS confirmation dialog?
confirm('Yes or no? ') ? doFunctionForYes() : doFunctionFotNo();

you may try this:
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
Example:
http://jsfiddle.net/3d7QC/1032/

Combine two tab scripts to make one

I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.
I would really appreciate this!
Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('.mytabs').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
selected: -1
});
Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);

Try this:
Here is JSFIDDLE: enter link description here
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "fade",
pauseOnHover: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "fade",
slideshow: false,
pauseOnHover: true,
useCSS: false,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
});
});
Hope it helps

Different buttons in same jQuery dialog

I have a button #create-user that opens a dialog with 2 buttons(submit, cancel). Is it possible to add another button #edit-user on the page that opens the same dialog but with different buttons (edit, delete, cancel)? This is my code so far:
$(function () {
var dialog, form,
name = $("#name"),
birthdate = $("#student-datepicker"),
allFields = $([]).add(name).add(birthdate),
tips = $(".validateTips");
function addStudent() {
var data = {
'action': 'add_student',
'name': name.val(),
'birth': birthdate.val(),
'add-student': true
};
var valid = false;
allFields.removeClass("ui-state-error");
if (valid) {
$.post(ajaxurl, data, function (studentId) {
dialog.dialog("close");
});
} else {
}
}
dialog = $("#dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": addStudent,
,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[ 0 ].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addStudent();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});

Acctually i solved it differently ...here is the solution and the code I added:
$(function(){
dialog2= $(".dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$(".edit-student").button().on("click", function () {
dialog2.dialog(
'option',
'buttons', [{
text: 'A brand new button!',
click: function () {
$(this).dialog('close');
}
}]);
dialog2.dialog("open");
return false;
});});
I'm returning false on the button click event just to make sure the page isn't posting/refreshing.

Why title is not showed after second click in FancyBox?

There are a some video links on the page for playing video by click:
<div class="play" id="27" data-width="850" data-height="470" data-fancybox-href="https://www.youtube.com/embed/zqO7epdsSic"></div>
When I click on link then callback beforeLoad: function () {} calls function getVideo(){} that return title in global variable. In callback this title is appointed by the current window FancyBox.
So, sometimes this title is not displayed. How I can improve this code and fix?
Code JS:
$(".play").fancybox({
type: 'iframe',
maxWidth: "90%",
padding: 0,
autoCenter: false,
scrolling: 'no',
fitToView: false,
beforeLoad: function () {
var id = $(this.element).attr("id");
var info = '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&origin=http://whoismed.com&showinfo=0&autoplay=1';
this.href = this.href + info;
getVideo(id, this, function (response, th) {
th.title = th.title + response.template;
th.width = $(th.element).data("width");
th.height = $(th.element).data("height");
});
},
afterLoad: function () {
//changeURL(_videoInfo.info.VideoCode+'#'+_videoInfo.info.idVideo, _videoInfo.info.VideoName, _videoInfo.info);
},
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside' // to append the html
}
}
});
Function GetVideo();
function getVideo(id, th, callback) {
var th = th;
$.ajax({
type: "POST",
dataType: "json",
data: {id: id},
url: '/comments/GetHash',
success: function (result) {
info = result.info[0];
hash = result.hash;
_videoInfo.info = info;
_videoInfo.template = parseTpl(userInfoVideo, {
'name': info.DetailToUsersName,
'id_user': info.idDetailToUsers,
'time': info.VideoTime,
'desc': info.VideoDescription,
'id': info.idVideo,
'title': info.VideoName,
'category': info.SpecializationName,
'category_id': info.idSpec,
'likes': result.statistic,
'form': result.formComment,
'comments': result.comments,
'user_photo': (info.DetailToUsersPhoto == null) ? '/public/images/notphoto.png' : '/' + info.DetailToUsersPhoto
});
callback(_videoInfo, th);
}
});
}