I have standard TALL Stack new APP
& I am trying to make select2 from Laravel 8 & Livewire 2
I have follow this
in my live-wire blade I have added this
<div class="w-1/3 px-3 mb-5" wire:ignore>
<x-jet-label for="uid" value="{{ __('Users') }}" />
<select class="select2 w-full rounded-md border border-gray-200 p-2 focus:outline-none focus:border-gray-500" id="uid" wire:model.defer="uid">
<option value="" selected>Choose User</option>
#if(isset($users))
#foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
#endif
</select>
<x-jet-input-error for="uid" class="mt-2" />
</div>
at the bottom of this page
#push('scripts')
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
#endpush
Its not loading Select2 but there is no error in console.
Also I have added
#livewireStyles
#livewireScripts
in layout blade also.
Do I need to add any extra CSS or JS or what I am doing wrong.
Even I have added this in my blade but still not working
#section('style')
#endsection
#section('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('#FirstOption').select2({
placeholder: 'Select an option',
});
});
</script>
#endsection
Thanks
I found they have select2 file in their vendor folder, so i linked them (those links works when i open these two files in web browser).
in header
<link href="{{asset('adminbackend/vendors/select2/dist/css/select2.min.css')}}" rel="stylesheet">
in Footer
<script src="{{asset('adminbackend/vendors/select2/dist/js/select2.full.js')}}"></script>
in body
<div class="item form-group">
<select class="form-control select2-multi" name="tags[]">
#foreach($tags as $tag)
<option value="{{$tag->id}}"> {{$tag->name}} </option>
#endforeach
</select>
</div>
in body
<script type="text/javascript">
$(.select2-multi').select2();
</script>
but, still it not working.. this code found in here https://www.youtube.com/watch?v=BNUYaLWdR04&list=PLwAKR305CRO-Q90J---jXVzbOd4CDRbVx&index=43
It could be the missing quote in the script.
$(document).ready(function() {
$('.select2-multi').select2();
});
Could you try this?
I have couple linked dropdowns and want to prevent form submit on change event if linked dropdown is empty.
<form id="foo">
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),foo.submit" >
...
</select>
<select name="second" on="change:AMP.setState({settings: {second: event.value}}),foo.submit" >
<option value=0> Please select </option>
...
</select>
</form>
Can i check state and then submit form if the value is appropriate? Something like:
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),settings.second ? foo.submit : nothing to do" >
for the first dropdown to avoid form submit when I select new value, because second not welected yet.
Tried make it with validation, but it not work with dropdown, input works fine.
<input type="text"
id="show-first-on-submit-name"
name="name"
placeholder="Digit..."
required
on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit"
pattern="^([1-9][0-9]*)$">
<span visible-when-invalid="valueMissing"
validation-for="show-first-on-submit-name"></span>
<span visible-when-invalid="patternMismatch"
validation-for="show-first-on-submit-name">
Please enter not '0'
</span>
<select name="purpose"
id="purpose"
pattern="^([1-9][0-9]*)$"
required
on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
<option value="0">Please select</option>
<option value="1">One</option>
</select>
<span visible-when-invalid="valueMissing"
validation-for="purpose">missing</span>
<span visible-when-invalid="patternMismatch"
validation-for="purpose">wrong</span>
Validating form by converting input status into an amp-state object and checking them when change event occurs is a little circuitous.
In my opinion it would be more easier to use HTML5 Form validation API (AMP use it as well) to handle input validation works. All you need to do is add required attribute to your <select> element and remove onChange validation logic.
Here is a simple example:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<form target="_blank" action="/">
<select name="tier1" required>
<option value="">Please select</option>
<option value="opt1">tier1 - opt1</option>
<option value="opt2">tier1 - opt2</option>
</select>
<select name="tier2" required>
<option value="">Please select</option>
<option value="opt1">tier2 - opt1</option>
<option value="opt2">tier2 - opt2</option>
</select>
<input type="submit" value="submit" />
</form>
</body>
</html>
Example screenshot:
I'm useing Laravel 5.6. I could make Single select boxes
that is working fine.
I read this page
https://select2.org/getting-started/basic-usage
and I use this CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
I pasted this code below to my blade file. I can see items and I can
click them. but there is no multi view come out and cross mark too.
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
What is wrong my code?
Create a custom JS file. And link it to your html:
<script src="YourJsFile.js"></script>
In YourJsFile.js:
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
Your html file:
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="WY">Wyoming</option>
</select>
I ran into a snag that I cannot figure out what the problem is, I am sure its something incredibly easy to figure out but being new to rails I am stumped.
I have a nice little new.html.erb in one of my controllers that says enter some information:
<h1>Verify your Credentials</h1>
<%= form_tag(:action => 'create') do %>
<br>
<p>Enter your ID -OR- SSN:<%= text_field_tag "theID" %></p>
<p><%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %></p>
<p><%= submit_tag %></p>
<% end %>
Fair enough, this submits to create as per the action in the controller where i do some validation (make sure they selected a proper birthday and filled out the SSN/ID).
So this is what I have
def create
#userid = params[:theID]
#dob = params[:dob]
if #userid.empty?
flash[:error] = "You need to enter yoru valid ID or your SSN"
render :new
end
#yes I knwo this check is bogus, I really need to make sure its not a date from like today at least...
if #dob.empty?
logger.debug "Made it to userid empty"
flash[:error] = "You must include your date of birth"
render :new
end
end
Mostly easy peasy, I know the DOB check is bogus but what happens is if I put in no ID, and click submit or what not then I get the error :
NoMethodError at /create_my_aaccount
undefined method '{:start_year=>1900, :order=>[:month, :day, :year]}' for #<ActiveSupport::HashWithIndifferentAccess:0x4afec50>
On the line:
5 <%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %>
So not sure why it breaks the second time through after the render :new
If i really looked at the error it almost seems that the code to generate the flash might be malformed and making the error the second time through when the flash is trying to display (but I never touched the flash code from application being built originally by generator). So yah totally stuck, and I know this is probably stupid easy to fix...just lack of experience.
new.html.erb :
<h1>Verify your Credentials</h1>
<%= form_tag(:action => 'create') do %>
<br>
<p>Enter your ID -OR- SSN:<%= text_field_tag "theID" %></p>
<p><%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %></p>
<p><%= submit_tag %></p>
<% end %>
HTML Output of the view that breaks
(Caveat HTML output BEFORE the second render :new of the view cause that goes right to error)
So also should be noted, I can take out the date field ion the above erb and it all works fine... so maybe its NOT the flash message I dunno.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Myaccount</title>
<meta name="description" content="Myaccount">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/dataTables/src/demo_table_jui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/create_my_aaccount.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/details.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/emergency_notification.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/recovery.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/create_my_aaccount.js?body=1" type="text/javascript"></script>
<script src="/assets/details.js?body=1" type="text/javascript"></script>
<script src="/assets/emergency_notification.js?body=1" type="text/javascript"></script>
<script src="/assets/helpdesk_home.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/recovery.js?body=1" type="text/javascript"></script>
<script src="/assets/dataTables/jquery.dataTables.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="w4HKsIXFvZU85/8Lfo2Sw1jdotohbNTaikD6y8lZ+fI=" name="csrf-token" />
</head>
<body class="create_my_aaccount new">
<div class="navbar navbar-fixed-top">
<nav class="navbar-inner">
<div class="container">
Myaccount
<ul class="nav">
<li>
Help Desk Login
</li>
</ul>
</div>
</nav>
</div>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<h1>Verify your Credentials</h1>
<form accept-charset="UTF-8" action="/create_my_aaccount" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="w4HKsIXFvZU85/8Lfo2Sw1jdotohbNTaikD6y8lZ+fI=" /></div>
<br>
<p>Enter your ID -OR- SSN:<input id="theID" name="theID" type="text" /></p>
<p><select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_1i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(1i)]">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option selected="selected" value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_2i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option selected="selected" value="11">November</option>
<option value="12">December</option>
</select>
<select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_3i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option selected="selected" value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</p>
<p><input name="commit" type="submit" value="Save changes" /></p>
</form>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
It turns out that the issue was two (maybe three fold):
First:
#dob = params[:dob]
Is not a valid date, I had to do the following:
dob = params[:dob];
#bdate = Date.new dob["bday(1i)"].to_i, dob["bday(2i)"].to_i, dob["bday(3i)"].to_i
assuming my view had bday defined as:
<p><%= date_select("dob", "bday", start_year: 1900, order: [:day, :month, :year]) %></p>
Then after that, it turns out the rails error message was quite nice telling me I had multiple directions..so I consolidated to this:
if #userid.empty? or #bdate.today?
logger.debug "Made it to userid empty"
flash[:error] = "Please enter a valid ID and select a valid birthdate"
redirect_to action: 'new'
end
And I used a redirect not a render because it also stated execution does not stop and in the case of my create method the above code is in, I need it to on error.