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);
}
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.
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!
I am trying to display water mark for my Html.Editorfor ,
Here is my ViewModel
[Display(Prompt="This is a WaterMark")]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyy}", ApplyFormatInEditMode = true)]
public DateTime Dob { get; set; }
Here is my view
#Html.EditorFor(model => model.Dob)
here is my EditorTemplate String.cshtml at \Views\Shared\EditorTemplates\String.cshtml
#Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, new { #class="text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })
I tried this by following this thread .But my watermark never showed up ,but why ?
Appreciate your help to resolve this
This code successfully renders the placeholder attribute in the corresponding <input> tag. This is an HTML5 attribute that the browser that you are using must support in order for something to happen. For example if you are using Internet Explorer, it's only in its future 10.0 version that will be added support for this attribute.
There are client scripting solutions such as the jquery watermark plugin that you could use to attach the desired behavior for browsers that do not natively support it yet.
watermarking using Display(Prompt never worked for me. But with this jquery you can show watermark on your text box .Here I am using an image in place of watermark.You need to create an image of the watermark text.
$(document).ready(function () {
/*Watermark for date fields*/
if ($("#dob").val() == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
$("#dob").focus(function () {
if (watermark == 'MM/DD/YYYY') {
$("#dob").css("background-image", "none");
$("#dob").css("background-color", "#fff");
}
}).blur(function () {
if (this.value == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
});
$("#dob").change(function () {
if (this.value.length > 0) {
$("#dob").css("background", "#fff");
}
});
}
To answer specifically your question: why the solution in the post you were following didn't work for you:
Reason the solution you linked to didn't work is because you use IE. Try the same code in Chrome - it will show the prompt alright. I hope IE10 will catch up.
I have a Magento which uses the simple configurable products plugin. For those of you that don't know, once you've chosen your configurable product options, it then uses an AJAX query to get the custom options of the simple product which makes up your configurable product selection.
The problem exists on this page.
When someone choose the simple product they want based on the pack size, it is supposed to get the custom option when lets them decide on colour choice.
This works fine in every single browser except IE9 in 64bit mode (which happens to be the browser my client uses!!!!)
I have already tried to force the document type using:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
but to no avail in this 64bit version...
The plugin developer have done their best to ignore me, so I'm kinda stuck. Here's the AJAX call that the script makes - I wondered if it's perhaps something to do with the ActiveX Object not being loaded?
Product.Config.prototype.showCustomOptionsBlock = function(productId, parentId) {
var coUrl = this.config.ajaxBaseUrl + "co/?id=" + productId + '&pid=' + parentId;
var prodForm = $('product_addtocart_form');
if ($('SCPcustomOptionsDiv')==null) {
return;
}
Effect.Fade('SCPcustomOptionsDiv', { duration: 0.5, from: 1, to: 0.5 });
if(productId) {
//Uncomment the line below if you want an ajax loader to appear while any custom
//options are being loaded.
$$('span.scp-please-wait').each(function(el) {el.show()});
//prodForm.getElements().each(function(el) {el.disable()});
new Ajax.Updater('SCPcustomOptionsDiv', coUrl, {
method: 'get',
cache: false,
evalScripts: true,
onComplete: function() {
$$('span.scp-please-wait').each(function(el) {el.hide()});
Effect.Fade('SCPcustomOptionsDiv', { duration: 0.5, from: 0.5, to: 1 });
//prodForm.getElements().each(function(el) {el.enable()});
}
});
} else {
$('SCPcustomOptionsDiv').innerHTML = '';
window.opConfig = new Product.Options([]);
}
};
Any thoughts/ideas would be much appreciated!
As Anton S suggested, upgrading Prototype actually worked! You can download the latest version of the framework from here: http://www.prototypejs.org/
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.