Refresh the flexigrid data on dropdown (select) index changed or rebind the flexigrid on index change in javascript or clear the flexigrid data on select change
If you're just looking to bind the grid's refresh with another element, you can use
$('#flex1').flexReload()
I have done the following. On selection change of the Severity, the flexigrid reloads with the data for the selected severity
<select id='ddlSeverity' onchange="setSeverity($('#ddlSeverity option:selected').attr('value'));">
<option value="1">Severity 1</option>
<option value="2">Severity 2</option>
<option value="3">Severity 3</option>
<option value="4">Severity 4</option>
</select>
$(document).ready(function () {
function setSeverity(severity) {
//Construct the URL to be called.
var urlAction = '#Url.Action("RequestQueueBySeverity", "Home", new { severity = "__BOGUS__" })';
//Replace the bogus parameter with the parameter to be passed
urlAction = urlAction.replace("__BOGUS__", severity);
$('#flex1')
.flexOptions({
url: urlAction,
newp: 1
}).flexReload();
}
}
Please mark as answer if it works for you..
For efficient reloading, you can try this:
$("#flexigrid")[0].grid.populate()
Related
i want to sort and show products based on the value selected in a dropdown i.e lowest price,highest price and latest products.i have a tired the code above in the controller and in my jquery script but i get the following error asort() expects parameter 2 to be int, string given.i havent understood where i hve gone wrong with my codebase.
the function in the controller
public function merchadise (){
$products=Merchadise::where('merch_isactive',1)->paginate(2);
if(isset($_GET['nice-select'])&&!empty($_GET['nice-select'])){
if(isset($_GET['nice-select'])=="latest_products"){
$products->sortBy('id','Desc');
}elseif(isset($_GET['nice-select'])=="lowest_price"){
$products->sortBy('merch_price','Asc');
}elseif(isset($_GET['nice-select'])=="highest_price"){
$products->sortBy('merch_price','Desc');
}elseif(isset($_GET['nice-select'])=="product_name_a-z"){
$products->sortBy('merch_name','Asc');
}elseif(isset($_GET['nice-select'])=="product_name_z-a"){
$products->sortBy('merch_name','Desc');
}
}else{
$products->sortBy('id','Desc');
}
return view('frontend.product.product',compact('products'));
}
at the blade file
<div class="showing-product-number text-right">
<form name="sortproducts">
<select class="nice-select" id="nice-select">
<option value="">Default sorting</option>
<option value="latest_products">Sort by new arrivals</option>
<option value="lowest_price">Sort by price: low to high</option>
<option value="highest_price">Sort by price: high to low</option>
<option value="product_name_a-z">Product Name A-Z></option>
<option value="product_name_z-a">Product Name Z-A</option>
</select>
</form>
</div>
the script code
$(document).ready(function(){
$("#nice-select").on('change',function(){
this.form.submit();
});
});
I can easily bind one value to my model, but what if I want to bind two or more?
Sample code, tried to bind to the complex object but it fails.
Component:
<select id="myClassId" #onchange="SelectionChanged" class="form-control">
<option value=""></option>
#foreach (var myObject in myClassList)
{
<option value="#myObject">#myObject.AccountName</option>
}
</select>
Code
void SelectionChanged(ChangeEventArgs e)
{
Console.WriteLine(((MyClass)e.Value).AccountId);
Console.WriteLine(((MyClass)e.Value).AccountName);
}
UPDATE:
Ended up doing this. Probably not the most elegant solution, but I'm not sure if there are other more "supported" ways.
<select id="myClassId" #onchange="SelectionChanged" class="form-control">
<option value=""></option>
#foreach (var myObject in myClassList)
{
<option value="#myObject.AccountId;#myObject.AccountName">#myObject.AccountName</option>
}
</select>
void SelectionChanged(ChangeEventArgs e)
{
var accountId = e.Value.ToString().Split(";")[0];
var accountName = e.Value.ToString().Split(";")[1];
Console.WriteLine(accountId);
Console.WriteLine(accountName);
}
The value of a select is a string. That is a fundamental limitation of the HTML, and has nothing to do with Blazor. You cannot use an object. Your best bet here is to assign an id or some other uniquely identifying value, and then in your onchange handler, look up the actual object you want to assign using that value.
I cannot get a select (drop-down menu) to update with a API response from ngfileupload (sheet names in the file uploaded). I can see the sheet names in what is returned in the browser but cannot get it "into" the select dropdown dynamically.
this.uploader.onSuccessItem=(item,response,status,headers)=>
{
if (response)
{
const res:UploadDataStep1=JSON.parse(response);
const returnDataStep1=
{
Url:res.Url,
SheetNames:res.SheetNames
};
console.log(returnDataStep1.Url);
// this.sheetNames=returnDataStep1.SheetNames;
this.makeTenderStep1_Form.controls['sheetNames'].patchValue(returnDataStep1.SheetNames);
//Input here what needs to happen with data
}
}
and HTML:
<select class="browser-default custom-select"
[ngClass]="{'is-invalid':makeTenderStep1_Form.get('sheetNames').errors&&
makeTenderStep1_Form.get('sheetNames').touched}"
formControlName="sheetNames" id="sheetNames">
<option *ngFor="let name of sheetNames; let i = index" [value]="sheetNames[i]">
{{name}}
</option>
</select>
<ng-template #loading>Awaiting data from uploaded file...</ng-template>
<!-- <span class="form-text text-muted">Please choose which sheet contains the relevant data (Mandatory)</span> -->
<div class="invalid-feedback">You need to select a sheet before continuing</div>
<div class="kt-heading kt-heading--md mt-3">c. Categorise data from file</div>
Found out it was a put request, so could not explicitly work with the return/response from the API (you actually can using Params, but thats a discussion for another day). Changed it to a get request instead which enabled me to work with the return data in the way i wanted.
For SEO purposes I need to render html elements by php. For example I have these elements.
<?php foreach ($elements as $key => $element): ?>
<select name="first" v-model="model[<?= $key; ?>]">
<option value="">Select</option>
<option value="1">Some Text</option>
<option value="2">Some Text</option>
</select>
<select name="second" v-model="model[<?= $key; ?>]>
<option value="">Select</option>
<option value="4">Some Text</option>
<option value="5">Some Text</option>
</select>
...
...
...
<select name="eleven" v-model="model[<?= $key; ?>]>
<option value="">Select</option>
<option value="101">Some Text</option>
<option value="102">Some Text</option>
</select>
<?php endforeach; ?>
And probably I can manipulate these elements like this on vue side.
const count_models = <?= count($elements) ?>; // in the html
const app = new Vue({
el: '#app',
data: {
model:[]
},
mounted(){
console.log(this.model);
for (let $i = 0; $i < count_models; $i++) {
this.model[$i] = "";
}
}
})
I cannot declare the initial values for model[?]. I need an xhr or assign counted items to a javascript variable to get how many select element I have on DOM and to declare initial values as null for each model[]. Even I redeclare the initial values of the models, it doesn't bind. I just put an example on jsFiddle. In Angular1 there was ng-init attribute to declare initial value for the model.
How can I solve this problem ?
https://jsfiddle.net/ks7jmgwv/1/
you just encountered one of the most common gotchas of Vuejs: reactivity (and therefor the lack off)!
The issue here is when the model property is created it's just an empty array/object and any property that you add to that element it's not going to be reactive: that means any kind of change made programmatically won't trigger the Vue's internal whatches, the only reason that the v-model still works is that the changes made by the user and not by the code does actually trigger native HTML events.
You have two possible solutions:
Ignore the reactivy part (but you won't be able to programmatically update the selected value, or at least it won't be visible) and just make sure that the 'Select' option will be selected by default by assigning it the correct value (in that way you can just skip all the default for-loop initialization).
<option :value="undefined" selected="selected" disabled>Select</option>
Follow the offical way suggested by the Vuejs' documentation to add a new property to an object and still having the advantage of reactivity
this.$set(this.model, $i, "");
You can check this plunker in which I'm showing you both the ways of obtaining your goal:
https://jsfiddle.net/8y7eu39z/18/
Also, did you know that for placeholder options in a select you can add the attribute disabled?
Reactivy Reference: https://v2.vuejs.org/v2/guide/reactivity.html
Also: if you want a "null" as a default value but did not manage to find a way to make it being recognized by the "select" options just use :value="null" instead of value="null" and then you should be able to use
this.$set(this.model, $i, null);
I have this collection called servers which is like this: {id, name, code}.
I have this select tag, I iterate over my servers collection and the data() with the model values.
<select v-model="serveur">
<option v-for="server in servers" :key="server.id" :value="server.name">
{{server.name}}
</option>
</select>
.
.
.
data () {
return {
serveur:'',
code:''
}
}
The value "server.name" selected is binded to the model "serveur".
All of this works just fine, but I want the value "server.code to be binded to the model "code"
I can't figure out how to do this. I'm new to vuejs, like I've been working with vue for the first time only two days ago.
This is also my first Stack Overflow "asks" so I hope I am being clear enough.
Thanks in advance.
You really have one independent data item, which I will call selectedServer. It gets the value of the server entry, which contains both name and code.
<select v-model="selectedServer">
<option v-for="server in servers" :key="server.id" :value="server">
{{server.name}}
</option>
</select>
You can simply refer to selectedServer.name and selectedServer.code in the URL you need to assemble from them, or you can create computeds to return those values under whatever names you prefer, like
data: {
selectedServer: {}
},
computed: {
serveur() { return this.selectedServer.name; },
code() { return this.selectedServer.code; }
}
To achieve this, you can bind the select with an array containing 'serveur' and 'code'. But you can't bind the select with multiple variables directly.
You can do comething like that:
<select #input="serveur = $event.name; code = $event.code">
<option v-for="server in servers" :key="server.id" :value="server">
{{ server.name }}
</option>
</select>
If you need fiddle - feel free to ask. It is possible that this example not working :)
I believe you can find an answer here:
https://stackoverflow.com/a/50982485/10954996
that is something I would do - create change handler and change everything I need within handler method
I hope this helps