Develop Reference

Summernote: Manually open link dialog

I've trying to write a script that automatically displays the summernote link dialog box when I click a button.
For instance, I have the following button:
<button class="btn btn-sm btn-info use_hyperlink" data-href="//files.examples.org.uk/song.mp3" type="button">Copy</button>
So in my js I've got:
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
modal = $("div.note-editor.note-frame.panel.panel-default div.modal.link-dialog")
modal.addClass("in").modal("show")
modal.find("input.note-link-url.form-control.note-form-control.note-input").val(href)
modal.find("button.note-btn.note-btn-primary.note-link-btn").prop("disabled", false).removeClass("disabled").attr("type","button")
})
Which opens the dialog, successfully pastes the href but clicking the Insert Link button submits the form that the summernote resides in.
Looking at the summernote code on line 6765 there is a function called showLinkDialog which I imagine is the one I want. However when I tried:
$(document).ready(function () {
$("textarea#summernote").summernote({height: 500});
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
$("textarea#summernote").showLinkDialog({
url: href
});
})
})
I get an Uncaught TypeError: $(...).showLinkDialog is not a function.

Try trigger clicking the button
$('.note-insert [aria-label^="Link"').trigger('click')

sweetalert disappear Instantly

swal({
title: "xxx",
type: "warning",
showCancelButton: true,
.....
},
function(isConfirm) {
if (isConfirm) {
swal("yes, do it!");
} else {
swal("cannel!");
}
}
);
in my page a button binding a js function , the function execute this code . On the page appear the "are you sure" confirm box when I click the button. but when I click yes , the next sweetalert just flushes and disappear instantly. what's wrong?

Looks like the closing operation of the plugin uses a timer to do some cleanup, which is executed after 300ms, so the new alert also is getting cleaned up.
One hack to fix it is to use a timer like
swal({
title: "xxx",
type: "warning",
showCancelButton: true
},
function(isConfirm) {
debugger;
setTimeout(function() {
if (isConfirm) {
swal("yes, do it!");
} else {
swal("cannel!");
}
}, 400)
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />

As the problem has been solved, consider this just an another approach.
You can also use event.preventDefault() for the 2nd sweetalert. I got stuck in the same situation, except that I only had 1 sweetalert to be displayed.
From this mozilla page,
The Event interface's preventDefault() method tells the user agent
that if the event does not get explicitly handled, its default action
should not be taken as it normally would be.
On clicking the submit button, it appeared for an instance and then I was directed to another page (specified in action attribute). Since this was happening by default, using event.preventDefault() made it stay.
Thanks for sharing your doubt !

just add event.preventDefault(); before swal function it will prevent it from disappearing.

Set the closeonconfirm attribute to false i.e. closeOnConfirm: false,

Once You calling to the function which is show the sweet alert make sure calling button type should keep as button not submit.
<form method="post">
<button type="button" class="btn-wide btn btn-info" onclick="buy_harvest()">Buy</button>
<button type="submit" class="btn-wide btn-shadow btn btn-success" name="good_condition">Good condition</button>
<button type="submit" class="btn-wide btn btn-danger" name="inedible">Inedible</button> </form>
<script>
function buy_harvest(){
var { value: formValues } = Swal.fire({
title: 'How mutch want to Buy?',
showCancelButton: true,
confirmButtonText: `Buy`,
html:
'<div style="float:left;"><input type="text" id="buy_qty" style="width:150px;"><label> Quanity </label></div>' ,
focusConfirm: false,
preConfirm: () => {
var buy_qty = document.getElementById("buy_qty").value;
if(buy_qty!="" || buy_qty!=0){
//call to another function and pass value
process_buy(buy_qty);
}
}
})
}
</script>

Can't Perform action on click yes in Jquery based confirmation box

i have a template it is using some fallr confirmation or alert boxes features. It has a code for confirmation box, its working fine but its not working according to my requirement..means
i have one link for delete row from table like:
<a href="<?php echo base_url(); ?>admin/del_menu/<?php echo $values->id; ?>" rel="tooltip-top" title="Delete" id="confirm">
when i click on it its showing a dialog box who ask for 'Yes' and 'Cancel' it's jquery code is:
$('#confirm').click(function(ev) {
var clicked = function(){
$.fallr('hide');
return true;
};
$.fallr('show', {
buttons : {
button1 : {text: 'Yes', danger: true, onclick: clicked},
button2 : {text: 'Cancel', onclick: function(){$.fallr('hide')}}
},
content : '<p>Are you sure you want to delete menu?</p>',
icon : 'error'
});
ev.preventDefault();
});
in this code i just want to edit one thing..link action should only perform when i click on yes..but now i have added ev.preventDefault() it's disable my link and it's also not working on click yes... is any body knows how to handle this one?

You can redirect the user in your clicked handler by giving the destination of the link to window.location:
$('#confirm').click(function(ev) {
var target = $(this).attr('href');
var clicked = function(){
// This will redicrect the browser to the given location.
window.location = target;
};
$.fallr('show', {
buttons : {
button1 : {text: 'Yes', danger: true, onclick: clicked},
button2 : {text: 'Cancel', onclick: function(){$.fallr('hide')}}
},
content : '<p>Are you sure you want to delete menu?</p>',
icon : 'error'
});
ev.preventDefault();
});

knockout.js "with" binding and dynamic html

I want to have a modal dialog to appear with some content and buttons inside it. The dialog should be bound to some observable property or not, the dialog also must have close buttons, one inside its body, another on the top right corner. My main aim is to close this modal form with these buttons, but "Cancel" button inside dialog's body doesn't work as expected.
1) First approach:
In this example dialog is created with static dialog, on "Open dialog" button click it shows up, it gets closed if clicked on top right X link, but it doesn't close on "Close" button click, however I set my observable to null. I was pretty much sure about this approach, as it was described in this brilliant explanation.
Excerpt from my code:
HTML:
<button data-bind="click: openDialog">Open dialog</button>
<div data-bind="with: dialogOpener">
<div data-bind="dialog: { data: $data, options: { close: Close } }">
<button data-bind="click: Save">Save</button>
<button data-bind="click: Close">Cancel</button>
</div>
</div>
JS:
self.dialogOpener = ko.observable();
self.openDialog = function () {
var data = {
Save: function() {
alert('Saved');
},
Close: function() {
alert('Closed');
self.dialogOpener(null);
}
}
self.dialogOpener(data);
}
Fully working example:
http://jsfiddle.net/cQLbX/
2) Second approach shows how my dialog html is dynamically created and it has the contents and the same results as in the first example.
Excerpt from my code:
HTML:
<button data-bind="click: openDialog">Open dialog</button>
JS:
self.dialogOpener = ko.observable();
self.openDialog = function () {
var element = "";
element += '<div data-bind="with: $data">';
element += '<div data-bind="dialog: { data: $data, options: { close: Close } }">';
element += '<button data-bind="click: Save">Save</button>';
element += '<button data-bind="click: Close">Cancel</button>';
element += '</div>';
element += '</div>';
var data = {
Save: function() {
alert('Saved');
},
Close: function() {
alert('Closed');
self.dialogOpener(null);
}
}
self.dialogOpener(data);
ko.applyBindings(data, $(element)[0]);
}
Fully working example:
http://jsfiddle.net/6T3Ra/
My question is:
On both examples "Cancel" button inside body doesn't work, the dialog doesn't close, what am I doing wrong and how to solve this?
Thanks a lot!

made a bunch of changes to your fiddle, maybe not how you want to do it, but the cancel and x buttons both do the same thing now
http://jsfiddle.net/cQLbX/3/
<div data-bind="dialog: dialogOpener, dialogOptions: { autoOpen: false, close: Close, buttons: { 'Save': Save, 'Cancel': Close } }">
<div data-bind='with: dialogContent'>
<div data-bind="text: Test"></div>
</div>
</div>
i usually structure my dialogs like this, and i've had success with them.

I don't know if you use any plugins and what not, but looking at your js fiddle example no2 with the help of a great thing called debugger is that you aren't explicitly telling the element to hide. A solution to this could be the following:
//If you look at E, E would be the ViewModel and X would be the jQuery Event Click
Close: function(e, x) {
//from the event we have currentTarget which is the button that was pressed.
//parentElement would be the first element, and the next parentElement was
//the modal in your demo. When we call hide() it hides the modal from
//which the button was pressed.
$(x.currentTarget.parentElement.parentElement).hide();
//left these as is from your example
alert('Closed');
self.dialogOpener(null);
}

Hide modal window javascript

So to show this modal I have the following code:
<button type="button" onclick="openModal(); return false;">A button</button>
and the javascript for this is:
<script type='text/javascript'>
function openModal(a)
{
$.modal({
content: 'Some content here',
title: 'a title',
maxWidth: 500,
});
win.closeModal();
}
</script>
I need a function that will hide this. Can anyone give me some advice on how to do the hideModal() function which will hide the modal when I click anywhere on the screen?

With the modal open in the browser window, use the browser's console to try
var modal;
function btnsModal() {
var btns = {
'Close': function (win) {
modal.closeModal()
}
}
return btns;
}
function openModal(oLink, content) {
var btn = btnsModal();
modal = $.modal({
buttons: btn
});
}

You can add "open" event to dialog, and then bind on click listener to it which will close the dialog if you click anywhere---
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#ID_of_ur_dialog').dialog('close');
})
}
for hiding effect you can use "hide" option---
hide: "highlight"

This is dumb...
I fixed this with display none in css... It turns out I didn't thick it trough... I added the display none and a JS event that triggers the CSS upon clicking anywhere else in the page, except the modal.
Thank you very much for all your input guys! Really appreciate it!