In my view tests.index is it possible to open my route tests.show by clicking in a select dropdown where datas comes from database ?
My controller :
public function index(Request $request)
{
$tests = DB::table('test')->distinct()->get();
return view('tests.index')->with('tests', $tests);
}
public function show($id)
{
$test = Test::findOrFail($id);
return view('tests.show', compact('test'));
}
My view index :
<select id="apports" type="dropdown-toggle" class="form-control" name="apports" onchange="{{ route("tests.show", $test->id) }}">
<option value="choisir" selected disabled>Choisir</option>
#foreach($tests as $test)
<option class="apports" value="{{$test->id}}">{{$test->apports}}</option>
#endforeach
When I put my route here : onchange I get the error "Undefined variable: test"
when I add a button below the select like that :
<a class="btn btn-small btn-success" href="{{ route("tests.show", $test->id) }}">Show</a>
I get always the last id of the table...
I would prefer not have a button, just when I change value in the select, return tests.show... Is someone could help me please ?
The $test variable is not set in the index view, only the $tests collection is available because you load the view with that:
return view('tests.index')->with('tests', $tests);
You need to use some JavaScript to achieve what you are looking for.
In the index template:
<select id="apports" type="dropdown-toggle" class="form-control" name="apports" onchange="goToTestPage(this.value)">
Then in your JavaScript file:
function goToTestPage(id) {
window.location.href = "link to your show route/"+id;
}
If the test id is changed dynamically by the user, you can't set it on PHP because PHP is executed before the user actually does the selection, so you have to rely on JavaScript
All you need is a javascript snippet to read the select option change and redirect you.
<select id="apports" type="dropdown-toggle" class="form-control" name="apports">
<option value="choisir" selected disabled>Choisir</option>
#foreach($tests as $test)
<option class="apports" value="{{ route("tests.show", $test->id) }}">{{ $test->apports }}</option>
#endforeach
</select>
<script>
$('select').on('change', function (e) {
var link = $("option:selected", this).val();
if (link) {
location.href = link;
}
});
</script>
Related
A select element with a pre-selected value does not render correctly, if I do not add wire:model to the element, it works well and shows the selected value in the select element.
But I need to add wire:model to save user-updated data
<div class="m-widget4">
#foreach ($this->result as $data)
<div>{{$data->id}}</div>
<select wire:model="list_session_picker.{{ $data->id }}" wire:key="{{ $data->id }}">
<option value="" disabled hidden>Select Session</option>
#foreach ($sessionData as $session)
<option value="{{ $session->id }}">{{ $data->user_session_id == $session->id ? 'selected' : '' }} {{ $session->session }}</option>
#endforeach
</select>
#endforeach
</div>
Componenet.php
public $result = [], $list_session_picker = [];
public $search_picker;
public function render()
{
$data['sessionData'] = Session::all('id', 'session');
$data['sectionData'] = Section::all('id', 'section');
return view('livewire.promote', $data);
}
public function search()
{
$search = ScCompany::query();
if (!empty($this->search_picker)) {
$search->where('session_id', $this->search_picker);
return
$this->result = $search
->whereNull('date_of_enter')
->with(['session:id,session', 'section:id,name'])
->get();
}
}
It works if I remove wire:model, so how could I show the selected value while using wire:model or is there any other way ?
Note** here i set wire:model="list_session_picker.{{ $data->id }}" so the list comes from for each loop can't update each other (on changing the option of one select will not uodate another select element in the list) .
I found this and this solutions, but how to apply them in my case, not much clear to me
You should set the selected element in the livewire component and not in the view. The view will reflect the state of the component thanks to the wire model.
At present you have conflicting views of which element should be selected and they will always be at odds with each other.
Just wire model. If you have an existing item selected, then set it state at the component.
I'm using a Select tag and I have foreach that adds the values to the list, but I have to call an Update Controller and pass it 2 parameters using ActionLink. I tried to do it this way but it doesn't work. I wanted to know what I'm doing wrong?
<form action="Update " method="get" class="select-menu">
<select id="sectionId"
name="sectionId"
class="selectpicker"
title="Section"
data-width="100%"
data-live-search="true"
onchange="this.form.submit()">
#foreach (var item in Model)
{
<option value="#item.Text" data-url="#Html.ActionLink(item.Text, "UpdateBoard", new { subSectionID = item.Value, subsectionName = item.Text })"></option>
}
</select>
</form>
The query should be something like this http://localhost:60082/Update?subSectionID=27&subsectionName=Something
Thank you!
Using the select tag inside the form in way described above will not work properly because of the form doesn't have additional parameters for the route (subSectionID and subsectionName). As result, the Update action method will receiving subSectionID and subsectionName parameters as null.
Therefore, to make these parameters be set dynamically depend on a selection try the following:
<script type="text/javascript">
$('#sectionId').change(function () {
var url = $(this).val();
if (url != null && url != '') {
window.location.href = url;
}
})
</script>
<select id="sectionId"
name="sectionId"
class="selectpicker"
title="Section"
data-width="100%"
data-live-search="true">
#foreach (var item in Model)
{
<option value="#Url.Action("SetLanguage", new { subSectionID = item.Value, subsectionName = item.Text })">#item.Text</option>
}
</select>
Inside the foreach use Url.Action helper instead of the Html.ActionLink. The Url.Action helper generates a fully qualified URL to an action method by using the specified action name and route values.
But the Html.ActionLink returns an anchor element for the specified link text, action and this may cause additional problems when will be passed to the server side.
I have a List of my projects That each project has id. Now I Want send id when click in each project select options, But Just first project id typed. My code is here:
<input type="hidden" id="project_id" value="{{$project->id}}">
<select id="Ouritem" class="form-control">
<option>select</option>
<option value="1"finish</option>
<option value="2">wait</option>
</select>
<script>
$(document).ready(function () {
$(document).on('click', '#Ouritem', function (event) {
var project_id = $('#project_id').val();
console.log(project_id);
});
)};
</script>
How I Can fix it, that when clicked project's select option receive this project_id?
You are targeting the input, not the selectbox.
var project_id = $('#project_id').val();
should be
var project_id = $('#Ouritem').val();
If you want to get value of selected option when it changes , use this :
$('#Ouritem').on('change', function(){
var project_id = $(this).val();
});
$('#Ouritem').change(function(){
console.log($(#project_id).val());
});
use on change instead of on click
I have a select tag in my html code like this:
<select ng-model="brandList" name="brandList" style="width:110px;" >
<option value="" selected>---Please select---</option>
<option ng-repeat="item in brandnameList | unique:'brandname'" value="{{item.brandname}}" style="width:50px;"> {{item.brandname}}</option>
</select>
The values in my select was fetched from the database via API and the code goes like this.
adminService.getbrandnameList()
.then(function(data){
$scope.brandnameList = data.data;
$scope.brandn=data.data[0].brandname;
});
I have another function that needs the selected value on the select tag
$scope.ExportmodalAdmin = function () {
alert( $scope.brandList )
}
But the model for the select which is $scope.brandList returns an undefined value. How can I fix this? I need the value from the select tag to be passed on the function.
Hope you have defined the variable brandList in your controller.
$scope.brandList = {};
Also, Change your ng-repeat statement as below:
<select ng-model="brandList" name="brandList" ng-options="item.brandname for item in brandnameList" style="width:110px;" ng-change="alertChange()" >
<option value="" selected>---Please select---</option>
</select>
Controller code to check change:
$scope.alertChange = function(){
alert($scope.brandList.brandname);
};
look at plunker reference here plunk
I have a shopping cart and I created a simple select list for quantity via Html. I would like to use an Html.ActionLink to get the value of that select list, however if I use JavaScript in will not work as it is inside a PartialView called product and there are multiple number of product on the page.
How could I get the value of that select list without JavaScript? I did look around, but did not find anything useful. Is there any other way?
PartialView
<p>#Model.Description</p>
<p id="price">#Model.Price</p>
<p class="id hidden">#Model.GadgetID</p>
<select name="Select" id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p>
Html.ActionLink("Add To Cart", "AddOrder", "Home",new { qty = ?? , id = Model.GadgetID, price = Model.Price }, null )
</p>
Or if I use JavaScript how can I get the right details as there are multiple products on the page.
View that includes that PartialView.
<div class="col-lg-10 products">
<div class="pad">
#foreach (var item in Model)
{
foreach (var gadget in item.Gadgets)
{
#Html.Partial("Gadget", gadget)
}
}
</div>
</div>
JQuery
<script type="text/javascript">
$(document).ready(function () {
$(".AddToCartBtn").click(function () {
var _qty = $(this).find("#quantity").val();
var _id = $(this).find(".id").val();
var _price = $("#price").html();
alert("qty: " + _qty + " id: " + _id + " price: " + _price);
});
});
You cannot do it without client side javascript because user can change the selection of your quantity dropdown at client side.
With Javascript / jQuery, you can read the value of selected option and append to the query string when the link is clicked. Also since you will have the same markup generated from the partial view, you should not use hardcoded static ids. Id's should be unique for html elements. With your current code, it will generate same id for all the quantity select elements. You can use a css class and use the closest() and find() method to get access to the quantity select element of the link clicked.
<div class="gadgetItem">
<select name="Select" class="qtySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
#Html.ActionLink("Add To Cart", "AddOrder", "Home",
new { #id = Model.GadgetID, price = Model.Price }, new { id="addToCart"} )
</div>
and in JavaScript, listen to the click event on the link. Assuming jQuery is available to the page,(this code should go in the main page,not in the partial view)
$(function(){
$(document).on("click","#addtoCart",function(e){
e.preventDefault(); // Stop the normal link click behaviour
var currentUrl = $(this).attr("href"); // Get the url
// Append the quantity value to query string
var newUrl = currentUrl + "?qty =" + $(this).closest(".gadgetItem")
.find(".qtySelect").val();
window.location.href=newUrl; ///Load the new page with all query strings
});
});
Also I suggest you not read the price from the client request. You should always read it back from the db in server based on the Id of the item. If not, I can update the price in the query string to "0.0001" and order thousands of your products!