Loading dynamic content into Bootstrap Popover after form submit - javascript

I'm trying to load content dynamically into a Bootstrap popover. When the form is submitted I can alert the value; that's working correctly. What I can't do is get the content of #popover-thanks to load in the popover, replacing the form with a thank you message.
// show the popover
$('#btn').popover({
html : true,
placement: 'top',
content: function() {
return $('#popover-form').html();
}
});
// form has been submitted
$(document).on('click', '#submit', function() {
var value = $('#value').val();
alert(value);
$('#btn').popover({
html : true,
content: function() {
return $('#popover-thanks').html();
}
});
});

i think you must Destroy the first popover to be able to make new one on same element:
$( '#btn' ).popover('destroy');
http://getbootstrap.com/javascript/#popovers-usage
Another solution, you can get the popover id (after show) like that:
var popoverID = $( '#btn' ).attr("aria-describedby"); // = 'popover123456' (random number)
replace the content (http://getbootstrap.com/javascript/#popovers), and then show it:
$( '#btn' ).popover('show');

Related

How to put initialized selectizejs input field in sweetalert

I have a page containing DataTables with actions buttons on each row. One of the buttons should open up a sweet alert containing my selectizejs input field. So the user can select or remove options from the list and then click "OK" in the sweet alert to save it.
I am stuck with the steps in between initializing the selectize element and placing it inside the sweet alert.
I do not see an option to initialize the selectizejs field inside the swal component, so I have tried numerous things initializing it before and placing it in the content field in sweetalert.
In my approach I have created my input element in my view :
<input type="text" id="adminvollabels" class="adminvollabels-select" value="test1,test2,test3" placeholder="<?=lang("flow_company_skills_placeholder")?>" name="adminvollabels">
The jQuery code is as this:
$('.vol-label-link').on('click', function(e) {
e.preventDefault();
var userId = $(this).data("user-id");
var ele = $('<div class="row"></div>');
ele.append('<div class="col-md-12"><label for="adminvollabels">testlabel</label></div>');
$('.adminvollabels-select').selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input.toLowerCase(),
text: input.toLowerCase()
}
}
});
ele.append('<div class="col-md-12"><div class="form-group">'+$('.adminvollabels-select')+'</div></div>');
swal({
title: res.VolLabelUpdateTitle,
content: selectizeElement,
icon: "info",
buttons: {
cancel: {
text: res.BtnCancelText,
visible: true,
className: "btn-secondary"
},
confirm: "ok"
}
}).then(function (isConfirm) {
if (isConfirm) {
$.ajax({
//Do AJAX stuff
});
}
})
});
In this approach my attempt was the following steps:
1) Create input element in HTML
2) when clicking on the vol-label-link element
3) (in JS) create a temporary DOM object with all the div's and col-md's
4) (in JS) Make the input field a selectize.js field
5) (in JS) Append this element in my temporary DOM object
6) place this temporary DOM object in the SWAL 'content' option.
Note on 6: Since I think that SWAL content option only allows raw HTML (I think it performs a parseHTML on it). Hence my attempt on building up the full HTML DOM temporary object before inserting it in the content field.
However with this code, my HTML looks like this:
<div class="col-md-12"><label for="adminvollabels">testlabel</label></div><div class="col-md-12"><div class="form-group">[object Object]</div></div>
I've been trying out with .clone() as well but I cannot get it working on the initialized selectizejs field.

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

Twitter Bootstrap Popover hides immediately after show

I am trying to use Bootstrap popovers for error showing. The code works well only after first click on the button. During next clicks popover is showing but disappear immediately.
Added simple helper for popover re-usage:
var popoverHelper = function (selector) {
var $element = $(selector);
$element.popover({
placement: "bottom",
trigger: 'manual'
});
return {
showPopover: function (text) {
$element.attr('data-content', text);
$element.popover('show');
},
hidePopover: function () {
$element.popover('hide');
},
destroyPopover: function () {
$element.popover('destroy');
}
};
};
Using helper:
var pHelper = popoverHelper('#postInput');
$('#postButton').click(function (e) {
e.preventDefault();
// hide open popover if open
pHelper.hidePopover();
...
// some functionality
...
// show popover if some errors
pHelper.showPopover('error occurs!!');
});
jQuery used - 2.1.1, Twitter Bootstrap - 3.1.1.
Full sample at jsfiddle.
Small note: If I call popover destroy and if I do popover re-init on show, all works well.
But I think it is not optimal.
Jsfiddle sample.
Check this Demo Fiddle
A better solution would be to hide popover on user action on the error field.
$('input').focus(function(){
pHelper.hidePopover();
});

How to pass data to a Jquery Dialog when it opens

I am trying to display the Jquery dialog when the JSP loads. I check for a flag from the bean (showPopupFlag), so this is different from user clicking a button on a already loaded page.
I am trying to push some data into the pop when it displays using the dialogContent.
Is this possible to send/push data to the dialog (I know it is) but some how I am missing something. Any help is appreciated. - Thanks
My html code is
<div id="dialogId" title="JqueryDialogTest">
<div id="dialogContent"></div>
</div>
My included Js is
$(document).ready(function () {
$(function(){
$("#dialogId")
.dialog({autoOpen: false, modal : true} );
} );
});
$(function(){
if($("#showPopupFlag").val() === "true") {
$("#dialogContent").html($("#displaySubjectNotFoundPopup").val());
$("#dialogId").dialog("open");
}
});
You are messing up the auto execute function and the document ready block. So you can do achieve it by :
//document ready block
$(document).ready(function () {
//initialize the dialog ui box
$("#dialogId").dialog({
autoOpen: false,
modal: true
});
//auto executing function
//or you could simply remove the function and let the code block be executed on document ready
(function(){
if($("#showPopupFlag").val() == "true") {
$("#dialogContent").html("someValue");
$("#dialogId").dialog("open");
}
}());
});
And here is the demo JSFIDDLE

Categories