I am using navButtonAdd to have a column chooser in my jqgrid but it adds the button to the bottom navigation bar. Is it possible to add the same icon to the top of my cloned navigation bar. Here is my code...
jQuery("#grid").jqGrid({
......
toppager: true,
....
);
jQuery("#grid").jqGrid('navGrid','#pager',
{cloneToTop: true, edit:false, add:false, del:false, search:false},
{ }, { }, { }, { } );
jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
caption : "",
buttonicon : "ui-icon-calculator",
title : "Choose Columns",
onClickButton : function() {
jQuery("#grid").jqGrid('columnChooser');
}
});
If the toppager will be created it will have the id constructed from the grid id and "_toppager", so it will be "grid_toppager" in your case. So you should use
jQuery("#grid").jqGrid('navButtonAdd', '#grid_toppager', {...});
See here and here for more details and for demos.
For basic functionality, setting the toppager: true and cloneToTop: true would suffice as below.
$("#list").jqGrid({
pager: '#pager',toppager: true
});
$("#list").jqGrid('navGrid',"#pager",{
cloneToTop:true
});
Related
I have integrated the bootstrap-wysihtml5 editor to description section in my rails application. Now I want to add the client side validation so that it would validate the presence of description field. I used bootstrap-wysihtml5-rails gem.
The editor is being initialized with following code:
<script type="text/javascript">
$(document).ready(function(){
$('#description').each(function(i, elem) {
$(elem).wysihtml5({
toolbar: {
"fa": true, // use Font Awesome
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false // Blockquote
}
});
});
})
Thanks in advance.
Found the solution by adding the events as suggested by the documentation
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
I'm using jquery datatables with theme roller support, and I would like to place a jquery-ui button in a column for each row. In order to do this, I'm using the following code:
oTable = $('#balances').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
...
"aoColumns": [
...
{
"mData": null,
"mRender": function(data, type, row) {
return $("<div />")
.append($("<button id='detail'>Details</button>").button())
.html();
}
}
]
});
The buttons are drawn and I can attach events to them, but it seems that I'm missing something (for example, these buttons don't animate when you move the mouse over them).
How can I correct this? Is there a better way to do it?
Thank you in advance.
Because using multiple identical Ids is not recommended, I'd suggest using a class instead, and moving the .button() call further down in the code:
oTable = $('#balances').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
...
"aoColumns": [
...
{
"mData": null,
"mRender": function(data, type, row) {
return $("<div />")
.append($("<button class='detail'>Details</button>"))
.html();
}
}
]
});
$("button.detail").button();
As I said in a past post, I'm a JavaScript newbie, and now learned some JQuery.
Briefing:
I need to create a dialog box that triggers when someone clicks on Cancel, and has (as text or value)"Are you sure you want to exit?", with two buttons: "Yes, I want to leave" and "No, I want to stay on this page". The redirect part from the "I want to leave" button will figure it out later.
Problem: I want to make the buttons to be autoSizable with the width option (in other words, width:auto and height: (number)px, but I can't figure it out :/
This is my code ->
$(document).ready (function(){
var $dialog = $('<div></div>');
$(".selector").dialog({ modal:true });
var $popUp = $('#btnCancel').one('click', function () {
$dialog
.html('All changes will not be saved')
.dialog({
title: 'Are you sure you want to exit?',
resizable: false,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, I want to leave": function() {
$( this ).dialog( "close" );
},
"No, I want to stay on this page": function() {
$( this ).dialog( "close" );
}
}
});
});
$popUp.click(function () {
$dialog.dialog('open');
return false;
});
});
I tried changing the buttons part for this piece of code ->
buttons: [
{ text: "Exit", 'class':'exit-button', resizable: true, click: function () { $(this).dialog("close"); } },
{ text: "Go back", 'class': 'go-back-button', resizable: true, click: function () { $(this).dialog("close"); } }
]
But in this last case, it creates two buttons with the value of "0" and "1", and have no onclick event.
What should I do?
If you give the buttons an id when you create them you can style them with CSS, including giving them a height and width.
Example - http://jsfiddle.net/tj_vantoll/ckhG6/2/
I'm having some trouble properly using the close dialog event for the columns chooser plugin/widget of jqGrid. Here's what I have - I start with the jqGrid initialization with the column chooser attached at the end, like so
ticketsTable = tableWrap.jqGrid({
url: ... ,
datatype: ... ,
...
loadComplete: function(d) {
...
}
})
.navGrid('#ticketsList_footer', {edit:false, add:false, del:false, cloneToTop:true})
.navButtonAdd('#ticketsList_toppager', {
caption: "Columns",
title: "Reorder Columns",
id: "colButton",
onClickButton: function(){ ticketsTable.jqGrid('columnChooser'); }
});
Then, in the loadComplete function (above) I find the dialog and attach an alert to its close event, like so.
$('#colButton').click(function(e){
setTimeout(function(){
log($( ".ui-dialog" ).length);
$( ".ui-dialog" ).bind( "dialogclose", function(event, ui) {
log('close dialog event captured!');
});
}, 500);
});
For some reason the alert only comes up when I close the dialog via the "x" button in the corner. When I click "ok" or "cancel" there's no alert. What am I missing?
BTW, the reason I'm doing this is that I need to update table's size (setGridWidth) after the dialog closes to adjust for added/removed columns. Maybe there is a more elegant way to do that?
You can use the following code
tableWrap.jqGrid (
'navButtonAdd',
'#pager',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
tableWrap.jqGrid('columnChooser', {
done: function(perm) {
if (perm) {
tableWrap.jqGrid("remapColumns", perm, true);
alert("The column chooser closed with 'OK' button");
} else {
alert("The column chooser closed with 'Cancel' button");
}
}
}
);
}
});
See the demo
I use jquery-UI-map for gmaps, and i want to make popup when i click the maps on Gmaps.
$(function() {
$('#map_canvas').gmap( {'center': new google.maps.LatLng(-0.789275, 113.921327), 'callback': function(map) {
$(map).click( function(event) {
$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
$('#test').dialog({'modal':true, 'title': 'Edit and save point', 'buttons': {
"Remove": function() {
$(this).dialog( "close" );
$(map).setMap(null);
},
"Save": function() {
$(this).dialog( "close" );
}
}});
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
var self = this;
findLocation(event.latLng, this);
}).click( function() {
openDialog(this);
})
});
}});
I want to remove all marker when i click remove button in this code :
"Remove": function() {
$(this).dialog( "close" );
$(map).setMap(null);}
But the marker still remain, someone please help me. Thank you
in plugin version 3 one should use:
$('#map_canvas').gmap('clear', 'markers');
You should call
$('#map_canvas').gmap('clearMarkers');
Haven't worked with that plugin before but a quick glance at the API docs seems to suggest that this might work:
"Remove": function() {
$(this).dialog( "close" );
$(map).clearMarkers();
}