Currently my websites consists of multiple pages, which are loaded dynamically. On certain pages there are some buttons which I would like to have popovers. I read some documentation and stackoverflow answers on popovers and dynamic content. However, I can't seem to get it working. Below you'll find my code:
Javascript
$(document).ready(function(){
var popOverSettings = {
trigger: "click",
placement: 'bottom',
container: 'body',
html: true,
//content:" <div style='color:red'>This is your div content</div>"
content: function () {
return $('#popover-content').html();
}
};
$('div').on('DOMNodeInserted', function () {
$(".pop-function").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
//$(event.target).find('button[rel=popover]').popover(popOverSettings);
});
try {
$("button[rel=popover]").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
} catch (err) {}
});
The HTML button
<button class="pop-function" rel="popover">Button</button>
Related
searched for some time and didn't find an answer.
I want the popover to have html content, to open on hover and be clickable. But if I set the trigger to 'manual', then the button is not displayed. Do I set the trigger to hover, then the popover is not clickable. How can I fix that?
Here jsfiddle
$(document).popover({
trigger: 'manual',
sanitize: false,
html: true,
animation: true,
selector: '.myHover',
container: '#bootstrap-container'})
.on('mouseenter', '.myHover', function () {
const _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover("hide"); }); })
.on('mouseleave', '.myHover', function () {
const _this = this;
setTimeout(function () {
if (!$('.popover:hover').length) {
$(_this).popover('hide'); } },
300);
});
Thank you.
i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?
try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});
Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
I have an hyperlink in asp.net web forms. When I click this link I want to show an asp.net mvc view as a popup modal. Currently I am doing Response.Redirect in the server side of the aspx page to the controller and then using Keno UI's kendowWindow on the top most div of the view. The problem is that because of response.redirect it goes to a different URL. I want the popup to show the modal page on the page containing the hyper link itself and close when the close button is clicked. I believe this has to be done by using client side javascript to load the modal instead of Response.Redirect.
$("#MyTopDiv").kendoWindow({
content: {
url: "~/MyFolder/MyView"
},
activate: function () {
$(".k-i-close").on("click", function () {
window.location = document.location.origin + "/Original/user/Original.aspx";
})
},
modal: true,
width: "950px",
title: "Select Documents",
close: onClose,
});
I believe I have done something similar to this, if I am understanding your question.
ASPX Page
<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>
JavaScript
$(function () {
$('body').on('click', '.open-modal', function (e) {
e.preventDefault();
$.post(this.href, function (html) {
$('<div />').kendoWindow({
visible: true,
title: 'My Modal',
modal: true,
width: '600px',
deactivate: function () {
this.element.closest('.k-widget').remove();
}
}).data('kendoWindow')
.content(html)
.center()
.open();
});
})
});
MVC Controller Action
[HttpPost]
public PartialViewResult MyView()
{
var vm = new MyViewVM();
return PartialView("_MyView", vm);
}
Is that helpful at all?
UPDATE
Yea you can pass parameters. Just include them as querystring values on your <a> and add them to the controller action.
<a class="open-modal" href="/MyFolder/MyView?id=9&name=Test">Open Modal</a>
then ...
[HttpPost]
public PartialViewResult MyView(int id, string name)
{
var vm = new MyViewVM();
//get data and fill view modal with id
return PartialView("_MyView", vm);
}
That should work just make sure your parameter names match
UPDATE 2
Ya if you wanted to add your parameters dynamically using the javascript you linked in the comments you could probably do this:
ASPX Page
<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>
Javascript
$(function () {
$('body').on('click', '.open-modal', function (e) {
e.preventDefault();
var id = getParameterByName('id');
var name = 'Test';
$.post(this.href, { id: id, name: name }, function (html) {
$('<div />').kendoWindow({
visible: true,
title: 'My Modal',
modal: true,
width: '600px',
deactivate: function () {
this.element.closest('.k-widget').remove();
}
}).data('kendoWindow')
.content(html)
.center()
.open();
});
})
});
The getParameterByName is defined in the link you posted in the comments and you controller action shouldn't need to change from the first UPDATE I posted.
Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.
The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});
I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?