I have a javascript that changes the output on the same page by using:
<"a href="#" onclick="change('Bob','0','0','2','2','1','0','0')">Bob</a>
<"a href="#" onclick="change('Sam','0','0','2','2','1','0','0')">Sam</a>
<"a href="#" onclick="change('Ted','0','0','2','2','1','0','0')">Ted</a>
I would like to change the links to a dropdown (select - option) form field.
Any help putting me in the right direction will be appreciated.
<select size="1" onchange="change(this.value, '0','0','2','2','1','0','0')">
<option>Bob</option>
<option>Sam</option>
<option>Ted</option>
<select>
Using this.value gives you the currently selected option of the select box (Bob, Sam or Ted).
EDIT
If you want to pass different parameters to your function, you can do it like this:
Javascript:
function selectValueChanged(value){
switch(value){
case "Bob":
change('Bob','-1','0','2','4','6','0','0');
break;
case "Sam":
change('Sam','0','-2','3','5','1','0','2');
break;
case "Ted":
change('Ted','2','1','4','2','3','2','0');
break;
}
}
HTML:
<select size="1" onchange="selectValueChanged(this.value)">
<option>Bob</option>
<option>Sam</option>
<option>Ted</option>
<select>
So you pass your selected value to selectValueChanged, and this function calls the change function with the appropriate paremeters.
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
How does one access the various options for the bootstrap formhelpers library?
I have tried every way of accessing them, but get an error every time.
Specifically, I'm trying to clear out the selected value in a bfh-selectbox
$("#Select").val('');
$("#Select").selectpicker("refresh");
see How to reset value of Bootstrap-select after button click
Its hard to clear the value of a select box since its a dropdown. Do you mean setting the dropdown to a specific option?
For your specic question: You can set and get the value of the bfh-selectbox with JQuery like this:
HTML:
<div id="selBox" class="bfh-selectbox" data-name="selectbox1">
<div data-value="1">Option 1</div>
<div data-value="2">Option 2</div>
<div data-value="3">Option 3</div>
</div>
Get value:
var output = $("#selBox").val();
Set value:
$("#selBox").val([Replace with valid option value]);
BFH are great components, but their documentation is really lacking.
MVC/Razor/Javascript newbie question:
I have a MVC3/Razor form where the use can select a single product from a drop down list.
<div class="editor-label">
Product
</div>
<div class="editor-field">
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
#Html.ValidationMessageFor(model => model.ProductID)
</div>
What I then want is to display the price of the selected product on a label just below the drop down list (model property name is Amount).
This should be pretty easy, but I am pretty new at Razor, and know almost nothing about Javascript, so I would appreciate any verbose explanations of how do do it, and how it all hangs together.
Add a div/span under the Dropdown .
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
<div id="itemPrice"></div>
and in your Script, make an ajax call to one of your controller action where you return the price.
$(function(){
$("#ProductId").change(function(){
var val=$(this).val();
$("#itemPrice").load("#Url.Action("GetPrice","Product")", { itemId : val });
});
});
and have a controller action like this in your Product controller
public string GetPrice(int itemId)
{
decimal itemPrice=0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
return itemPrice.ToString();
}
That is it ! Make sure you have jQuery loaded in your page and this will work fine.
EDIT : Include this line in your page to load jQuery library ( If it is not already loaded),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The Amount isn't available to your view when the user selects a product (remember the page is rendered on the server, but actually executes on the client; your model isn't available in the page on the client-side). So you would either have to render in a JavaScript array that contains a lookup of the amount based on the product which gets passed down to the client (so it's available via client-side JavaScript), or you would have to make a callback to the server to retrieve this information.
I would use jQuery to do this.
Here's a simple example of what the jQuery/Javascript code might look like if you used an array.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This code can easily be built up server side as a string, then
// embedded here using #Html.Raw(Model.NameOfPropertyWithString)
var list = new Array();
list[0] = "";
list[1] = "$1.00";
list[2] = "$1.25";
$("#ProductID").change(displayAmount).keypress(displayAmount);
function displayAmount() {
var amount = list[($(this).prop('selectedIndex'))];
$("#amount").html(amount);
}
});
</script>
<select id="ProductID" name="ProductID">
<option value="" selected>-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<div id="amount"></div>
You'll want to spend some time looking at the docs for jQuery. You'll end up using it quite a bit. The code basically "selects" the dropdown and attaches handlers to the change and keypress events. When they fire, it calls the displayAmount function. displayAmount() retrieves the selected index, then grabs the value out of the list. Finally it sets the HTML to the amount retrieved.
Instead of the local array, you could call your controller. You would create an action (method) on your controller that returned the value as a JsonResult. You would do a callback using jquery.ajax(). Do some searching here and the jQuery site, I'm sure you'll find a ton of examples on how to do this.
--Select--
admin/order/orderlist/paid" style="color:#000000; text-decoration:none">Paid
admin/order/orderlist/successfully" style="color:#000000; text-decoration:none">Successfully
?>
Maybe you are looking for the :selected Selector in jQuery: http://api.jquery.com/selected-selector/ ?
To put it simple, you could do some JS similar to this:
$("#mySelect").change(function () {
var selected = $(this + "option:selected").text();
if(selected == "someValue")
window.location = "someUrl";
});
... that is, when someone selects an item, the text of the selected item is grapped using the jQuery selector. Knowing that value you could then decide to which URL you want to sent the user - in this case, by using window.location.
The corresponding HTML could look like this:
<select id="mySelect">
<option>someValue</option>
<option>someOtherValue</option>
</select>
sorry if its a stupid question but i need a bit of a help.
I made a signup form, and i would like to people select 2 phone numbers.
If i select hungarian a hungarian phone type input slides down, if he selects ukraine than an ukraine phone input type slides down.
here is the html
<input type='text' name='telefon' id='magyar' class='input_title' value='<?php echo set_value('telefon'); ?>' />
<input type='text' name='telefon' id='ukran' class='input_title' value='<?php echo set_value('telefon'); ?>' />
<div class='hiba'><?php echo form_error('telefon'); ?></div>
magyar = hingarian
ukran = ukraine
telefon = phone
telo_tipus = phoe type
my problem is the validation, if i select hungarian and fill it out it says i need to add a phone number but if i select ukraine its ok
here is the validation
$this->form_validation->set_rules('telefon', 'Telefon', 'required|callback_hasznalt_telefon');
could please someone point out what im missing with the validation?
i tried with na=telefon[] but in that case the validation wont work
the callback only validates if the phone is taken thats ok but here it is
function hasznalt_telefon()
{
$telefon = trim($this->input->post('telefon'));
$query = $this->db->query(' SELECT telefon FROM felhasznalok WHERE telefon = "'.$telefon.'" ');
if($query->num_rows() > 0)
{
$this->form_validation->set_message('hasznalt_telefon', 'Ez a telefonszám már használatban van ');
return false;
}
else
{
return true;
}
}
Your codeigniter code is fine, but your html/javascript is what needs to change.
Instead of having two input fields with the same name (which the php script will only read the last one, btw), you should make a select field that changes what input type slides down from the 'telefon' field.
I'm not sure what javascript you are using, but in jquery you can have the the input field event bound on selection from the select field.
If you need more specific guidance for this, let me know and I'll edit my answer.
<select id="telefon_type">
<option>Telefon Type</option>
<option value="magyar">Magyar</option>
<option value="ukran">Ukran</option>
</select>
<input type="text" name="telefon" id="telefon" disabled />
$("#telefon_type").bind("change", function() {
$("#telefon").removeAttr("disabled");
if ($(this).val() == "magyar") {
$("#telefon").bind("focus",function() {
// onfocus event for #telefon for magyar
});
} else if ($(this).val() == "ukran") {
$("#telefon").bind("focus",function() {
// onfocus event for #telefon for ukran
});
} else {
$("#telefon").attr("disabled","disabled");
$("#telefon").val('');
}
});
Please note: I have not tested this code. The general idea behind it is that the filter you are running for the telefon field changes based on your selection of the select field.
Your question has beeen already answered. Phil Sturgeon is working on that issue, so you can try to use the development branch of CI from github.
If you want only ONE telephon number (depends on nationality) I think it would be simplier when you use only ONE input field and write its value to database (or do anything what you want). Or is there any reason to use two input fields?