I'm building a site that hosts stories that have multiple chapters and on my view I would like the user to be able to select from a drop down menu and go to the chapter they have selected.
I have the drop down populating with information from the database, I'm just having trouble calling another controller based on that selection.
In my view this is my drop down
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>"><?=$row->chapter_title?></option>
<?endforeach;?>
</select>
I did try and add a link to the controller in the option, but that didn't work.
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>">
<?=anchor('story/viewChapter/'.$row->chapter_id, $row->chapter_title);?>
</option>
<?endforeach;?>
</select>
Is there any other way I can do this that does not involve javascript?
Unfortunately, you will have to use javascript:
If your using jquery you could try something like this:
$('#select_id').change(function(){
var chapter = $(this).val();
$(location).attr('href','http://www.mysite.com/books?chapter='+chapter);
});
Here is an example:
http://jsbin.com/efidar/1/
Related
I'm using selectize.js for dropdown styling with livewire. I'm using livewire for a data table with sortable columns and pagination. The issue is, every time I make pagination or a sort by column, the javascript goes missing thus, there's no styling for the dropdown. I've solved the styling issue using wire:ignore. Now the new problem that I have is that the data passed to the dropdown is not accurate.
#foreach($applications as $application)
<p>{{$application->status}}</p>
<div wire:ignore>
<select class="selectize" name="status" data-width="200px">
#foreach(['Pending',
'Hired',
'Under consideration'] as $status)
<option
#if($application->status === $status) selected #endif>{{ $status }}</option>
#endforeach
</select>
</div>
#endforeach
Inside the <p>{{$application->status}}</p> tag, I get the status 'Pending' but on the dropdown, it shows 'Hired'. The correct status is 'Pending'.
(from comment) #stalwart1014 for example, when I use "select2" I do this
in content section
<select id="select2" wire:model="some">
//.....
</select>
in script section
$(document).ready(function() {
window.initSelectDrop=()=>{
$('#select2').select2({
placeholder: '{{ __('Select') }}',
allowClear: true});
}
initSelectDrop();
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
and in component
public function hydrate()
{
$this->emit('select2');
}
This not always function properly with JS element...but hope this can help you. Greetings
it's maybe a bit late, but worth to mention for the future, I will do not point directly to your issue but explain the workaround of wire:ignore, the wire:ignore directive ignores the updates or changes for the further requests and updates, this attributes is defined for playing with JS third party library, the wire:ignore directive prevent all it's nested elements from updating if you wish to except Childs from updating you can use wire:ignore.self directive
I filled a dropdown list with data from a database table and I have a second one which I want to display information based on the data displayed in the first dropdown. Is there any way I could do this in SPRING? Or could you tell me any other good way to do this?
These are the dropdown-lists:
<select name="Oras" class="drop-down">
<option th:each="oras : ${orase}"
th:text="${oras}"
th:value="${oras}"></option>
</select>
<select name="Baza sportiva" class="drop-down" path="">
<option th:each="bazaSportiva : ${bazeSportive}" th:text="${bazaSportiva.nume}"
th:value="${bazaSportiva}">
</option>
</select>
I created a controller which decides what data should be displayed in the first dropdown(from the database):
#RequestMapping(value="")
public String afisareOrase(Model model){
ArrayList<BazaSportiva> bazeSportive = (ArrayList<BazaSportiva>) bazaSportivaDao.findAll();
ArrayList<String> orase = new ArrayList<String>();
for(BazaSportiva bazaSportiva : bazeSportive){
String oras = bazaSportiva.getOras();
if(!orase.contains(oras)){
orase.add(oras);
}
}
model.addAttribute("orase", (Iterable) orase);
return "platforma/services";
}
You need to write a javascript/jquery code in order to send an AJAX request upon the selection of any option within the first drop-down in order to fetch the second set of your data from database.
then after the AJAX response with its data went back to your AJAX function, use another javascript/jquery function to access to the second select tag (using id/class) and fill it up with the acquired data!
Refer to this youtube video tutorial for understand the concept behind this and implement it in your own code -> Tutorial
How to write Ajax code to retrieve information on to a particular part of webpage when we select option from a dropdown box?
I want information of a particular item that I had selected from a dropdown menu on particular part of my webpage.
Let's say your markup looks something like:
<select id="dropdown">
<option value="1">Some option</option>
<option value="2">Other option</option>
<option value="3">Helpfull option</option>
<option value="4">Don't pick this option</option>
</select>
<div id="details"></div>
In order to make AJAX calls I would use some sort of library. Using for instance jQuery will be much easier than writing code that handles ajax calls across different browsers. The code could look like this:
$('#dropdown').on('change', function(e) {
var currentValue = $('#dropdown').val();
$.get('<someurl>', function(data) {
$('#details').html(data);
});
};
Replace '<someurl>' with the url to the resource you want. Doing this without using jQuery or similar library is a bit more involved. For some guidance you can look at this answer: https://stackoverflow.com/a/2557268/355499
I create an array of numbers for ordering a gallery. I wanted to know if there was a way to have the dropdown default to the last item instead of the first? So with the example code when the page loads it would have the 6th element (value 5) selected as default.
<php? // Codeigniter that generates the select dropdown.
form_dropdown('order', $order);
?>
<select name="order">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
With your update, I am assuming you want to achieve the result below with the CodeIgniter form_dropdown() function?
<option value="5" selected="selected">6</option>
What you would have to do is add a few parameters to the function like this:
echo form_dropdown('order', '', '5');
Try this,
form_dropdown('order', $order, 5);
Check form_dropdown in CI's userguide for this
If you want to fetch the last element dynamically then use end() and key() functions to fetch the key of the last element of the array.
So here goes the code.
form_dropdown('order', $order, key(end($order)));
I have a drop down list that list different options to the user. I need the list to populate a text area based on what the user selects. I have the data already in my database and I want to be able to run a query based the user's selection from the drop down list.
This is how my select tag looks like right now:
<select name="procedure" onChange="">
<option value="">Select Procedure</option>
<cfloop query="procedures">
<option value="#procedureId#">#procedureName#</option>
</cfloop>
</select>
And this is my text area:
<textarea name="procedureDescription" cols="80" rows="6">#the query output will go here#</textarea><br />
Is there a way to use onSelectChange function to control a server side query with Ajax?
I hope my thoughts are clear, if you need more info please ask.
Yes, unless I misunderstand, you should be able to do this using an Ajax request. The onchange method should look something like this:
function handleProcedureChange()
{
var selectedVal = $(this).val();
var url; // TODO set procedure URL here, using selectedVal as needed
$.get(url, function(procedureResult) {
$("#procedureDescription").text(procedureResult);
});
}
Then you'd need to set up the server-side method to run the procedure and return the result as plain text.