I want to modify the table on this wordpress page, i only have access to the admin panel.
http://cqpperu.org/colegiados/busqueda-de-colegiados
to only show results if any filter is applied. I didn't find any options on the wordpress plugin to do so. I've tried the solution offered in the WPDataTables forum but it didn't work. I've tried installing Custom css-js-php plugin to be able to insert code to that single page.
I managed to hide the table with CSS using this code
#table_1, #table_1_info, #table_1_paginate { display: none !important; }
but can't show it with JS.
I tried this code without luck.
jQuery("#table_1_filter input").keyup(function (e) {
if ($(this).val().length > 1) {
$("#table_1,#table_1_info,#table_1_paginate").show();
} else {
$("#table_1,#table_1_info,#table_1_paginate").hide();
}
});
i'm very new to javascript so please help. Thank you.
It didn't work for me too but after searching and applying codes online, I came up with this. Hope it works for you.
var $tb = jQuery.noConflict();
jQuery(function($tb) {
$tb('#table_1_filter input').on('keyup', function() {
if( $tb(this).val().length > 3 ){
$tb('#table_1').attr('style','display: table !important'); } else { $tb('#table_1').attr('style','display: none !important'); }
});
});
If anyone knows how to apply it to a specific table only, that would be great. Thanks!
Related
I want to change group of CSS items in jqGrid. Documentation is saying
Of course if we want to change not only one CSS item from a group, but two or more we can use jQuery extend to do this:
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
And this is working partially. But I want to override all icons in my Bootstrap with next code:
$.extend($.jgrid.styleUI.Bootstrap, {
common: {
icon_base: "fa"
},
inlinedit: {
icon_edit_nav: "fa-edit"
},
navigator: {
icon_edit_nav: "fa-edit"
},
// ...
});
and my grid stops working and does not respond to any commands. There are no errors in console.
Do anybody know how to fix the problem in an elegant way and do not override every group separately?
It is unknown which versions of Guriddo jqGrid and Bootstrap are used.
I see you try to use the fontAwesome.
With the last release you can use fontAwesome with ths following settings:
<script>
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = "fontAwesome";
</script>
And point to the needed css files as described in this documentation
You can change the icons the way you do in your code without problems - I have tested this and it works.
In any case, please prepare a simple demo which reproduces the problem, so that we can look into it.
While I was working on a Magento 2 version 2.1.12 webshop I encountered a bug in the country picker field on the checkout page. As you can see on the picture below there are two empty options. I was wondering if this is a known bug on this version of Magento and if there is a possible solution?
With kind regards,
Remco Hendriks
For anyone with the same issue, I made a dirty solution with Jquery and CSS. Since my checkout loads dynamically, the class does not exist at first therefore I made an interval check which stops the function when the class loaded exists.
The Jquery
$(document).ready(function(){
if (!$("select[name='country_id']").hasClass("loaded")) {
setInterval(function(){
$i = 0;
$("select[name='country_id'] > option").each(function() {
$("select[name='country_id']").addClass("loaded")
$(this).attr("name", ($i++) + "-option");
});
}, 1000);
}
});
The CSS
option[name="0-option"], option[name="1-option"] {
display:none !important;
}
Thank you Remco Hendriks
I used this solution
if (!$("select[name='country_id']").hasClass("loaded")) {
setInterval(function(){
$("select[name='country_id'] > option").each(function() {
$("select[name='country_id']").addClass("loaded")
if($(this).val()==undefined || $(this).val()==""){
$(this).hide();
}
});
}, 1000);
}
I was trying to export a hierarchical grid to excel. Just wanted to confirm if this is possible. Currently I was only able to export the parent grid. Please find the jsbin that I created for the issue here.
It's a little bit of work, but there's an example in the docs
I am attempting to get this working as well. In order to get the detail grids, they must be expanded. I am doing it this way, although it contains the correct data in hierarchical form, it is generating .xls file for each row! Maybe you can tweak? The exportGrid function is pulled from docs at link posted by Joe:
if (grid.options.excel.allPages) {
originalPageSize = grid.dataSource.pageSize();
originalHandler = grid.options.dataBound.name;
//show all
grid.dataSource.pageSize(grid.pager.dataSource._total);
grid.bind('dataBound', function (e) {
//expand all
toggleDetailGridRows('expand', $(grid.element).attr('id'));
grid.bind('dataBound', originalHandler);
});
setTimeout(function () {
ExcelHelper.exportGrid(e, grid);
grid.dataSource.pageSize(originalPageSize);
}, 2000);
}
else {
ExcelHelper.exportGrid(e, grid);
}
I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.
Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:
1) Click on the link
2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.
The href value of the tab is simply:
javascript:void(0);
The javascript that runs the operation is this:
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.
Thanks.
Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.
ie
Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:
jQuery('#tab-reviews-tab').click();
Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!
If someone is still interested in a solution, here is a hint to the same question:
souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411
Hope this can help u.
The answer to your question is on gist and ipaste.
Here's this summary:
You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');
If you are only doing this one time just create link as such:
<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
If you expect to do this often just add a new method to the Varien.Tabs (at line 75)
openTab: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
Now your links work like this:
Email
Further Info
I have a multi-select box populated with some pre-defined list. I want to filter those options as user types in the input box above it.
Can anybody suggest any available jQuery plugin?
Thanks,
Saurabh
var input = $('input'),
select = $('select');
input.keyup(function() {
var inputVal = $(this).val(),
inputLength = inputVal.length;
select.find('option').each(function() {
if ($(this).val().substr(0, inputLength) != inputVal) {
$(this).attr({ disabled: 'disabled' });
} else {
$(this).removeAttr('disabled');
}
select.focus();
input.focus();
});
});
jsFiddle.
The focus to select and then back is to make the browser redraw the changes, which it wasn't doing in mine (Chrome 9).
If you want them to actually be removed, you will need to remove them and re-add them as required because display: none didn't work for me.