I'm trying to add a 'select' (dropdown) tag in my handsontable custom header. The problem is, when I click on the dropdown, it does not stay open and I cannot select a different option.
The code looks like this:
colHeaders: function (col) {
var txt;
switch (col) {
case 0:
txt = `<select class='checker'>
<option value="optionone">Option One</option>
<option value="optiontwo">Option Two</option>
<option value="optionthree">Option Three</option>
</select>`;
return txt;
}
}
Here's a jsfiddle for this (I used the official example for custom header renderers, except i replaced the checkbox with a select tag):
https://jsfiddle.net/kjcm2y8f/
If anyone has an idea on how to fix this, I'd appreciate it.
Updating your Handsontable version will help solve the problem. In your jsfiddle, replace your css with this:
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.0.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable#7.0.1/dist/handsontable.full.min.css">
Related
I applied livewire on top of an already made laravel project.
It's simply applying wire:model to select like below.
<select wire:model="wired" id="#selector-01" >
<option>1</option>
<option>1</option>
</select>
and using the wire variable(wired) in if statement in for loop.
<select id="#selector-02">
#foreach($numbers in $number)
#if($some_id == $wired)
<option> some_id </option>
#endif
#endforeach
</select>
I use it only as a component.
all the data is controlled in the original laravel controller.
livewire component is called by #livewire('component-name')
and everything works, as I thought it would, except styling.
I think it has to do with using SlimSelect
At the end of livewire component-name.blade.php, I have SlimSelect styling just like the below.
#push('js')
<script>
new SlimSelect({
select: '#selector-01'
})
new SlimSelect({
select: '#selector-02'
})
</script>
#endpush
I tried moving the codes to
original.blade.php with #push and #stack
app.blade.php without #push
but still styling breaks.
I am thinking a solution might be adding few lines in update() in live wire controller to reinject the styling script.
am I going in the right direction?
Please help.
adding the below code fixed the problem.
<script>
document.addEventListener('livewire:update', function () {
// Your JS here.
new SlimSelect({
select: '#selector-01'
})
new SlimSelect({
select: '#selector-01'
})
})
</script>
you can also use livewire:onload instead of #stack and #push for loading styling onload
Reference to livewire doc
I have Select menu. Each option switches the image displayed. I'm asking how do I translate over the each unique width and height linked to each options onto the actual displayed image. I understand the width and height are baseless as far as they're effect on an option tag but I guess Im saying is that I want a values associated and bonded to each option that come into play and effect the image when the option they are attached to is selected. Something like adding a variable like
var c = a.getElementByTagName('class').getAttributeNode('width').value;??
I really dont know. How do I associate values with the options? Preferably there is a way without attaching a new class to every option. My code so far can only change the src.
I hope you understand the question. I explained it the best I can. Thanks for any help.
<!DOCTYPE html>
<html>
<body>
<select id='select1'>
<option value='pic_unavail' selected width='300' height='300'>-- Choose --</option>
<outgroup label="Animals">
<option value='pic_monkey' id='monkey' width='50' height='100'>Monkey</option>
<option value="pic_cat" id='cat' width='100' height='200'>Cat</option>
<option value="pic_dog" id='dog' width='200' height='250'>Dog</option>
</outgroup>
</select>
<img id="pic">
<script type="text/javascript">
document.getElementById("select1").onchange = select;
var a = document.getElementById('select1')
var b = document.getElementById('pic');
function select() {
b.src = this.value;
return
}
</script>
</body>
</html>
Use:
this.options[this.selectedIndex].getAttribute('width');
this.options[this.selectedIndex].getAttribute('height');
This should give you the selected option's width and height just as you currently have them embedded in each tag. Hope this helps!
I'm trying to implement calling colorbox items from a dropdown menu. Using this example, http://www.jacklmoore.com/colorbox/example4/, how could I simply call these links from a drop down menu? It seems to work fine in every browser except IE without any additional scripting. I'm sure it's going to be simple fix for anyone with true coding skills. Can anyone help me out?
I found something similar after a quick google search
I can't say whether or not this works, but why don't you give it a shot working this code into your jsfiddle, and I'll see if I can help you debug any issues that arise.
from: https://groups.google.com/forum/?fromgroups=#!topic/colorbox/OM85IPMoyP4
<select name="howheard" id="howheard" class="validate[required]">
<option value="http://example1.com">Example 1</option>
<option value="http://example2.com">Example 2</option>
<option value="http://example3.com">Example 3</option>
</select>
EDIT: updadate colorbox() init:
<script>
$(document).ready(function(){
$("#howheard").change(function () {
var thisHref = $(this).val();
$.colorbox({iframe:true, width:"80%", height:"80%", href: thisHref});
});
});
</script>
I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup.
so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.
In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');
zipformcont is class name of div.
The issue is pop up is loading with an error - "The requested content cannot be loaded.
Please try again later."
Please help me to fix this. thanks.
Instead of using .trigger(); why not call fancybox like this:
jQuery.fancybox();
Fancybox triggers depending on the selector its connected to. Not the div its going to open.
jQuery(function(){
jQuery('#zipcode').blur(function(){
jQuery.fancybox({
"content":$('#formcontainer'),
"hideOnContentClick": true,
"hideOnOverlayClick": true
});
});
});
This should do it and get rid of the onblur attribute
I tried another option and it is working fine now.
Option
1) Created a div with CSS attribute - display as none
<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>
2) In the textfield, Onblur called a JS function
<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />
3) In the JS function, I trigered the click function of "azcodelink"
function openpopup() {
$("#azcodelink").trigger('click');
}
4) The id - zipcode_form - has the pop up content
<form id="zipcode_form">
...
</form>
Thats all..
Thanks for all your support.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
});
</script>
<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script
So I have a listbox next to a form. When the user clicks an option in the select box, I make a request for the related data, returned in a JSON object, which gets put into the form elements. When the form is saved, the request goes thru and the listbox is rebuilt with the updated data. Since it's being rebuilt I'm trying to use delegation on the listbox's parent div for the onchange code. The trouble I'm having is with IE8 (big shock) not firing the delegated event.
I have the following HTML:
<div id="listwrapper" class="span-10 append-1 last">
<select id="list" name="list" size="20">
<option value="86">Adrian Franklin</option>
<option value="16">Adrian McCorvey</option>
<option value="196">Virginia Thomas</option>
</select>
</div>
and the following script to go with it:
window.addEvent('domready', function() {
var jsonreq = new Request.JSON();
$('listwrapper').addEvent('change:relay(select)', function(e) {
alert('this doesn't fire in IE8');
e.stop();
var status= $('statuswrapper').empty().addClass('ajax-loading');
jsonreq.options.url = 'de_getformdata.php';
jsonreq.options.method = 'post';
jsonreq.options.data = {'getlist':'<?php echo $getlist ?>','pkey':$('list').value};
jsonreq.onSuccess = function(rObj, rTxt) {
status.removeClass('ajax-loading');
for (key in rObj) {
status.set('html','You are currently editing '+rObj['cname']);
if ($chk($(key))) $(key).value = rObj[key];
}
$('lalsoaccomp-yes').set('checked',(($('naccompkey').value > 0)?'true':'false'));
$('lalsoaccomp-no').set('checked',(($('naccompkey').value > 0)?'false':'true'));
}
jsonreq.send();
});
});
(I took out a bit of unrelated stuff). So this all works as expected in firefox, but IE8 refuses to fire the delegated change event on the select element. If I attach the change function directly to the select, then it works just fine.
Am I missing something? Does IE8 just not like the :relay?
Sidenote: I'm very new to mootools and javascripting, etc, so if there's something that can be improved code-wise, please let me know too..
Thanks!
Element Delegation will not work on field elements (input/select/textarea) in IE's.