I'm using jQuery UI accordion for the first time and I have a question:
How I can delay the opening after all Ajax data is loaded?
Here is the accordion code:
var ac = $("#accordion").accordion(
{
active: false,
event: false,
autoHeight: false,
navigation: false
},
{ header: "table" }
);
I know I can start open animation in this function:
$(".SearchResults").load(
url,
{ input: id },
function () {
hideProgress();
}
);
After hideProgress it will run. How I can start opening?
Try moving the accordion initialisation to the callback, after hideProgress(), like this:
$(".SearchResults").load(
url,
{ input: id },
function () {
hideProgress();
var ac = $("#accordion").accordion(
{
active: false,
event: false,
autoHeight: false,
navigation: false
},
{ header: "table" }
);
}
);
Related
I need to call a function when modal close. My code as follows,
function openModal(divName) {
$("#"+divName+"Modal").modal({
overlayClose: false,
closeHTML: "<a href='#' title='Close' class='modal-close'>X</a>",
onShow: function (dialog) {
$('#simplemodal-container').css({ 'width': 'auto', 'height': 'auto', 'padding-bottom': '1000px' });
var tmpW = $('#simplemodal-container').width() / 2
var tmpH = $('#simplemodal-container').height() / 2
$('#simplemodal-container').css({ 'margin-left': tmpW * -1, 'margin-top': tmpH * -1 });
},
close:onClose,
onClose: ModalClose(),
opacity: 50,
persist: true
});
}
I tried two ways to call a function as follows, but both not working
1st way
function onClose() {
alert('called');
}
2nd way
$('.resetbutton').click(function () {
alert('called');
}
Call another function which you want inside ModalClose(), if it user-defined function
From the bootstrap documentations, you can just call the javascript event on closing the modal Javascript.Bootstrap
$('#myModal').on('hide.bs.modal', function (e) {
// do the closing function...
});
And for Kendo Library you can do the close but without the "()" and this will pass the event "e" in the function
close: onClose,
Events in Kendo UI
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onCancel },
{ text: 'OK', primary: true, action: onOK }
],
initOpen: onInitOpen,
open: onOpen,
close: onClose,
show: onShow,
hide: onHide
});
function onClose(e) {
show.fadeIn();
kendoConsole.log("event :: close");
}
I use kendo ui popup editor in this way：
editable: {
mode: "popup",
window: {
actions: [],
title: false,
modal: false,
resizable: false,
animation: false,
clickOutside: true
}
I don`t know if i can make the popup window auto-close through the editable configuration.
I have tried to add autoHide:true, autoClose: true configurations, but it doesn`t work.
I know this is an old question but maybe someone can benefit from this:
$("#btnSave").kendoButton({
click: function (e) {
e.preventDefault();
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
dialog.open();
}
});
$("#dialog").kendoWindow({
width: 225,
height: 70,
modal: true,
visible: false,
title: false,
actions: [],
open: function() {
setTimeout(function () {
$("#dialog").data("kendoWindow").close();
}, 2000);
},
animation: {
open: { effects: "fade:in"},
close: { effects: "fade:out"}
}
});
Just in case any one feel lazy, here is how popup edit window could be closed:
$(document).on('click', function (e) {
//kendo popup edit window selector
var windowCont = $('.k-popup-edit-form.k-window-content');
//if it was first click on kendo grid edit button exit function
//otherwise popup window will be closed immidiatelly
if ($('.k-grid-edit').is(e.target))
return;
//if click was outside popup window, trigger close button
if (!windowCont.is(e.target) && windowCont.has(e.target).length === 0)
windowCont.find('.k-grid-cancel').click();
})
I have ajax.actionlink
#Ajax.ActionLink("Click here",//link text
"Insert", // action name
"Projects", // controller
new { poz = item.itemID.ToString() }, // route values
new AjaxOptions() { HttpMethod = "GET", UpdateTargetID = "PrjDiv" OnSuccess = "Initiate_Dialog" }, // ajax options
new { #class = "openDialog", #id = item.idemID.ToString() } //htmlAttributes
)
and jQuery UI dialog
function Initiate_Dialog() {
var itemID= $(this).attr("id").replace("item_", "");
var prjID= $("#m_project").val();
var url = encodeURI("/Projects/Insert?poz=" + itemID+ "&proj=" + prjID);
$("#dialog-edit").dialog({
title: 'Insert',
autoOpen: false,
resizable: false,
height: 'auto',
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
close: function (event, ui) {
$(this).dialog('close');
},
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#dialog-edit").dialog('open');
return false;
}
When i click on generated link, my controller action is executed 2 times. Once with parameters sent from ajax.actionlink, and second time, with parameters sent from javascript.
I know that i have 2 calls and that's why is action executed twice. My question is, is there a way around this to execute only call from javascript, and not from actionlink?
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/
I'm trying to create a popup page using Magnific via AJAX but getting an 'XMLHttpRequest cannot load' error when the link button is clicked.
Below is the partial code for the portfolio section where clicking on the button should load project_1.html:
<div class="masonry_items removeImgGrayFilter portfolio_items catFilterEffect_1 ajaxPopup_gallery" data-animated-time="15" data-animated-in="animated fadeIn" data-animated-innerContent="yes" data-anchor-to="parent.parent.parent">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Category 1 - jQuery -->
<!-- Thumbnail -->
<div class="item width_1by4 hover_enable cat1 selPopup">
<div class="item_thumbnail">
<div class="porImgOver">
<!-- Thumbnail Image -->
<img class="preload" src="images/0.png" data-src="images/portfolio/thumb1.jpg" alt="image_alt_text" />
</div>
<div class="imageText textOnHover">
<div class="text_field lightColorText">
<h5>Bloc Jams - jQuery</h5>
<h6>A fully functional digital music player similar to Spotify</h6>
<a class="detail_btn ajaxPopup_galItem" href="project_1.html">
<span class="icon"><i class="fa fa-search-plus"></i></span>
</a>
</div>
</div>
....
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/custom.min.js"></script>
custom.min.js
// magnificPopup plugin Initialization
try {
//Initialize Image
$('.magnificPopup').each(function() {
var mc = $(this);
var tit = mc.attr("data-title") !== undefined ? "data-title" : "title";
var typ = mc.attr("data-type") !== undefined ? mc.attr("data-type") : "image";
mc.magnificPopup({
image: {
titleSrc: tit
},
type: typ,
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
closeBtnInside: true,
midClick: false // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
//Initialize Gallery
$('.magnificPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize portfolio item gallery
$('.magnificPopup_item_gallery').each(function() {
var mc = $(this);
var p_items = [];
mc.find(".i_gallery").children().each(function() {
var mc2 = $(this);
var tit = mc2.attr("data-title") !== undefined ? mc2.attr("data-title") : mc2.attr("title");
p_items.push({
src: mc2.attr("data-href"),
title: tit,
type: mc2.attr("data-type")
});
});
mc.magnificPopup({
items: p_items, // the selector for gallery item
type: 'image', // this is default type
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize inline content
$('.magnificPopup_inline').magnificPopup({
type: 'inline',
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
} catch (e) {}
try {
// Initialize popup detail text
$('.detail_text').each(function() {
var cont = $(this).find(".popup_text");
$(this).find(".link_btn").magnificPopup({
items: {
src: cont,
type: 'inline'
},
removalDelay: 500, //delay removal by X to allow out-animation
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
$('.ajaxPopup_link').magnificPopup({
type: 'ajax',
settings: null,
alignTop: false,
cursor: 'mfp-ajax-cur',
closeOnContentClick: false,
closeBtnInside: true
});
try {
//Initialize Gallery
$('.ajaxPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: '.selPopup a.ajaxPopup_galItem', // the selector for gallery item
type: 'ajax',
settings: null,
alignTop: true,
cursor: 'mfp-ajax-cur',
gallery: {
enabled: true
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}