I'm trying to dynamically generate a popup in mobile app I'm working on, but I'm experiencing an issue that I can figure out. I added a control-group with a couple of buttons, but the buttons are added twice (see image below). I'm sure it is very simple, but I can't see it. What am I missing here. Thansk!
This is the jQuery code:
var $popUp = $("<div><div/>").popup({
dismissible: false,
theme: "a",
overlyaTheme: "a",
transition: "pop",
positionTo: "window"
}).on("popupafterclose", function () {
//remove the popup when closing
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$("<h2/>", {
text: "Location Details"
}).appendTo($popUp);
$("<label/>", {
text: "Location: " + locationName
}).appendTo($popUp);
$("<label/>", {
text: "Note:"
}).appendTo($popUp);
$("<p/>", {
text: locationNote
}).appendTo($popUp);
$("<div data-role='controlgroup' data-type='horizontal' class='myGroup'/>").trigger("create").appendTo($popUp);
$("<a>", {
text: "Submit"
}).buttonMarkup({
inline: false,
mini: true,
icon: "check",
}).on("click", function () {
$popUp.popup("close");
}).appendTo('.myGroup');
$("<a>", {
text: "Back",
"data-rel": "back"
}).buttonMarkup({
inline: false,
mini: true,
theme: "e",
icon: "back",
}).appendTo('.myGroup');
$popUp.popup('open').trigger("create");
I ended up doing it using grids instead of controlgroup, for my purpose it work just fine:
var $popUp = $("<div><div/>").popup({dismissible: false, theme: "a", overlyaTheme: "a", transition: "pop",positionTo: "window"
}).on("popupafterclose", function () {
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$('<div class="ui-grid-a"><div class="ui-grid-solo"><div class="ui-block-a"> <h2>' + locationName + '</h2><label>Note: </label><textarea disabled="disabled">' + itemClickedNote + '</textarea></div></div>').appendTo($popUp);
$('<div class="ui-block-a" style="width:48%"><a data-icon="back" data-rel="back" data-role="button" class="ui-mini">Cancel</a>').on("click", function () {
$popUp.popup("close");
}).appendTo($popUp);
$('</div>').appendTo($popUp);
$('<div class="ui-block-b" style="width:48%; float:right"><a data- icon="plus" id="addLocationsBtn" data-role="button" class="ui- mini">Submit</a>').appendTo($popUp);
$('</div> </div>').appendTo($popUp);
$popUp.popup('open').trigger("create");
Related
Whenever I click on an div container a Jquery dialogs opens. Everything works smooth expect for the safari browser. For some weird reason when I scroll down it bugs and I dont know what i'm doing wrong.
I hope someone can help me with this issue.
video of the issue: https://streamable.com/89k8b
Jquery dialog:
$(window).resize(function() {
$(".dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
$(document).ready(function(){
$( ".dialog" ).dialog({ dialogClass: 'fixed-dialog', autoOpen:false});
});
var opt = {
autoOpen: false,
closeText: '<?php echo $lang["23"]; ?>',
width: 950,
height: 600,
title: null,
draggable: false,
modal: true,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'z-index': '10', 'top': '50%', 'margin-top': '-350px', 'left': '50%;', 'margin-left': '-1000px' }); },
buttons:
[
{
text: "<?php echo $lang["44"]; ?>",
click: function()
{
$('.dialog').dialog('close');
}
}
]
}
jQuery(function () {
jQuery('.dialog').dialog(opt);
})
html:
<div onclick="$('#dialog-<?php echo $hotel['ms_id']; ?
>').dialog('open').dialog(opt)
Change
position: 'fixed'
to
position: 'absolute'
This should solve your problem
I have a button inside qtip tooltip which remove target object on click to it. But after remove target object(calendar event) tooltip stay visible. How to remove/hide tooltip also?
Below is qtip options and screenshot.
var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>';
element.qtip({
show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: content,
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: $('.fc')
}
});
You can try playing around with having the content be generated from a function, like this:
$('a[title]').qtip({show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: function() {
var context = this.context;
var btn = $('<button class="btn btn-xs btn-default delCalendarEvent" id="55">X</button>');
btn.click(function () {
$(context).qtip().destroy();
$(context).remove();
})
return btn;
},
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: $('.fc')
}
});
JSFiddle: http://jsfiddle.net/tnmj7w1p/
I have the following code:
<script type="text/javascript">
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea></div>"
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea [name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
</script>
How do i incorporate a character count with max 255 characters for the textarea within the dialog box?
I've looked around for code but placing it within the function createDialog won't work and getting length variable doesn't work either when putting it inside the dialog.
Change your dialog to include a DIV for the count:
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea><div>Characters: <span class='charcount'>0</span></div></div>"
Then add the following JS:
$(document).on("keyup edit paste", ".dialog .texbox", function(e) {
var charcount = $(this).val().length;
if (charcount > 255) {
e.preventDefault();
return;
}
$(this).closest(".dialog").find(".charcount").text(charcount);
});
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text' placeholder='"+text+"'></textarea><div>Characters: <span class='charcount'>0</span></div></div>")
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea[name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
$("#button").click(function() {
createDialog("This is a message", "foo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="button">Show dialog</button>
<input id="foo"/>
You would want to use delegation for this. You could do something like this:
$(document).on('input propertychange', '#textarea', function() {
var text = $('#textarea').val();
if (text.length > 255) {
$('#textarea').val(text.substring(0,255));
}
//Maybe some code to display a message to the user, or update a character count element or something?
});
Is there an easy way to stick jQuery UI dialog to particular div?
Actually, one should be able to drag or resize dialog but dialog should not leave the div.
<script>
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame"
};
$( "div.dialog" ).dialog(dialogOptions);
</script>
<div class="frame">
<div class="dialog">
</div>
</div>
Pls check http://jsfiddle.net/TLt4b/1/
Try this:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame" };
$( "div.dialog" ).dialog(dialogOptions).parent().resizable({
containment: ".frame"
}).draggable({
containment: ".frame"
})
Demo:http://jsfiddle.net/TLt4b/2/
Try this out:- http://jsfiddle.net/adiioo7/TLt4b/4/
JS:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
draggable: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
modal : false,
resizable : true
};
$( "div.dialog" ).dialog(dialogOptions).parent().draggable({ containment: ".frame" });
I am using an awesome html2canvas function but I have a noob question. How do I change the field it is capturing from document.body to a specific panel?
In short i need to change document.body to the panel I want to capture, I just don't know the code to get the panel I want.
I have tried Ext.ComponentQuery.query('#testPanel') without any success.
testButtonClicked: function (btn) {
html2canvas(document.body, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
//width: 500,
height: 800,
resizable: true,
autoScroll: true,
preventBodyReset: true,
html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
}).show();
}
});
You want getEl().dom. Here's a standalone example (tested with Ext 4.2.x):
Ext.onReady(function () {
Ext.define('Panel', {
extend: 'Ext.panel.Panel',
frame: true,
title: 'Test Panel',
width: 300,
height: 300,
onClick: function () {
html2canvas(this.getEl().dom, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
width: 300,
height: 300,
html: '<img src="' + canvas.toDataURL("image/png") + '"/>'
}).show();
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'datepicker'
},
{
xtype: 'button',
text: 'CAPTURE THIS PANEL',
handler: this.onClick,
scope: this
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('Panel', {
renderTo: Ext.getBody()
});
});
html2canvas() appears to require a DOM element. Ext.ComponentQuery.query() returns an array of matched elements, so if you use precisely the code you provided, it won't work since the array returned from query() is obviously not a DOM element.
So if query() is actually returning something, you could use the first position:
Ext.ComponentQuery.query("#testPanel")[0]
Or, since you seem to have an ID assigned to the panel, you could simply use getCmp(), which will return only the element which is matched, and not an array:
Ext.getCmp( "testPanel" )