Develop Reference

How to create a popup in js

I need a help , I am new to jQuery and java script .
My TG.js like
var initializeTemplateGrid = function () {
var templateGrid = $("#templateGrid");
templateGrid.kendoGrid({
dataSource: {
transport: {
read: {
url: "",
dataType: "json",
type: "GET"
},
parameterMap: function (data, type) {
if (type == "read") {
return {
limit: data.pageSize,
offset: data.page-1,
sort: data.sort[0].field + ":" + data.sort[0].dir
}
}
}
},
schema: {
data: "Records",
total: "TotalRecordCount"
},
serverPaging: true,
pageSize: 25,
serverSorting: true,
sort: { field: "TemplateName", dir: "asc" }
},
sortable: {
allowUnsort: false
},
pageable: true,
pageable: {
pageSizes: [10, 25, 50]
},
noRecords: {
template: "No Templates Available"
},
columns: [
{
field: "TemplateName",
title: "Template Name"
},
{
template: "<div >#if(data.SiteCount > 0){#<a Id='tt' href=''>#:SiteCount# Sites</a>#} else{#N/A#}#</div>",
field: "SiteCount",
title: "Name TEMP"
}
]
});
};
Currently for TemplateName if sitecount >0 then by href ='' I am moving to main page.
Now I want to create a popup when I click that link with data.SiteCount value.
How can I do it ??
I was tried below
$(function () {
$("#dialog1").dialog({
autoOpen: false
});
$("#opener").click(function () {
$("#dialog1").dialog('open');
});
});
but I am getting a error dialog key word not supported with my project .

You did not mention what other library you have referenced in your project. Add the followings in the layout page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
Then white a reusable function like this in the layout or your js file:
function showDialogUI(msg, closedTrigger) {
$('#dialogModal span#dialogModalMessage').text(msg);
$("#dialogModal").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
},
close: function () {
if ((closedTrigger === null) || (closedTrigger === undefined)) {
}
else {
closedTrigger();
}
}
});
}
Then from any page call the function like this:
showDialogUI('There is a test message.', null);
In the place of null you can pass a function reference which will be called when the Dialogue box is closed.

jQueryUI dialog replacement for confirm?

I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:
window.confirm = function (message_confirm) {
$(document.createElement('div'))
.attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
.html(message_confirm)
.dialog({
buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: { effect: "fade", duration: 300 },
});
};
This works in that once this script is run, calling a regular confirm shows the jQueryUI dialog, however, the YES selection does not work. I have an ajax call like below:
if (confirm("Are you sure you want to delete this user?"))
{
alert("test");
//ajax call
}
return false;
And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?
Thank you.

you could add a callback parameter to the function
window.confirm = function (message_confirm, ok_callback)
fire it on YES
buttons: { YES: function () { ok_callback(); }}
and go on later like
confirm("message", function(){
alert('smth');
});

Because the dialog is asynchronous you can use a deferred approach:
window.confirm = function (message_confirm) {
var defer = $.Deferred();
$('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
.dialog({
buttons: {
YES: function () {
defer.resolve("yes");
$(this).attr('yesno', true);
$(this).dialog('close');
}, NO: function () {
defer.resolve("no");
$(this).attr('yesno', false);
$(this).dialog('close');
}
},
close: function () {
if ($(this).attr('yesno') === undefined) {
defer.resolve("no");
}
$(this).remove();
},
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: {effect: "fade", duration: 300}
});
return defer.promise();
};
$(function () {
confirm("Are you sure you want to delete this user?").then(function(yesno) {
console.log(yesno);
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Try something like below. It worked for me.
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete user": function() {
alert("test");
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
</head>
<body>
<div id="dialog-confirm" title="Please confirm">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>

YUI3 view events object do not fire events

YUI3 custom view module do not calls showPanel() function
whn the user clicks to the Y.SpHeader (view) should call showPanel event handler.
the code Does not throw any error in console it simply do not work. and not logging in console that the button is clicked.
YUI.add('sp-header-section', function(Y){
Y.SpHeader = Y.Base.create('sp-header-section', Y.View, [], {
events: {
'#sign-up': {'click': "showPanel"}
},
initializer: function(config){
this._initPanel();
},
render: function(){
new Y.SpDropdownMenu({
contentBox: "#top_menu",
descriptions: true
}).render();
},
// Private Methods
_initPanel: function(){
var okButton = this.okBotton;
var cancelButton = this.cancelButton;
this.panel = new Y.Panel({
width: 300,
centered: true,
headerContent: 'Sign Up To Recieve a Book',
bodyContent: 'CAUTION: Watch out for random panels.',
zIndex: 999,
modal: true,
});
},
showPanel: function(){
Y.log('the button is clicked');
this.panel.reder();
},
// Panel Buttons Configurations
okButton: {
value: 'ok',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
},
cancelButton: {
value: 'cancel',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
}
}, {
ATTRS:{
}
});
},'1.0', {requires: ['sp-dropdown-menu', 'panel', 'escape', 'view']});
YUI().use('sp-header-section', function(Y){
var header = new Y.SpHeader({}).render();
});

Different buttons in same jQuery dialog

I have a button #create-user that opens a dialog with 2 buttons(submit, cancel). Is it possible to add another button #edit-user on the page that opens the same dialog but with different buttons (edit, delete, cancel)? This is my code so far:
$(function () {
var dialog, form,
name = $("#name"),
birthdate = $("#student-datepicker"),
allFields = $([]).add(name).add(birthdate),
tips = $(".validateTips");
function addStudent() {
var data = {
'action': 'add_student',
'name': name.val(),
'birth': birthdate.val(),
'add-student': true
};
var valid = false;
allFields.removeClass("ui-state-error");
if (valid) {
$.post(ajaxurl, data, function (studentId) {
dialog.dialog("close");
});
} else {
}
}
dialog = $("#dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": addStudent,
,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[ 0 ].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addStudent();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});

Acctually i solved it differently ...here is the solution and the code I added:
$(function(){
dialog2= $(".dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$(".edit-student").button().on("click", function () {
dialog2.dialog(
'option',
'buttons', [{
text: 'A brand new button!',
click: function () {
$(this).dialog('close');
}
}]);
dialog2.dialog("open");
return false;
});});
I'm returning false on the button click event just to make sure the page isn't posting/refreshing.

Opening a QTip2 Modal Window from within a Javascript function

I'm using Qtip2 to create modal window with the code below:
$('a#my-link-id').qtip({
content: {
text: $('#my-modal-content'),
title: "My Modal Window Title",
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
This modal will be activated when I click on the link with id my-link-id.
However, I want to activate this modal using the OnClick feature in a link. So say I have the following link:
<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>
And I have the following function:
window.getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
elem_link.qtip({
content: {
text: 'my content',
title: 'My Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
}).on('click', function(e){
e.preventDefault();
return false;
});
elem_link.trigger('click');
return false;
}
The above code does not work as I expect it to. What happens is the click gets triggered continously (not once) until my browser (Chrome) halts it with an 'Aw, Snap!' error. And also the modal does not get activated.
What do I need to do to get this to work?!

I solved this doing what you have below:
window._getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
var modal_init_bool = elem_link.data('modal_init');
switch(true)
{
case (modal_init_bool !== true):
elem_link.qtip({
content: {
text: 'Modal Window Content',
title: 'Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'modal',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
elem_link.data('modal_init', true);
break;
}
elem_link.trigger('modal');
return false;
}
I tried using 'click' instead of 'modal' but it just kept firing multiple times when I did that and I don't really understand why.