Develop Reference

Clearing jQuery Dialog validate upon open

I am encountering similar behaviour in my code: https://codepen.io/iw3/pen/BAdIq
html
<input id="open" type="button" value="Open" />
<div id="dialog">
<form id="form">
<input type="text" name="field" />
</form>
</div>
JS
$(function () {
$('#dialog').dialog({
autoOpen: false,
buttons: {
'Send': function() {
if ($('#form').valid()) {
alert('Success');
$('#dialog').dialog('close');
}
}
}
});
$('#open').on('click', function() {
$('#dialog').dialog('open');
});
$('#form').validate({
rules: {
field: {
required: true,
digits: true,
maxlength: 9,
min: 1
}
}
});
});
When the user enters data in the form and gets an error, then closes the form and reopens it, the validate messages in red remain while they should really be cleared. Is this an intended behavior or is there a way to reset the validate?

To fix this you can simply hide the validation error label elements when the dialog is closed:
$('#dialog').dialog({
autoOpen: false,
close: function() {
$('label.error').hide();
},
// other configuration settings...
});
Alternatively you can save a reference to the validator and call resetForm() on it when the dialog is closed:
let validator = $('#form').validate({
rules: {
// your rules...
}
});
$('#dialog').dialog({
autoOpen: false,
close: function() {
validator.resetForm();
},
// other configuration settings...
});

Jquery .load() works locally but not on the server

I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.

Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>

Summernote custom dialog and button

I try to implement Summertnote editor. Here is the JS code:
$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'Ciao!',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', 'hello');
}
});
return button.render(); // return button as jquery object
}
function autoFormat() {
var totalLines = editor.lineCount();
editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
lang: 'it-IT', // set italian language
height: 350, // set editor height
width: 350, // set editor width
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
dialogsFade: true, // set fade on dialog
prettifyHtml: false,
toolbar: [
['mybutton', ['hello']]
],
buttons: {
hello: HelloButton
},
codemirror: { // codemirror options
mode: "text/html",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
theme: 'monokai',
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}
},
focus: true set focus to editable area after initializing summernote
});
I get the code here: http://summernote.org/deep-dive/#custom-button
So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?
Thanks

Instead of
context.invoke('editor.insertText', 'hello');
use
$('#st-editor').summernote('editor.insertText', 'hello');
works only if you have one editor of course. I'm still searching how to get this context thingy passed. Maybe something with onInit, but I couldn't get it working yet.

#wessel code works, for multiple ids I do an iteration using jQuery each:
Make sure oyu attach an id attribute to all editors:
if ($('.summernote').length) {
var blockQuoteButton = function(itemId) {
var ui = $.summernote.ui;
var button = ui.button({
className: 'note-btn-blockquote',
contents: '<i class="fa fa-quote-right">Quo</i>',
tooltip: 'Blockquote',
click: function() {
$('#' + itemId).summernote('editor.formatBlock', 'blockquote');
}
});
return button.render();
}
$('.summernote').each(function(k, item) {
let itemId = $(item).attr('id');
$('#' + itemId).summernote({
height: 100,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline']],
['para', ['ul', 'ol']],
['mybutton', ['blq']]
],
buttons: {
blq: blockQuoteButton(itemId)
}
});
});
}

This issue appeared in version 0.8.12. Reverting back to 0.8.10 fixes it
Inside package.json specify
"dependencies": {
...
"ngx-summernote": "0.7.0",
"summernote": "0.8.10",
...
},
and run npm install afterwards. It works after that

using jquery dialog multiple times with slightly different parameters

I have a site in which there are alot of confirm pages and need for a dialog window. Im am wondering if there is a better way to write my code so that i dont have to spell out all of the dialog parameters every single time. Each dialog may have 1 thing different. usually the complete button is different function.
for example:
$('#dialogA').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR A(possible print results of something)
}
}
});
and another
$('#dialogB').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR B (possibly some ajax call)
}
}
});
so the only thing that changes is what the Complete button does. in laymen's terms i guess is I want to set a variable the contains all the dialog parameters....

Extend jQuery:
(function ($) {
$.fn.extend({
confirmDialog: function (options) {
var defaults = {
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
};
var options = $.extend(defaults, options);
$(this).dialog(options);
}
}
})(jQuery);
and call it like this:
$('#dialogB').dialog({Complete: function() { … }; });
You can also override the defaults when call the dialog...

Get dialog box value to determine submit the form or not

I have a form like this:
<form action="confirm-and-send.php" method="post" onsubmit="return(confirmation());">
<input a lot of input fields here>
<button type="submit" name="confirm_and_send" id="submit-button" class="sent-to-client-bttn" style="margin-left:630px;margin-top: -125px;"></button>
</form>
then I have jquery ui function
function confirmation(){
$("#some-div").dialog({
bgiframe: true,
autoOpen: false,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function(){
$(this).dialog('close');
callback(true);
},
'No': function(){
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value){
//do something
}
I am following what they say here and here, but it didn't work for me. If I put event.preventDefault() the yes button will not submit the for; if I don't put it submits the form before i choose any of the two options. Any can give me a proper example?

Take your button outside of the form.
<form action="" method="post" id="my_form" onsubmit="">
<input type="text" name="x"/>
</form>
<button name="confirm_and_send" id="submit-button" value="Submit" class="sent-to-client-bttn" onclick="confirmation();">Submit</button>
<div id="some-div" style="display:none">Hi</div>
function confirmation(){
$("#some-div").dialog({
bgiframe: true,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function(){
$(this).dialog('close');
callback(true);
},
'No': function(){
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value){
alert(value);
}

i think you are using JqueryUi dialogue box.. it will not work.. for this purpose you have to use this
i explain you what happens when u click ..
it will not stop for ur click .. it will automatically submitted... so u have to try default..browser confirmation