How to save popover contents upon re-initializing? Here is my code and the popup contains a form. I want to keep the form values if user comes back to after filling some info...
$(this).popover({
html: true,
trigger: 'manual',
placement: 'bottom',
content: function () {
var $contents = $('#popover_template').html();
return $contents;
}
}).popover('toggle');
I don't want any modal window etc. Is there a way to keep the contents of a form even if the popover is reopen.
Thanks.
You can use the "hidden" event to detect when your popover closes, then set its content back to your #popover_template div.
$(this).popover({
// your initialization code
}).popover('toggle')
.on("hidden", function(e) {
$('#popover_template').html($(this).html());
});
References
How to attach a function to popover dismiss event (Twitter Bootstrap)
Bootstrap modal popover hide on close
Bootstrap Popover - Save HTML on close
Related
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
I have a Kendo window created using kendoWindow, which is called on a div. This correctly shows this div in a Kendo Window. If at some later point I then try to simply show the div using the show function, to make it appear on the page instead of in a window,
which worked perfectly fine before creating the Kendo
Window, the show doesn't work. How do I get it to show the div?
if (GC.ViewModels.Dashboard.IsSubscriberLoaded()) { // ***CREATES MY KENDO WINDOW
var $kwin = $('#complaint-dashboard-container').kendoWindow({
width: "1400px",
title: "", // ??
modal: true,
actions: ["Close"]
});
$($kwin).data("kendoWindow").center().open();
} else { // *** WON'T SHOW THE div if above has been executed at some point
$('#complaint-dashboard-container').show();
}
Answer : once you bind the div and make a widget it does not act as a normal div , if you need show the content i suggest you to get the html of the content and show in a different div
I have colorbox configured and the loading gif appears when the window loads but how can I get it to appear when I am calling a page method from whithin the window?
I am calling the method in jScript and it works just fine but the loading gif does not appear so it makes it feel like nothing it happening until my user prompt message appears.
Is there anyway I can call the loading gif in my code?
My jScript is pretty straight forward:
// handler for submit button calling page method
$addHandler($get('SendEmailPageMethod'), 'click', EmailPageMethod);
});
function EmailPageMethod() {
var name = $get('name').value;
var email = $get('email').value;
var message = $get('message').value;
PageMethods.SendEmail(name, email, message, SuccessCallback, ErrorCallback);
}
function SuccessCallback(resultString) {
$('#innerForm').addClass('hidden');
$('div.successMsg').removeClass('hidden');
//alert(String(resultString));
}
function ErrorCallback(resultString) {
alert(String(resultString));
parent.jQuery.colorbox.close();
}
This jScript is on the parent page that opens the colorbox window:
// handles colorbox for contact form
$('#contact-form').colorbox({ maxWidth: '75%',
close: '',
// removes selected class from contact menu item on close
onClosed: function () {
$('#contact-form').removeClass('selected');
}
});
This is what the jScript console says when I open the colorbox form and submit it.
Just query your document for the relevant elements and change their display type:
$('#cboxLoadingOverlay, #cboxLoadingGraphic').show();
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
I have a page with links of class 'dialog' that generate in JQueryUI dialog when clicked. Those dialogs are created from other elements present on the page, and can contain links of class 'add_tab', that should create a new JQueryUI [tab] (http://jqueryui.com/demos/dialog/) when clicked. Those tabs load their content via Ajax and consist identical structures. This means that an 'add_tab' link in a dialog creates a new tab, which contains 'dialog' links that generate dialogs containing further 'add_tab' links, and so on.
This is the basic HTML structure:
<div id="tabs">
<ul>
<li>tab 1</li>
</ul>
<div id="tabs-1">
<p>This tab contains a popup and a direct link to a new tab.</p>
<div id="popup1" style="display:nonee;">This popup contains a link to a new tab.</div>
</div>
Using JQuery 1.7's .on() method, I have troubles with properly registering the click handler for 'add_tab' links that appear in dialogs on added tabs. I manage to register the click handlers for the 'dialog' links in newly generated tabs (so that they generate a dialog), but fail to register click handlers for 'add_tab' links that appear inside those dialogs. I've put a simplified test version online at http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm. Take, for example following scenario:
on http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm , click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will generate a new JQueryUI tab
in the the newly added tab labeled 'tabs2.htm', click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will NOT generate a new JQueryUI tab, but instead open the target in a new window
==> this illustrates how this event handler is apparently NOT registered correctly for 'add_tab' links that occur inside dialogs that are generated in newly added tabs
in the tab labeled 'tabs2.htm', click 'new tab': this will generate a new JQueryUI tab
==> this illustrates how this event handler is registered correctly for 'add_tab' links that occur directly inside newly added tabs
This is my javascript code:
// these event registrations register clicks on $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
// note: this event registration works for all such links on the original page
$('a.dialog').on('click', function(){
$($(this).attr('href')).dialog();
return false;
});
$('a.add_tab').on('click', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function(){$(this).dialog('close')})
return false;
});
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
$tabs.tabs($tabs.tabs('option', 'selected'))
.on('click', 'a.dialog', function(){
$($(this).attr('href')).dialog();
return false;
})
// this registration doesn't seem to work for <a class="add_tab"> links occurring inside generated JQueryUI dialogs inside added JQueryUI tabs
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
return false;
});
}
});
I'm nearly there! Could anyone help me out with the last event handler in the code above? Any help is much appreciated!
The idea with event delegation is to bind the event on a parent that is fixed on the page (not created dynamically). Using the selector parameter of the .on() method allows telling for which elements the event handler should be fired for.
In your code you are using event binding in two ways, event if you use .on():
first you do direct binding on the existing elements a.dialog and a.add_tab - this will only work for the links on tab1 as they are the only the ones existing at the time the code is executed, no event delegation here.
when adding a tab, you are doing event delegation on the tab container $tabs:
for the links to open a dialog with $tabs.on('click', 'a.dialog', function(){ ... }) - this works as expected because the link a.dialog are indeed within the tab container.
for the links in the dialog with $tabs.on('click', 'a.add_tab', function(){ ... }) - this won't work because when the dialog is created, the plugin moves the <div id="popup2"> at the end of the body (before </body>). So when you click the a.add_tab inside the dialog, it is not a descendant of the tab container anymore and event delegation does not happen.
Here's what I would do:
to avoid repeating the same code, declare your event handlers as variables
use event delegation on the tab container for links a.dialog and a.add_tab
when creating a new dialog, use event delegation on the dialog for the a.add_tab links it will contain
Here's the code:
var addTabClickHandler = function(e) {
$tabs.tabs("add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function() {
$(this).dialog('close')
})
return false;
};
var dialogOpenClickHandler = function(e) {
$($(this).attr('href'))
.dialog()
.on('click', 'a.add_tab', addTabClickHandler);
return false;
}
var $tabs = $("#tabs").tabs({
add: function(event, ui) {
$tabs
.tabs('select', '#' + ui.panel.id)
.tabs($tabs.tabs('option', 'selected'));
}
});
$tabs
.on('click', 'a.dialog', dialogOpenClickHandler)
.on('click', 'a.add_tab', addTabClickHandler);
Meanwhile I've come up with a workaround that just registers the event handlers once on the 'tabs' container and appends the dialog to the 'tabs' container upon creation. My initial code could thus be trimmed down to:
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
create: function(event, ui) {
$(this)
.on('click', 'a.dialog', function(){
// dialog: upon creation, move the dialog to the tab to ensure delegated event registration
$($(this).attr('href')).dialog().parent('.ui-dialog').appendTo($tabs);
return false;
})
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), $(this).attr('href'));
$('.ui-dialog-content').dialog('close');
return false;
})
}
});