I have the following code segment but can not seem to capture the flipped value.
Java segment in the Head and HTML in Body:
<script>
$('#pauseslider').bind('change', function(event, data) {
if ($(this).slider().val() == 'off') {
alert($('No');
if ($(this).slider().val() == 'on') {
alert($('ON');
});
//**********************************
</script>
<div data-role="fieldcontain" data-theme="a">
<label for="pauseslider" data-theme="e">Mode</label>
<select name="pauseslider" id="pauseslider" data-role="slider" data-theme="e">
<option value="off" data-theme="a">OFF</option>
<option value="on" data-theme="a">ON</option>
</select>
</div>
Related
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
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;
}
I am trying to get jQuery-mobile to clone a div like I get it to do on jsfiddle.
head
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="CreateXMLScript.js"></script>
<script>
$(document).bind('mobileinit', function() {
$.mobile.page.prototype.options.addBackBtn= true;
$.mobile.page.prototype.options.backBtnText="Back";
$.mobile.page.prototype.options.backBtnIcon="arrow-l";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
$.mobile.page.prototype.options.keepNative = ".native";
$.mobile.keepNative=".native";
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
HTML
<div id="Template" class="template hide">
<div class="_100">
<div class="_25">
<fieldset>
<label class="label_analysis" for="analysis">Analyte:</label>
<select class="select_analyte" name="analysis" id="analysis">
<option value="">Select</option>
<option value="TN">TN</option>
<option value="TP,NO2+3">TP,NO2+3</option>
<option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option>
<option value="DO">Dissolved Orthophosphate</option>
<option value="TR">TR Metals, Hardness</option>
<option value="FF">Dissolved Aluminum (FF)</option>
<option value="ULL">TR Metals (ULL Hg)</option>
<option value="TSS">TSS</option>
<option value="TSS/TDS">TSS/TDS</option>
<option value="DM">Dissolved Metals (FF)</option>
<option value="TOC">TOC</option>
<option value="ABF">Anions, Bromide, Fluoride</option>
<option value="CH">Cations, Hardness</option>
</select>
</fieldset>
</div>
<div data-role="controlgroup" class="_13">
<label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">0.45u Filtered</label>
<label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">Field Dup</label>
</div>
<div class="_25">
<fieldset>
<label class="label_preserve" for="preserve">Preserved</label>
<select class="select_preserve" name="preserve" id="preserve">
<option value="">Select</option>
<option value="HNO3">HNO₃</option>
<option value="H2SO4">H₂SO₄</option>
<option value="H3PO4">H₃PO₄</option>
<option value="HCL">HCL</option>
<option value="None1">None</option>
</select>
</fieldset>
</div>
<div class="_20">
<fieldset>
<label class="label_cool" for="cool">Cooled</label>
<select class="select_cool" name="cool" id="cool">
<option value="">Select</option>
<option value="Ice">Ice</option>
<option value="Frozen">Frozen</option>
<option value="None">None</option>
</select>
</fieldset>
</div>
<div class="_13">
Remove
</div>
</div>
</div>
<div id="addNew">
ADD ANALYTE
</div>
Script
<script>
$(document).ready(function() {
(function ($) {
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
})(jQuery)
});
</script>
I have received tons of help with jQuery but no matter what I do, it just won't work in jQuery-mobile. Either it clones upside down (the 1st item becomes last and all fields are populated) or the new fields on the new div won't let me populate them (the current issue).
I didn't create a Fiddle as everything I have tried works in the fiddle, just not in Mobile.
I checked the source of your pages from the link you provided, im not sure exactly what you are trying to achieve as you have a Complex Form. However, place this amended code i made below just before the </body> tag of your page and remove the other script part you have at the moment. Make sure you do a backup of your JQM APP before just incase you need to Undo these changes i am providing.
I also noticed a few $(document).ready(function() { in your pages, these are not needed so remove them. Just a bare bones click functions are ok. You can consolidate all these under one <script> ///// </script>. Where you place your functions is important, as some need to be in the <head> some in the <body> and some after the </body> or </html> tags
<script>
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
</script>
I am developing android app using Jquery Mobile.
I am having some problem with tablesorter plugin with pager.
Here is my HTML page
<div id="mainPager" class="pager">
<form>
<div class="ui-grid-d">
<div class="ui-block-a"><input type="button" data-inline="true" data-mini="true" value="<<" class="first" /></div>
<div class="ui-block-b"><input type="button" data-inline="true" data-mini="true" value="<" class="prev" /></div>
<div class="ui-block-c"><input type="text" data-inline="true" data-mini="true" class="pagedisplay"/></div>
<div class="ui-block-d"><input type="button" data-inline="true" data-mini="true" value=">" class="next" /></div>
<div class="ui-block-e"><input type="button" data-inline="true" data-mini="true" value=">>" class="last" /></div>
</div>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<table class="myTable" id="dataTable" >
<thead>
</thead>
<tbody>
</tbody>
</table>
This is my jquery code.
$(document).on('pagebeforecreate', '#main' ,function(){
fillRoTable() ;
});
function fillRoTable()
{
var html = '';
for (var key=0, size= 1; key<size;key++) {
html += '<tr><th>'
+ "Ticket #"
+ '</th><th>'
+ "Action"
+ '</th></tr>';
}
$('#dataTable thead').append(html);
$.ajax({url: "h**p://xyz.com/test/info?client=ig&docId=2313",
dataType: "jsonp",
async: true,
success: function (result) {
var html1 = '';
for (var key=0, size=25; key<size; key++) {
html1 += '<tr><td>'
+ key
+ '</td><td>'
+ (size-key)
+ '</td></tr>';
}
$('#dataTable tbody').append(html1);
$("#dataTable").tablesorter()
.tablesorterPager({container: $("#MainPager"), positionFixed: false});
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
}
Now my problem is that when main page loads everything is looking fine but if I tap on one of the heading to sort the column then I table becomes empty.
Can anyone suggest me what am I doing wrong here.
Thanks
It looks like we solved this issue by updating the pager script from the original plugin (v2.0.5) to the one from my fork of tablesorter.
I am trying to build a JQM page with a toggle/flip slider that shows/hides txt box based on slider position.
Please see JSfiddle test page.
HTML -
<div data-role="page">
<div data-role="header" data-theme="b">
<label>JQM Slider Toggle test</label>
</div>
<div data-role="container">
<div data-role="fieldcontain">
<label for="OnFront">Device Location:</label>
<select name="OnFront" id="OnFront" data-role="slider" data-theme="b">
<option value="true">Front</option>
<option value="false">Rear</option>
</select>
</div>
<div id="DeviceOnFront">
<div data-role="fieldcontain">
<label for="FrontPosId">Front Position</label>
<input type="text" id="FrontPosId" class="input_txt"></input>
</div>
</div>
<div id="DeviceOnRear" hidden="hidden">
<div data-role="fieldcontain">
<label for="RearPosId">Rear Position</label>
<input type="text" id="RearPosId" class="input_txt"></input>
</div>
</div>
</div>
<div data-role="footer" data-theme="b">
<label>Glyn Lewis</label>
</div>
JS -
$('div[data-role="page"]').bind('pageinit', function () {
// debug test to see if events are firing ???
$("#OnFront").on("start", function () {
alert("User has started sliding my-slider!");
});
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
alert("User has finished sliding my slider, its value is: " + value);
});
// code for changing which txt box is shown
// based on toggle/flip switch
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
if (value == true) {
$("#DeviceOnFront").show();
$("#DeviceOnRear").hide();
} else {
$("#DeviceOnFront").hide();
$("#DeviceOnRear").show();
};
});
};
I am unable to get the slider "stop" event to fire ??
Any pointers would be gratefully accepted.
Here's a working solution made from your example: http://jsfiddle.net/Gajotres/AWyXq/
You had few error's. Events sliderstop and sliderstart don't exist:
$("#OnFront").on("sliderstart", function () {
alert("User has started sliding my-slider!");
});
their correct names are slidestart and slidestop:
$('#OnFront').on('slidestart', function(){
console.log('Start');
});