Why with select data-native-menu="false" options are not showing? - jquery-mobile

I am using jquery mobile 1.3.0 and I have the following code for the select menu. When I use data-native-menu="false" the options are not showing up. Without data-native-menu="false" the options visible to the user.
<div data-role="fieldcontain">
<label for="virtuemart_product_id_box" class="select"> Nombre de producto:
</label>
<select id="virtuemart_product_id_box" name="virtuemart_product_id_box" data-prevent-focus-zoom="true" data-native-menu="false">
<option value="">Seleccione un producto</option>
<option value="84">Fromage Artesano Tres Leches Madurado 425 gr.</option>
<option value="85">Queso de Cabra Madurado 425 gr.</option>
<option value="83">Queso de Oveja Madurado 425 gr.</option>
<option value="86">Queso de Vaca Madurado 425 gr.</option>
<option value="87">Queso de Vaca Madurado Ahumado 425 gr.</option>
On debug the following information is presented:
Scrolling to target -99919 of #virtuemart_product_id_box-listbox.
Why is this happening?
I am using this select in a virtuemart view. I use view.html.php to load the select options
$options = array();
$options[] = JHTML::_('select.option', '', JText::_('Seleccione un producto'));
foreach($products as $product):
$options[] = JHTML::_('select.option', $product->virtuemart_product_id, $product->product_name);
endforeach;
if (isset($product_id)){
$this->lists['products']= JHTML::_('select.genericlist', $options, 'virtuemart_product_id_box', 'class="inputbox" onchange="this.form.submit();" data-prevent-focus-zoom="true" data-native-menu="false" ', 'value', 'text', $product_id);
}
else {
$this->lists['products']= JHTML::_('select.genericlist', $options, 'virtuemart_product_id_box', 'class="inputbox" onchange="this.form.submit();" data-prevent-focus-zoom="true" data-native-menu="false" ', 'value', 'text',$options[0]);
}
The default.php that renders html
<?php
defined('_JEXEC') or die('Restricted access');
JHTML::_( 'behavior.modal' );
$document = JFactory::getDocument();
?>
<form action="<?php JRoute::_('index.php'); ?>" method="post">
<h1 class="title">
<?php echo JText::_('COM_VIRTUEMART_PRODUCER') .' '.$this->mf_name ?>
</h1>
<div data-role="fieldcontain">
<label for="virtuemart_product_id_box" class="select"> <?php echo JText::_('COM_VIRTUEMART_PRODUCT_NAME') ?>:
</label>
<?php echo $this->lists['products']; ?>
</div>
</form>
I am also using Jtouch template for joomla mobile display.
I found the following scripts on my html:
<script type="text/javascript">
var jtouchPageId = 0;
var jtouchPageTransition = 'fade';
var jtouchHeaderTheme = 'b';
var jtouchAdd2HomMessage = 'Install this web app on your %device: tap %icon and then <strong>Add to Home Screen</strong>.';
var jtouchShowAppDialog = true;
var jtouchPage = '';
</script>
<script type="text/javascript">
vmSiteurl = 'http://localhost/seleccionatu/' ;
vmLang = ""
vmCartText = 'fue agregado a su carro' ;
vmCartError = 'Hubo un error al actualizar su carro' ;
loadingImage = '/seleccionatu/components/com_virtuemart/assets/images/facebox/loading.gif' ;
closeImage = '/seleccionatu/components/com_virtuemart/assets/images/facebox/closelabel.png' ;
Virtuemart.addtocart_popup = '1' ;
faceboxHtml = '<div id="facebox" style="display:none;"><div class="popup"><div class="content"></div> </div></div>'
window.addEvent('domready', function() {
SqueezeBox.initialize({});
SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});
});
Can these scripts cause the popup for the select not to open? Also noticed that the URL is added with #virtuemart_product_id_box-listbox

Related

updatedFoo + select2 not working in livewire, why?

I just want to show the spinner during option selection
<div wire:ignore class="mt-0 ">
<select class="form-control form-control-sm custom__select " id="select2" wire:model="check">
<option value="10">-- Select region --</option>
#foreach($regions as $region)
<option value="{{ $region->region_id }}">{{ $region->title_ru }}</option>
#endforeach
</select>
</div>
#if($loadState)
<div class="position-relative">
<div class="spinner-border spinner-border-sm text-light " role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
#endif
#push('scripts')
<script>
$(document).ready(function () {
$('#select2').select2({
placeholder: 'Select an option',
});
$(document).on('change', '#select2', function (e) {
#this.set('selRegion', e.target.value);
});
});
</script>
#endpush
controller:
public function updatedCheck()
{
$this->loadState = true;
}
this works without wire:ignore, but select2 itself doesn't work without it. i saw a similar question, but can't figure out how to apply it to my example

Dynamic Drowpdown on Select2 livewire laravel 8

I build a dynamic dropdown in select option but when i implement a select2 package it not work. Here is my code. The value of type not passing to the court select.
here is my Blade.php
{{$selectedType}}
<div class="row g-3 mb-3">
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" id="type" wire:model="selectedType" required>
<option value="">Select Court Type</option>
#foreach($types as $type)
<option value="{{$type->id}}">{{$type->court_type_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Type</label>
</div>
</div>
#if (!is_null($courts))
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" wire:model="selectedCourt" required>
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}, {{$court->province}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
</div>
#endif
</div>
The livewire components works perfectly but in select2 it not work
public function render()
{
$types = Type::All();
$periods = Period::All();
return view('livewire.collection.add', compact('types', 'periods'));
}
public function updatedSelectedType($court_id)
{
$this->courts = Court::where('court_type', $court_id)->orderBy('court_name')->get();
}
public function updatedSelectedCourt($clerk_id)
{
$this->clerks = Clerk::where('court', $clerk_id)->get();
}
Select2
<script>
$(document).ready(function () {
$('.form-select').select2();
$('#type').on('change', function (e) {
var data = $('#type').select2("val");
#this.set('selectedType', data);
});
$('#court').on('change', function (e) {
var data = $('#court').select2("val");
#this.set('selectedCourt', data);
});
});
</script>
Nothing happen when clicked.
I solve select2 element in Livewire like this.
<div class="form-floating">
<select class="form-select" wire:model="selectedCourt">
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
//
<script>
$(document).ready(function() {
window.initSelectDrop=()=>{
$('.form-select').select2({
placeholder: '{{ __('locale.Select') }}',
allowClear: true
});
initSelectDrop();
$('.form-select').on('change', function (e) {
livewire.emit('selectedItemCourt', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
</script>
in component
public function hydrate()
{
$this->emit('select2');
}
public $listeners = ['selectedItemCourt'];
//.....
public function selectedItemCourt($value)
{
dd($value);
$this->selectedCourt = $value;
}

CaptchaMvc.Mvc5 does not showing the refresh button?

I want to create a Captcha to add new users on my website. To do this I'm trying to use the CaptchaMvc.Mvc5 but it doesn't show de refresh button to change the captcha image.
Looking at the developer inspect of Chrome it has an exception about Uncaught ReferenceError: $ is not defined at add:271 and I think this is the problem, then, in this line has this code below generated by CaptchaMvc.Mvc5.
line 271
<div class="text-center">
<script type="text/javascript">
$(function () {$('#0e12b41cddf84cd6a548118316ab8aed').show();}); //line 271
function ______3eec991ccebe425ba220485ba983374e________() { $('#0e12b41cddf84cd6a548118316ab8aed').hide(); $.post("/DefaultCaptcha/Refresh", { t: $('#CaptchaDeText').val() }, function(){$('#0e12b41cddf84cd6a548118316ab8aed').show();}); return false; }</script>
<br/>
<img id="CaptchaImage" src="/DefaultCaptcha/Generate?t=d230fe1e79a3448f987705cf22a90432"/><input id="CaptchaDeText" name="CaptchaDeText" type="hidden" value="d230fe1e79a3448f987705cf22a90432" /> <br/>Refresh<br/>Digite o texto da imagem acima<br/><input autocomplete="off" autocorrect="off" data-val="true" data-val-required="Texto requerido" id="CaptchaInputText" name="CaptchaInputText" type="text" value="" /><br/><span class="field-validation-valid" data-valmsg-for="CaptchaInputText" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="CaptchaInputText" data-valmsg-replace="true"></span>
</div><!--/captcha-->
How could I fix it ?
My Html
#{
var captcha = Html.Captcha("Refresh", "Digite o texto da imagem acima", 5, "Texto requerido", true);
}
<div class="text-center">
#captcha
#Html.ValidationMessage(captcha.BuildInfo.InputElementId)
</div><!--/captcha-->

laravel 5.4 select2 multiple edit

I don't know how to populate the edit function my select2 form. Here's my attempt on doing it. Controller:
public function edit($id)
{
$company = Company::find($id);
$categories = MainCategory::all();
$categories2 = array();
foreach ($categories as $category) {
$categories2[$category->main_cat_id] = $category->main_cat_name;
}
return view('company/edit_company')->with('company', $company)->with('categories', $categories2);
}
here's my view:
<select class="form-control select2-multi" name="company_main_cat[]" multiple="multiple" style="width: 50%" data-placeholder="select main category">
<option value='{{$category->main_cat_id}}'>{{$category->main_cat_name}}</option>
</select>
here's my JS:
<script type="text/javascript">
$('.select2-multi').select2();
$('.select2-multi').select2().val({!! json_encode($company->maincategories()->allRelatedIds()) !!}).trigger('change');
</script>
if you get your category data correctly to your view; Which seems to be an array from the code. You can foreach them inside your select element.
<select class="form-control select2-multi" name="company_main_cat[]" multiple="multiple" style="width: 50%" data-placeholder="select main category">
#foreach($category as $category_single)
<option value='{{$category_single->main_cat_id}}'>{{$category_single->main_cat_name}}</option>
#endforeach
</select>

How can we select an option while loading them in Select Menu

I am adding new options to a select menu by the following way:
var options1 = {
val1 : 'text1',
val2 : 'text2'
};
$.each(options1, function(val, text) {
$('#SelectMenu').append( new Option(text,val) );
});
How can we set the properties like a default selected option and optgroup options available in JQM?
Live Example: http://jsfiddle.net/rULKH/5/
<div data-role="page" data-theme="b" id="option-page">
<div data-role="content">
<div data-role="fieldcontain">
<label for="SelectMenu" class="select">Select Menu</label>
<select name="SelectMenu" id="SelectMenu">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
JS
var options1 = {
val1 : 'text1',
val2 : 'text2'
};
$.each(options1, function(val, text) {
$('#SelectMenu').append(new Option(text,val)).val( val ).attr('selected',true).selectmenu("refresh");
});

Resources