In my webpage I have a button to trigger a modal. Inside that modal there is a input field for date. If I click the datepicker it is supposed to be opened.
However, the code is not working if the input date field is inside a modal. For testing purpose I brought it outside and then it is working perfectly.
My code is below,
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<button class="btn modal-trigger" href="#testModal">Open Modal</button>
<div id="testModal" class="modal modal-fixed-footer">
<input type="text" name="testDate1" class="datepicker">
</div>
<input type="text" name="testDate2" class="datepicker">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems,{});
});
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
</script>
</html>
There are two input field. One is named 'testDate1' which is inside the modal. Another one is named 'testDate2' which is outside. The outside one is working. Not the inside one.
How can I use datetime modal inside another modal?
Your datepicker inside modal is getting loaded, but do not have height. Set the height to 100%.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems,{});
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
#testModal .modal {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<button class="btn modal-trigger" href="#testModal">Open Modal</button>
<div id="testModal" class="modal modal-fixed-footer">
<input type="text" name="testDate1" class="datepicker">
</div>
<input type="text" name="testDate2" class="datepicker">
</div>
Add
container: "body"
to the options, when initializing the materialize modal and it will open inside the body, not inside the modal!
Jquery add line ' container: "body" '
$(document).ready(function(){
$('.timepicker').timepicker({
container: "body", // carregar dentro do MODAL ------------------------
default: 'now', //hora atual
fromnow: 0, // padrão para o milesegundos
twelvehour: false, // AM/PM = false | 24h = true
format: "HH:ii:SS",
donetext: 'ok', // btn OK
cleartext: 'limpar', // bnt clear
canceltext: 'cancelar', // btn cancel
autoclose: false, // fechar automatico
ampmclickable: true, // AM PM clicavel
vibrate: true
});
});
Related
I'm trying to create a FullCalendar in laravel project
and get this error :
Uncaught TypeError: Cannot convert undefined or null to object
at entries (<anonymous>)
at e (jquery.min.js:4:7727)
at Ab (jquery.min.js:4:7608)
at Ab (jquery.min.js:4:7631)
at Ab (jquery.min.js:4:7631)
at Function.r.param (jquery.min.js:4:7918)
at Function.ajax (jquery.min.js:4:12227)
at Et.e.constructor.select (MyReservations:121:27)
at constructor.publiclyTrigger (fullcalendar.min.js:9:16482)
at Et.e.constructor.publiclyTrigger (fullcalendar.min.js:8:30673)
Here is My blade
MyReservations.blade.php
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Reservations</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" style="text-transform: capitalize" id="ResModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Reservation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Room -->
<select class="form-control" aria-label="Default select example" name="room_id" id="room_id" >
<option selected>Select Room</option>
#foreach($room as $items)
<option value="{{$items->id}}">{{$items->id}}</option>
#endforeach
</select>
<br>
<!-- Title -->
<div class="input-group">
<span class="input-group-text"> Title : </span>
<input class="form-control" aria-label="Title" name="title" id="title"></input>
</div>
<br>
<!-- Objectif -->
<div class="input-group">
<span class="input-group-text">Objectif :</span>
<textarea class="form-control" aria-label="Objectif" name="objectif" id="objectif"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="text-center mt-5">My Reservations</h3>
<div class="col-md-11 offset-1 mt-5 mb-5">
<div id="calendar">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var reservation = #json($events);
$('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month, agendaWeek, agendaDay'
},
events: reservation,
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
$('#ResModal').modal('toggle');
$('#submit').click(function () {
var title =$('#title').val;
var start = moment(start).format('YYYY-MM-DD');
var end = moment(end).format('YYYY-MM-DD');
var objectif =$('#objectif').val;
var room_id =$('#room_id').val;
});
$.ajax({
url:"{{route('MyReservations.store')}}",
type:"POST",
data:{title, start, end, room_id, objectif},
success:function(response)
{
// MyReservations.fullCalendar('refetchEvents');
// alert("Added Successfully");
console.log(response)
},
})
},
});
});
</script>
</body>
</html>
This is my controller
MyController
public function index(){
$events=array();
$reservations = reservation::all();
foreach ($reservations as $reservation){
$events[] = [
'title' =>$reservation->title,
'start' =>$reservation->start,
'end' =>$reservation->end,
//
// 'objectif' =>$reservation->objectif,
// 'room_id' =>$reservation->room_id,
// 'user_id' =>$reservation->user_id,
// 'stat' =>$reservation->stat,
];
}
$room=room::all();
return view('/MyReservations', ['events'=>$events],compact('room'));
}
public function store(Request $request)
{
$request->validate([
'title' =>'required|string',
'objectif' =>'required|string',
'room_id' =>'required',
]);
$reservation =reservation::create ([
'objectif' => $request->objectif,
'start' => $request->start,
'end' => $request->end,
'stat' => $request->stat,
'user_id' => Auth::user()->id,
'room_id' => $request->room_id,
]);
return response()->json($reservation);
}
i'm a beginner and i was follwing a tutorial when I click on a square of the calendar, it shows the bootstrap model (till here everything is fine) once I click on ' save changes' i get this problem I think the problem starts at $.ajax, and the store function in MyController
i don't really know where is the problem i was watching a tutorial and i did exactly the same
Note : My model continues $fillable
And i Have three tables ( users , reservations and rooms )
I think basically the issue is that the $.ajax({ command needs to be inside the $('#submit').click(function () { ... }) area. Otherwise it'll run the AJAX command as soon as the selection is made without waiting for the user to enter anything or submit the form.
So that means the variables declared inside that click area, which the AJAX is trying to rely on, won't exist yet, and that would explain the error about "undefined" variables.
It should look like this instead:
select: function(start, end, allDay)
{
$('#ResModal').modal('toggle');
$('#submit').off("click");
$('#submit').on("click", function () {
var title = $('#title').val;
var start = moment(start).format('YYYY-MM-DD');
var end = moment(end).format('YYYY-MM-DD');
var objectif = $('#objectif').val;
var room_id = $('#room_id').val;
$.ajax({
url:"{{route('MyReservations.store')}}",
type:"POST",
data:{title, start, end, room_id, objectif},
success:function(response)
{
// MyReservations.fullCalendar('refetchEvents');
// alert("Added Successfully");
console.log(response)
},
})
});
}
Note that I also modified the "click" handler slightly and added an .off call just before it. That's so that if you then select another area afterwards, and then another one, it doesn't add more and more "click" handlers without removing the previous ones - because if you didn't remove them, then when the modal is submitted it will run all the added handlers (one for each time there's a selection) and re-submit the earlier event data to the server, resulting in duplicate data being stored.
I want to change a text and show/hidde an svg icon with classes when click on collapse.
Every time I execute the code above the code executes one more time and I don't know why,
example:
1st time = `alert(show)`
2nd time = `alert(hide), alert(hide)`
3er time = `alert(show), alert(show), alert(show)`
etc...
here is my code:
$('span[name="serviceCollapse"]').click(function() {
var target = $(this).attr("data-target");
var label = $(this).find("label");
var span = $(this);
$(target).on('hide.bs.collapse', function () {
label.text("Mostrar más servicios ");
alert("hide");
var arrowUp = span.find(".d-inline");
var arrowDown = span.find(".d-none");
arrowUp.removeClass("d-inline");
arrowUp.addClass("d-none");
arrowDown.removeClass("d-none");
arrowDown.addClass("d-inline");
});
$(target).on('show.bs.collapse', function () {
label.text("Mostrar menos servicios ");
alert("show");
var arrowDown = span.find(".d-inline");
var arrowUp = span.find(".d-none");
arrowDown.removeClass("d-inline");
arrowDown.addClass("d-none");
arrowUp.addClass("d-inline");
arrowUp.removeClass("d-none");
});
});
EDIT:
Here is the html code:
<div class="col-12 mt-2">
<span name="serviceCollapse" data-target="#service1" data-toggle="collapse">
<label class="text-custom-primary bold-300">Mostrar más servicios </label>
<span class="d-inline">arrowDownSvgIcon</span>
<span class="d-none">arrowUpSvgIcon</span>
</span>
<div id="service1" class="collapse mt-3">
collapsable
</div>
</div>
Actually as per your code you are adding multiple event handlers instead you just need to add event handlers on listeners once initially and that would be it.
Every time click is happening more handlers are appended on the event listeners that's causing the problem.
SOLUTION:
Set the event handler only once. And in the click event of 'serviceCollapse' check for its state to print the alert message.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-12 mt-2">
<span class="collapsed" name="serviceCollapse" data-target="#service1" data-toggle="collapse">
<label class="text-custom-primary bold-300">Mostrar más servicios </label>
<span class="d-inline">arrowDownSvgIcon</span>
<span class="d-none">arrowUpSvgIcon</span>
</span>
<div id="service1" class="collapse mt-3">
collapsable
</div>
</div>
<script>
$(document).ready(function() {
var target = $('span[name="serviceCollapse"]').attr("data-target");
$(target).on('hide.bs.collapse', function () {
var label = $(this).find("label");
var span = $(this);
label.text("Mostrar más servicios ");
var arrowUp = span.find(".d-inline");
var arrowDown = span.find(".d-none");
arrowUp.removeClass("d-inline");
arrowUp.addClass("d-none");
arrowDown.removeClass("d-none");
arrowDown.addClass("d-inline");
});
$(target).on('show.bs.collapse', function () {
var label = $(this).find("label");
var span = $(this);
label.text("Mostrar menos servicios ");
var arrowDown = span.find(".d-inline");
var arrowUp = span.find(".d-none");
arrowDown.removeClass("d-inline");
arrowDown.addClass("d-none");
arrowUp.addClass("d-inline");
arrowUp.removeClass("d-none");
});
$('span[name="serviceCollapse"]').click(function() {
console.log($(this).attr("class"));
if ($(this).attr("class") === "collapsed") alert ("show");
else alert("hide");
});
});
</script>
</body>
</html>
I'm using kendo datepicker here, i have an original div with two datepickers and a duplicated div with two datepickers as well, when i duplicate the div the datepicker events fire once only on the first duplicated div then it stops working, i tried event binding but it didn't work, can anybody help here?
$(document).ready(function() {
$(".from, .to").kendoDatePicker();
$('.calendar').click(function() {
$(this).siblings('.k-datepicker').find('input').data("kendoDatePicker").open();
});
$('.from, .to').each(function(index, el) {
$(el).bind("focus", function() {
$(this).data("kendoDatePicker").open();
});
});
$('.duplicate-btn').on('click', function(e) {
e.preventDefault();
var duplicateable = $(this).next('.duplicate');
var html = $('<div>').append(duplicateable.clone()).html();
$(html).insertBefore(duplicateable);
var new_el = duplicateable.next('.duplicate');
new_el.fadeIn(600).removeClass('duplicate');
});
});
.k-dropdown-wrap .k-select,
.k-numeric-wrap .k-select,
.k-picker-wrap .k-select {
display: none !important;
}
div {
margin-bottom: 15px;
}
.duplicate {
display: none;
}
<link href="http://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" rel="stylesheet">
<div>
<label>From</label>
<input class="from">
<button class="calendar">Calendar</button>
</div>
<div>
<label>To</label>
<input class="to">
<button class="calendar">Calendar</button>
</div>
<button class="duplicate-btn">Duplicate</button>
<div class="duplicate">
<div>
<label>From</label>
<input class="from">
<button class="calendar">Calendar</button>
</div>
<div>
<label>To</label>
<input class="to">
<button class="calendar">Calendar</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
You should not clone() those elements. They go with a lot of properties from the widget. Instead I suggest you to use templates to create new elements and then initialize the widgets on them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script>
$(function() {
$(document).on('focus', '[data-role="datepicker"]', function(index, el) {
$(this).data("kendoDatePicker").open();
});
$('input[type="date"]').kendoDatePicker();
$('button').on('click', function() {
let newDatesTemplate = kendo.template($("#dates-template").html()),
newDates = newDatesTemplate({}),
$newDatesDOM = $(newDates);
$newDatesDOM
.appendTo('#container')
.find('input')
.kendoDatePicker();
});
});
</script>
<script id="dates-template">
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
</script>
</head>
<body>
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
<div id="container"></div>
<button>Add more dates</button>
</body>
</html>
Explanation:
The template:
<script id="dates-template">
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
</script>
A simple example of the template.
Adding more elements:
let newDatesTemplate = kendo.template($("#dates-template").html()), // Creates the template with the `script#dates-template` content
newDates = newDatesTemplate({}), // Runs the template
$newDatesDOM = $(newDates); // Creates a jQuery object with the result
$newDatesDOM
.appendTo('#container') // Appends the new DOM elements to a target element
.find('input')
.kendoDatePicker(); // Inits the widgets
Now this will do the magic you want:
$(document).on('focus', '[data-role="datepicker"]', function(index, el) {
$(this).data("kendoDatePicker").open();
});
That event delegation will execute an event in the original elements and in the dynamically added elements because it is bound to the document.
Demo
Right off the bat, I can see you're assigning two different divs to the same variable declared twice.
var datepicker = $(".from").data("kendoDatePicker");
var datepicker = $(".to").data("kendoDatePicker");
Start off by declaring it separately:
var datepicker_from = $(".from").data("kendoDatePicker");
var datepicker_to = $(".to").data("kendoDatePicker");
I have a table with a bunch of data, and I've placed a button at the end of each row that I want to use to trigger a modal and pass the unique id of that row into the modal.
I found this answer: Passing data to a bootstrap modal
But it doesn't appear to work with Bootstrap 3, and I can't find any data about this anywhere any ideas?
I'm using the same code listed:
Header:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<link href = "bootstrap/css/styles.css" rel = "stylesheet">
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
});
</script>
</head>
Body:
<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
Modal:
<div class="modal" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value="" />
</div>
</div>
The resulting page will open the modal, but the text field is blank.
I forgot to mention, I do have both jquery and bootstrap loaded:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>
Try manually triggering the modal, rather than using the data API.
Update the hyperlink like so:
<a data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
Then adjust your jQuery code:
$(document).on("click", ".open-AddBookDialog", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('id');
$("#bookId").val(myBookId);
$(_self.attr('href')).modal('show');
});
Seems to work for me; jsFiddle # http://jsfiddle.net/4XJ54/
I have a bootstrap modal w/ a colorpicker. When I select to change the color, you can't see the full pallette unless you scroll down.
As a test, I put a jqueryui datepicker in the modal and the full datepicker shows when you click it. How do I get the same functionality w/ the colorpicker? I tried changing the z-index of the colorpicker, but that didn't seem to do anything.
(Note: I don't want this, where the height of the modal changes)
Here's my fiddle and code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" />
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#color_picker").colorpicker();
});
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Date: <input type="text" id="datepicker" /></p>
<input id="color_picker" value="#92cddc"/>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
You can set the overflow-y property of the modal body do visible:
#myModal .modal-body {
overflow-y: visible;
}
Edit:
If your content doesn't fit the dialog, you will have to change the height or max-height properties to fit.
you can add an event on click to the input that opens the color selector like this
$(document).ready( function (){
$('#color_picker').click(function (){
$('.modal-body').animate({minHeight: '300px'});
});
});
and then on click on the color box or something animate height back to its original quantity
hope it helped, bye.
This is a workaround bandage solution only. You can modify the following functions in evol.colorpicker.js source code. Perhaps, you can try converting it a prototype or extend function without changing the source code.
_create: function() {
..............................
// change the following code to pass the evt to show palette
if(showOn==='both' || showOn==='button'){
e.next().on('click', function(evt){
evt.stopPropagation();
that.showPalette(evt);
});
}
}
}
....................
showPalette: function (e) {
if(this._enabled){
this._active=true;
$('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
if(this._palette===null){
this._palette = $('#YOUR_DIALOG_DIV_ID')
.after(this._paletteHTML()).next()
.css({ top: e.clientY + 'px', left: e.clientX + 'px', position: 'absolute' })
.on('click',function(evt){
evt.stopPropagation();
});
this._bindColors();
var that=this;
if(this._isPopup){
$(document.body).on('click.'+that._id, function(evt){
if(evt.target!=that.element.get(0)){
that.hidePalette();
}
}).on('keyup.'+that._id, function(evt){
if(evt.keyCode===27){
that.hidePalette();
}
});
}
}
}
return this;
},