i am instantiating a button widget like so
var button = $('<div>')
.buttonMarkup({
icon: 'plus',
corners: false,
type: 'button',
})
.attr('id', 'my-button')
.text('start') //when this is added the icon vanishes
.appendTo('#my-div');
the trouble is the when i add text no icon is shown. when i add no text icon is shown
is there anything i overlook
thanks a lot in advance
You need to enhance the markup of the div using .button().
Demo
var button = $('<div>')
.buttonMarkup({
icon: 'plus',
corners: false,
type: 'button',
})
.attr('id', 'my-button')
.text('start') //when this is added the icon vanishes
.appendTo('#my-div').button();
Related
I am displaying a modal dialog to get "delete this service" or "cancel" options. When I first click on the button that opens the dialog the two buttons are missing. The red x is icon is displayed in the upper right corner and displays the help text without having to hover over the icon.
If I close it and reopen the dialog both buttons appear as they should. I'm not seeing any errors in the console.
I'm using jquery 3.1.1 and jquery ui 1.12.1. I'm calling the dialog out of a toolbar built in paramquery grid.
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete this service": function () {
var serviceid = grid.getRecId({rowIndx: rowIndx});
$.ajax($.extend({}, ajaxObj, {
context: grid,
dataType: 'text',
url: "/utilities/ajax_delete_service.php",
data: {serviceid: serviceid},
success: function () {
$("#services_grid").pqGrid("refreshDataAndView");
},
error: function () {
this.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
}
}));
$(this).dialog("close");
},
Cancel: function () {
grid.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
$(this).dialog("close");
}
}
});
UPDATED: I've created a fiddle that shows the problem. Run the fiddle, click on the top row of the grid and select "Delete Service" The buttons don't show. close the dialog. Click on "Delete Service" again and the buttons show.
The function for displaying the dialog is at the top of the fiddle.
JSFiddle
I want a firefox extension, so when you click on icon it opens popup and loads my page inside of the popup.
I have next issue. I need when I click on extension icon to pick up URL of the current tab and load my page in popup with sending that URL as query string.
So when you click on icon it opens popup and loads page like "http://example.com?url={current-URL}"
The issue is that it loads my page in popup once, and next time I click on extension it opens already rendered popup. Here is the code I am using:
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var tabs = require('sdk/tabs');
var button = ToggleButton({
id: "my-button",
label: "My button",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width: 700,
height: 543,
contentURL: 'http://example.com?url='+ tabs.activeTab.url,
contextMenu : true,
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
So what I want is each time I click on extension icon it loads my page in panel AGAIN, not just show already rendered page. Is this possible and how I can do this, any help?
Panel's contentURL property has a setter defined, so changing the url is as simple as:
function handleChange(state) {
if (state.checked) {
panel.contentURL = 'http://example.com?url='+ tabs.activeTab.url,
panel.show({
position: button
});
}
}
I am created one sample alloy app in appcelerator studio.
When I click on outside button(image) also event is performed.
How to restrict the click event, If I perform event outside the LeftNavButton or RightNavButton.
Can one help me out.
signIn.js:
$.signInWin.addEventListener('open', function() {
Ti.API.info('signInWin open');
var titleLabel = Ti.UI.createLabel({ text: 'Log In', width: Ti.UI.SIZE});
$.signInWin.setTitleControl(titleLabel);
var leftButton = Titanium.UI.createButton({
backgroundImage : '/left_arrow.png'
});
$.signInWin.setLeftNavButton(leftButton);
var rightButton = Titanium.UI.createButton({
backgroundImage : '/right_arrow.png'
});
$.signInWin.setRightNavButton(rightButton);
leftButton.addEventListener('click', function(e) {
Ti.API.info(' event performed on left button');
});
rightButton.addEventListener('click', function(e) {
Ti.API.info(' event performed on right button');
});
});
signIn.tss:
"#signInWin":{
backgroundColor: '#ffffff',
}
"#signInNav":{
backgroundColor: '#00a2f7',
}
signIn.xml:
<Alloy>
<NavigationWindow id="signInNav" platform="ios">
<Window id="signInWin">
</Window>
</NavigationWindow>
</Alloy>
Sample Screen View
The clickable area of a rightNavButton/leftNavButton extends the button itself by a few pixels. That is a native behavior of iOS. To resolve this, you could wrap the button inside a Ti.UI.View which has a fixed height. That should resolve your problem pretty easy!
I'm new to jquery ui dialog box. I used dialog box in my MVC website.
I placed my dialog container in layout page inside body tag as follows-
<div id="dialogBox"></div>
And then on my view page, I have button with id aMyProfile and written jquery code for opening my dialog box.
html code for aMyProfile -
<input type="button" id="aMyProfile" data-url="#Url.Action("UserProfileContainer","User")" value="View Profile"/>
Jquery code for aMyProfile-
$('#aMyProfile').click(function () {
var currentURL = $(this).attr('data-url');
$('#dialogBox').load(currentURL, function () {
$('#dialogBox').dialog("open");
});
});
and dialog box initaialization as-
$('#dialogBox').dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
position: 'center',
resizable: false,
title: 'Profile',
width: 750
});
all above jquery code is inside $(document).ready(function () {});
when i execute my project it is giving me output as -
My dialog box is not coming at center of window. Even though i set position to center.
I don't understand that where I'm going wrong.
You're specifying the position value wrong. It should be like this:
position: { my: "center", at: "center", of: window }
In any case, the default value for position is center aligned, so just remove it.
http://api.jqueryui.com/dialog/#option-position
I've just had the very same issue. Things to check:
Make sure you have /Scripts/jquery.ui.position.js in your application, if not go here
http://jqueryui.com/download/ and download it, you'll find it in
\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\development-bundle\ui\jquery.ui.position.js
in App_Start/BundleConfig.cs change your jqueryui bundle config from this:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"
));
to this:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.ui.position.js"
));
That should sort it.
I have the following code:
$( ".delete" ).button({
text: false,
icons: {
primary: "ui-icon-trash"
}
});
<button id="delete" class="delete" />test
The word "test" is being appended to the button as its title, for some reason, instead of appearing after the button. If text is set to false, the button shows with only an icon. If text is not set to false, the word "test" appears within the button. It should just be some text following the button, and I can find no reason as to why the button is nabbing it for a title. I've also tried defining a title, a label...hasn't helped. Thanks.
changing your markup as such should resolve this:
<button id="delete" class="delete" ></button>test