I'm currently using JQuery UI SelectMenu Widget in my application. The options in the selectMenu are filled at runtime based on some values in sql tables.
Based on the option selected in the selectedMenu a datatable needs to be filtered on a specific column.
.Js snippet
$(document).ready(function() {
var table = $('.tableContent').DataTable({
"columnDefs" : [ {
"className" : "dt-center",
"targets" : "_all"
} ]
});
$("#osFamilySelect1").selectmenu({
change : function(event, ui) {
dropdownSelect = ui.item.value;
table.column(9).search(dropdownSelect, false, true, true).draw();
}
});
});
The above works when something is selected, but does not work when the page is first loaded i.e the table is not filtered when the page is first loaded.
How to achieve the same.
Resolved the problem using below:
$(function() { // Shorthand for $(document).ready(function() {
var table = $('.tableContent').DataTable({...});
$('#osFamilySelect1').selectmenu({...});
table.column(9).search($('#osFamilySelect1').val(), false, true, true).draw();
});
Related
I'm trying to get the change event of the autocomplete jquery ui widget to work but it doesn't seem to run when the user erases the field. Here is what I have:
$("#clientInput").autocomplete({
minLength: 2,
autoFocus: true,
...
change: function(event, ui) {
if(ui.item === null) {
$(".one_third").load("Order/OrderBook", { client: "" });
}
}
});
It seems to work when the text changes from one value to another but not when the user erases the field. What should I be doing?
I am creating a jquery-ui autocomplete list within a bootstrap layout and I'm with layout issues. My problem is that the list appears transparent, does not change color when the mouse is over the item, and are not respecting height. Can someone explain to me what is wrong? you need to use CSS in this case? I wanted to avoid having to modify the bootstrap to be able to reuse the code in other projects.
important: The autocomplete is inside of a bootstrap modal.
Here is the code I have done:
$(document).on("focus","#FormAlteracaoLocalizacao",function(e) {
if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
$(this).autocomplete({ // call it
open: function(event) {
$('.ui-autocomplete').css('height', 'auto');
var $input = $(event.target),
inputTop = $input.offset().top,
inputHeight = $input.height(),
autocompleteHeight = $('.ui-autocomplete').height(),
windowHeight = $(window).height();
if ((inputHeight + inputTop+ autocompleteHeight) > windowHeight) {
$('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
}
},
source: '../asp/source.asp',
minLength: 2,
select: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
focus: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
select: function( event, ui ) {
$("#situacaoimpressora").focus();
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
$("#FormAlteracaoLocalizacao").val(FormAlteracaoLocalizacao);
$("#FormAlteracaotxtCdLocalizacao").val(FormAlteracaotxtCdLocalizacao);
}
}
});
$(this).autocomplete( "option", "appendTo", ".form-horizontal" );
}
});
If you are using the jQuery-UI Autocomplete, then you'll need to use the associated jQuery-UI CSS for it in order for it to render correctly.
Just add a link to one of the built-in themes that comes with JQuery UI. Then your problems will be solved. e.g. link rel="stylesheet" href="~/lib/jqueryui/themes/cupertino/theme.min.css"
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
I have two JQuery UI autocomplete input fields.
When an option is selected in the first one, the value of the selection will be used as condition for a database query that will send the source data for the second autocomplete field.
My problem is how do I send the value of the first selection to the PHP page via Post method?
The code so far is shown below (this code is from a tutorial which used the GET method; but I want to use Post):
<script>
$("input#divisions").autocomplete ({
//this is the first input
source : [
{ value: "81", label: "City1" },
{ value: "82", label: "City2" },
{ value: "83", label: "City3" } ],
minLength : 0,
select: function(event, ui) {
$('#divisions').val(ui.item.label);
return false;
},
focus: function(event, ui){
$('#divisions').val(ui.item.label);
return false;
},
change: function(event, ui){
//the tutorial has this value sent by variables in the URL; I want the selection value sent by POST. How can I change this?
c_t_v_choices = "c_t_v_choices.php?filter=" + ui.item.value;
$("#c_t_v").autocomplete("option", "source", c_t_v_choices);
}
}).focus (function (event)
{
$(this).autocomplete ("search", "");
});
$("#c_t_v").autocomplete({
source: "",
minLength: 2,
select: function(event,ui){
//$('#city').val(ui.item.city);
}
});
</script>
Can anyone please help?
Dont hesitate to let me know if you have any questions.
The solution I found for this is to use AJAX to create the source when a selection is made in the first autocomplete.
Sample code can be found here: https://stackoverflow.com/questions/12715204/assigning-source-for-jquery-autocomplete
I have been wrestling with this one for a while now.
I want to have a confirm() before someone changes the accordion.
I have tried:
$(document).ready(function() {
var edited = false;
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
});
With little joy! I have also tried something like this
$(".accordion-me h3").each(function() {
$(this).unbind("click");
$(this).click(function(e) {
if (confirm("You have unsaved changes! Do you want to navigate away?")) {
$(this).unbind("click");
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
$(this).click();
}
});
});
But again with no joy.
Any help would be greatly appreciated.
Cheers
Use an empty event when creating the accordion, which will allow you to manage the click event of the accordion using a jQuery .click function.
You can then process the confirm box and allow the accordion click event to be executed only if confirmed.
$(document).ready(function()
{
var edited = false,
accordion_me = $('.accordion-me');
// activate the accordion, but with an empty event
accordion_me.accordion({
autoHeight: false,
navigation: true,
event: ''
});
// here's the new accordion event
$('.accordion-me h3').click(function()
{
// find the index of the event being called
var i = $('.accordion-me h3').index(this);
// if we have unsaved changes and do not confirm, stop accordion execution
if (edited && !confirm('You have unsaved changes. Do you want to navigate away?'))
{
return false;
}
// continue with the accordion execution. Activate the requested event index.
accordion_me.accordion('activate', i);
return false;
});
});
If your accordion is collapsible (as mine is) your accordion will still work as it did before.
Also, if you only have 1 accordion, I would recommend using an id to call it instead of the .accordion-me class, which will save some overhead.
If you still need to use a class to call it, put an html tag before it, i.e. div.accordion-me.
You have to bind it to the click event on the anchor tag. For example, if your header links are:
header 1
code would be (also in the document.ready function)
$('.accordionHeaderLink').click(function(){
if (!confirm("You have unsaved changes. Do you want to navigate away?")) {
return false;
}
});