Why are onclick events inside qtip2 tooltips not working? - javascript

In the jsfiddle link given below, there are 2 buttons and a tooltip is displayed on clicking of any one of them. I want the button inside the tooltip to change the display and other attributes of the "delete" text and "input text"(make the text field editable) The problem is that the value does update but still the text does not become editable" Please suggest a solution to the problem
JSFIDDLE
HTML
<button id="gear">Gear</button>
<button id="gear1">Gear</button>
<div style="display:none;" id="menu">
<button class="menuitem">Rename</button><br>
<input type= "text" id = "try" readonly = "true"><br>
<div id = "delete" style = "display: block">Delete</div><br>
</div>
​
JavaScript
$(function() {
$("#gear").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$("#gear1").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$(".menuitem").click(function(){
document.getElementbyId("try").readOnly = false;
document.getElementbyId("delete").style.display = none; alert($(this).text());
});
});​
CSS
#gear {
margin:100px;
}
.menuitem {
padding-left: 10px;
padding-right: 10px;
font-size: 9px;
margin-bottom: 3px;
width: 75px;
}

I can suggest you to use jquery selectors:
$(".menuitem").click(function(){
$("#try").attr('readonly', false);
$("#delete").hide();
alert($(this).text());
});

Related

Bind Click Event to Kendo ToolBar

I am trying to bind click event to buttons I have in kendo Tool bar. I am creating button using template.
I am using Kendo Jquery with angular.
Any help will be highly appreciated.
So far I have tried this using Kendo Jquery Documentation:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="toolbar"></div>
</div>
<script>
$(document).ready(function () {
$("#toolbar").kendoToolBar({
items: [
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-arrows-swap'></span>Top/Bottom</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-pencil'></span>Edit</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-calendar'></span>Schedule</a>",
click: onButtonClick()
},
{
type: "splitButton",
text: "Download",
menuButtons: [{
text: "PDF",
icon: "k-i-pdf"
},
{
text: "EXCEL",
icon: "k-i-excel"
}
]
},
{
type: "button",
text: "Action",
overflow: "always"
},
{
type: "button",
text: "Another Action",
overflow: "always"
},
{
type: "button",
text: "Something else here",
overflow: "always"
}
]
});
$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Heading 1",
value: 1
},
{
text: "Heading 2",
value: 2
},
{
text: "Heading 3",
value: 3
},
{
text: "Title",
value: 4
},
{
text: "Subtitle",
value: 5
}
]
});
});
function onButtonClick() {
alert('clicked')
}
</script>
</div>
</body>
</html>
Dojo for the same: https://dojo.telerik.com/#amitdwivedi/uDOFeWev
According to the Telerik Docs for the toolbar Click function, the click event handler is only applicable for toolbar items of type button or splitButton. But, items with a template do not have a type.
So, you need to either use basic buttons instead of templates (then you can use the Telerik click handler), or put the click handler in the template itself like this:
$(document).ready(function() {
$("#toolbar").kendoToolBar({
items: [
{
template: "<a href='' onclick='onButtonClick()' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
// ^^^^^^^^^^^^^^^^^^^^^^^^^
}
]
});
});
function onButtonClick(){
alert('clicked')
}
Example Dojo: https://dojo.telerik.com/UniqiHuF/4

Adding buttons for previous and next slide in Vegas slider

I have very simple slider created with Vegas Slideshow. Now I'm trying to add simple Prev/Next buttons. This is the slider
<div class="slide-caption"></div>
<script src="/assets/js/jquery-3.4.0.min.js"></script>
<script src="/assets/js/vegas.min.js"></script>
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
</script>
This works perfectly. It is showing the image and the caption bellow.
Now I've tried to add this for the buttons but nothing is appeared on page. There is no errors in console. I'm not sure also if I need to add the HTML for the buttons or it is pull them from the JS and CSS of the Vegas
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
// buttons
$('a#previous').on('click', function () {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$('a#next').on('click', function () {
$elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
});
</script>
Anyone know how exactly I can add the buttons?
I haven't tested this, but it may get you heading in the right direction...
HTML...
<div id="previous" class="button"></div>
<div id="next" class="button"></div>
JQUERY...
<script>
$("#previous").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$("#next").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('next');
});
</script>
CSS...
.button {
display: block;
height: 100px;
width: 100px;
background-color: purple;
}

Interact.js resizable and draggable not working together

I have created a fiddle of how my script looks: https://jsfiddle.net/xpvt214o/701253/
This is my code:
HTML:
<div id="_idContainer011" class="tabcontent" data-layer-id="35" data-locked="0" style="position: absolute; width: 107.012px; height: 106.273px;" data-x="-0.48828125" data-y="6.15234375">
<img class="_idGenObjectAttribute-1 _idGenObjectAttribute-2" src="https://redbutton.nl/static/img/mieps/miep_hanging.png" alt="">
<div class="resize-handle-container" id="handle-_idContainer011" style="width: 147px; height: 146.266px;">
<div class="handle handle-left-top" id="handle-_idContainer011-left-top"></div>
<div class="handle handle-right-top" id="handle-_idContainer011-right-top"></div>
<div class="handle handle-left-bottom" id="handle-_idContainer011-left-bottom"></div>
<div class="handle handle-right-bottom" id="handle-_idContainer011-right-bottom"></div>
<div class="handle handle-rotate" id="handle-_idContainer011-rotate"></div>
</div>
</div>
JS:
var target = $('#_idContainer011');
interact('#_idContainer011')
.styleCursor(false)
.draggable({
manualStart: false,
allowFrom: '.handle-rotate',
onstart: function (event) {
console.log('onstart');
},
onmove: function (event) {
console.log('onmove');
},
onend: function (event) {
console.log('onend');
},
});
interact('#_idContainer011')
.styleCursor(false)
.resizable({
manualStart: true,
edges: {
left: true,
right: true,
bottom: true,
top: true
}
})
.on('resizemove', function (event) {
console.log('resizemove');
});
/**
* Resizing element
*/
interact('.resize-handle-container .handle:not(.handle-rotate)').on('down', function (event) {
let interaction = event.interaction,
handle = $(event.currentTarget);
interaction.start({
name: 'resize',
edges: {
top: handle.data('top'),
left: handle.data('left'),
bottom: handle.data('bottom'),
right: handle.data('right'),
}
},
interact('#_idContainer011'), // target Interactable
target[0] // target Element
);
});
I have draggable and resizable for a single element.
The resizing works perfect, but draggable doesn't do a thing. They both work with different handles.
When I disable resizing then draggable comes to life as well but as soon as I enable resizing draggable is dead again (https://jsfiddle.net/xpvt214o/701281/).
What could the problemen be?
I finally figured it out!
Here's the fiddle https://jsfiddle.net/xpvt214o/706134/
My code ended up looking like this:
HTML:
<div id="_idContainer011" class="tabcontent" data-layer-id="35" data-locked="0" style="position: absolute; width: 107.012px; height: 106.273px;" data-x="-0.48828125" data-y="6.15234375">
<img class="_idGenObjectAttribute-1 _idGenObjectAttribute-2" src="https://redbutton.nl/static/img/mieps/miep_hanging.png" alt="">
</div>
<div class="resize-handle-container" id="handle-_idContainer011" style="width: 147px; height: 146.266px;">
<div class="handle handle-left-top" id="handle-_idContainer011-left-top"></div>
<div class="handle handle-right-top" id="handle-_idContainer011-right-top"></div>
<div class="handle handle-left-bottom" id="handle-_idContainer011-left-bottom"></div>
<div class="handle handle-right-bottom" id="handle-_idContainer011-right-bottom"></div>
<div class="handle handle-rotate" id="handle-_idContainer011-rotate"></div>
</div>
JS:
var target = $('#_idContainer011');
interact('#_idContainer011')
.styleCursor(false)
.draggable({
manualStart: true,
onstart: function (event) {
console.log('onstart');
},
onmove: function (event) {
console.log('onmove');
},
onend: function (event) {
console.log('onend');
},
})
.resizable({
manualStart: true,
edges: {
left: true,
right: true,
bottom: true,
top: true
}
})
.on('resizemove', function (event) {
console.log('resizemove');
});
/**
* Resizing element
*/
interact('.resize-handle-container .handle:not(.handle-rotate)').on('down', function (event) {
let interaction = event.interaction,
handle = $(event.currentTarget);
interaction.start({
name: 'resize',
edges: {
top: handle.data('top'),
left: handle.data('left'),
bottom: handle.data('bottom'),
right: handle.data('right'),
}
},
interact('#_idContainer011'), // target Interactable
target[0] // target Element
);
});
interact('.resize-handle-container .handle.handle-rotate').on('down', function (event) {
event.interaction.start(
{
name: 'drag',
},
interact('#_idContainer011'), // target Interactable
target[0] // target Element
);
});
I moved my handles outside the target element en manually called the drag event. For me, it wasn't really clear how to do that from reading the docs where most of the talk was about dragstart, dragmove, draginertiastart, dragend. That confused me. Somehow I ended up trying just drag and it worked.

How to onload <div> to run automatically when page start loading?

My code works well but when i refresh my page, both <div> run together whereas i need only one when each radio button is clicked.
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
});
<div id="a">
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div id="b">
<div id="Revenue2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
and here's my graph code. Revenue and revenue2 basically a graph that will alternately shown when radio button is clicked. so basically both code are the same with different data only.
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'Revenue2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Revenue'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Revenue (RM)'
}
},
plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name;
}
}
}
},
series: [{
type: 'column',
name: 'Revenue',
data: []
}]
}
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
Try hiding one of the divs on document load:
EDIT:
I'm not super familiar with the HighCharts API, but it looks like there is a callback in the constructor that will allow you to do something after the chart is done loading. In this case, I hide the chart after it has finished loading.
$(document).ready(function() {
$(".css-checkbox").click(function() {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
var options1 = {
//removed for brevity;
}
var options2 = {
//removed for brevity;
}
//get chart1
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options1);
});
//get chart2
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options2, function() {
//hide chart after it has been loaded
$("#b").hide();
});
});
});
Since you are dealing with something filling the contents while potentially hidden, you might set the div off screen rather than display: none;.
function setOnScreen(id){
var $a = $("#a");
var $b = $("#b");
var $hide = (id === "one" ? $a : $b);
var className = "offscreen";
$a.addClass(className);
$b.addClass(className);
$hide.removeClass(className);
}
$(document).ready(function () {
setOnScreen($(".css-checkbox[checked]").attr("id"));
$(".css-checkbox").click(function () { setOnScreen($(this).attr("id")); });
});
#a { background-color: aliceblue; border: solid 1px; }
#b { background-color: mistyrose; border: solid 1px; }
.offscreen {
position: absolute;
left: -10000px;
}
<div id="a" class="offscreen">
<div id="Revenue" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<div id="b" class="offscreen">
<div id="Revenue2" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to style button using Jquery

I want to style my 'cancel' and 'save' button using Jquery, how can I do that? Here is my code sample (for cropping image):
$("#img-container").dialog({
modal: true,
autoOpen: false,
width: 1220,
height: 730,
title: "CROP IMAGE",
closeOnEscape: false,
dialogClass: "no-close success-dialog",
open: function (event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
},
buttons: {
Cancel: function () { /* style this 'cancel button'*/
$(this).dialog("close");
},
Save: function () { /* style this 'save' button*/
document.getElementById("item-img").src = currentImage;
cropImage(self.imageFiles[0].name, x, y, width, height);
$(this).dialog("close");
}
}
});
Any suggestion?
Here is my working example in FIDDLE
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This is an example to change button style</p>
</div>
JS
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons:{
"Save":{
text:'Save',
},
"Cancel":{
text:'Cancel',
}
}
});
$('.ui-dialog-buttonpane :button').each(function(){
if($(this).text() === 'Save') {
$(this).css('background', 'green');
}
else if($(this).text() === 'Cancel') {
$(this).css('background', 'red');
}
});
If you are okay with also adding jQuery-UI, it can be very simple:
$('#buttonID').button();
Example:
jsFiddle Demo:
HTML:
<div id="btn">
<div id="middle">
<img src="http://placekitten.com/100/180" />
</div>
<input id="btnOk" type="button" value="OK" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
<input id="mybutt" type="button" value="Open Dialog" />
javascript/jQuery:
$('#btnOk').button();
$('#btnCancel').button();
$('#btn').dialog({
autoOpen: false
});
$('#mybutt').click(function(){
$('#btn').dialog('open');
});
$('#btnOk').click(function(){
alert('you said OK');
$('#btn').dialog('close');
});
$('#btnCancel').click(function(){
alert('you said Cancel');
$('#btn').dialog('close');
});
If you can assign an ID, it would just be:
$('#cancelButton').css('background-color','red');
$('#saveButton').css('background-color','green');

Categories

Resources