I have a page with 3 combos, 6 dependents inputs text ( if a special value is selected in combo, it will show, otherwise it will hide)
Then, I will have A text fields that is a computed property. Each time an input is changed, it will reevaluate this field value.
So, For instance, My fields are:
GradeIni, GradeFin, Category, AgeCategory, AgeIni, AgeFin , Gender (selects)
isTeam ( Checkbox )
CategoryFullName
So, for example, There is 5 predefines AgeCategory,and the 6th is Custom, when Selected, it show AgeIni and AgeFin
Each time a value is change, CategoryFullName is reevaluated.
My first answered question was how to get values from server.
I knew how to do it with Ajax, but in this case, it was easier to just use Server variable sent by Laravel when pages load.
So, the answer was 2 options:
#foreach ($grades as $grade)
<option ...>{{ $grade }}</option>
#endforeach
Or
<grades :grades="{{ $grades }}"></grades>
So, I would like to use the second one, but it means I have to create a component for each Select Option in my page, which seems a little heavy.
So, I'm a little bit confused about how should I make this page. Is it better by AJAX, is it better to be able to get data from laravel, and o make a component for each list, or is there a better way to do it????
You dont need to use many components. One component and one variable to keep the selected grade are fine.
You can create a component template to display all the grades.
I have created one template with dummy data to show you how you can do it.
<template id="grades-list">
Curently selected: Title {{selected.title}} Value: {{selected.value}}
<select v-model="selected">
<option v-for="grade in grades" :value="grade">{{grade.title}}</option>
</select>
</template>
The component should be registered like this:
Vue.component('grades', {
props: ['grades', 'selected'],
template: '#grades-list'
})
The tricky part is how you will select a default value and keep it synced with the parent. To do so, you can use .sync
<!-- you can use :grades="{{ grades }}" with Blade too-->
<grades :grades="grades" :selected.sync="selectedGrade"></grades>
To set default value you can update the selectedGrade variable when the document is ready, using vm.$set.
new Vue({
el: 'body',
data: {
'selectedGrade': ''
},
ready() {
this.$set('selectedGrade', this.grades[1])
}
})
I have created an example with dummy data here.
Related
I am using VueJS with bootstrap-vue, and using Laravel Dusk, I need to test a table inside a modal that uses a checkbox to select each row. In this particular case, there are multiple rows with checkboxes, and I need to select all of the checkboxes in the form and then submit the form. My test works fine with the modal in every way except checking the checkboxes; no matter what I try, I can't get the check() (or click()) method to check more than the first one. I've tried
->check("input[type=checkbox]")
and using the name
->check("input[name='my-custom-name']")
but I still only get the first item checked. Based on this, I tried something like
$checkboxes = $browser->driver->findElements(WebDriverBy::name('my-custom-name[]'));
for ($i = 0; $i <= count($checkboxes); $i++) {
$checkboxes[0]->click();
}
but even that only checks the first checkbox. What do I need to do to select all of the checkboxes in the table?
The answer was to first, add a custom dusk selector to the checkbox using the row index:
<template #cell(selected)="row">
<b-form-checkbox
v-model="row.item.check"
#input="rowCheckboxClick($event, row.index, row.item)"
plain
:dusk="'my-custom-selector-' + row.index"
>
</b-form-checkbox>
</template>
and second, use the selector within the test.
->whenAvailable(new PursuitModelRestoreDeletedModal(), function(Browser $browser) {
$browser->waitForText('Click on the checkbox in the Select column')
->assertSee('My Modal Title')
->check('#my-custom-selector-0')
->check('#my-custom-selector-1')
->check('#my-custom-selector-2')
->check('#my-custom-selector-3')
->click('#ok-button');
})
Yes, the code could probably be a little cleaner with a loop instead of having each selector listed separately, but this works.
We've just moved over from bootstrap to Vuetify, but i'm struggling with something.
We have some updates sent (over signalR) that update a list of jobs, i'd like to be able to target a job that has been changed and change the row color for that particular job for a few seconds so the operator can see its changed.
Has anyone any pointers on how we can do this on a Vuetify v-data-table
Thanks
I ran into the same problem. This solution is a bit crude and a bit too late, but may help someone else.
In this example I change the colour of the row permanently until the page reloads. The problem with a temporary highlight is that if the table is sorted there is no way to put the row in the visible part of the table - v-data-table will put it where it belongs in the sort, even if it's out of the view.
Collect the list of IDs on initial load.
Store the list inside data of the component.
Use a dynamic :class attribute to highlight rows if the ID is not in the list (added or edited rows)
Solution in detail
1. Use TR in the items template to add a conditional class.
<template slot="items" slot-scope="props">
<tr :class="newRecordClass(props.item.email, 'success')">
<td class="text-xs-center" >{{ props.item.email }}</td>
:class="newRecordClass(props.item.email, 'success')" will call custom method newRecordClass with the email as an ID of the row.
2. Add an additional array to store IDs in your data to store
data: {
hydrated: false,
originalEmails: [], <--- ID = email in my case
3. Populate the list of IDs on initial data load
update(data) {
data.hydrated = true; // data loaded flag
let dataCombined = Object.assign(this.data, data); // copy response data into the instance
if (dataCombined.originalEmails.length == 0 ) {
// collect all emails on the first load
dataCombined.originalEmails = dataCombined.listDeviceUsers.items.map( item => item.email)
}
return dataCombined;
}
Now the instance data.originalEmails has the list of IDs loaded initially. Any new additions won't be there.
4. Add a method to check if the ID is in the list
newRecordClass(email, cssClass) {
// Returns a class name for rows that were added after the initial load of the table
if (email == "" || this.data.originalEmails.length==0) return "" // initial loading of the table - no data yet
if (this.data.originalEmails.indexOf(email) < 0 ) return cssClass
}
:class="newRecordClass(..." binds class attribute on TR to newRecordClass method and is being called every time the table is updated. A better way of doing the check would be via a computed property (https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties). Vue would only call it when the underlying data changed - a method is called every time regardless.
Removing the highlight
You can modify newRecordClass method to update the list of IDs with new IDs after a delay to change the colour to normal.
#bakersoft - Did you find a solution? I suspect there is an easier way to skin this cat.
I would like to select an option in a dropdown using a value in my Model (org.springframework.ui.Model), I know how to do it with th:object and th:field but what if I don't have an object and only a key/value in the model?
I'm using spring boot 2 and thymeleaf 3.
Thank you.
So if I'm understanding the question correctly you want to display values on your drop-down options first ( so that you could select one of them further) based on the selected Model.?
And May I know how you're selecting the Model , is it from UI ?
For example :--
You have selected a value in a HTML option( Values from your Model ), and based on that Selected Value you want to display the values further on another HTML-option which you can select further.
You don't need th:object and/or th:field to dynamically select a option. Just add your options to the model and use the th:selected attribute.
<select ...>
<option ...
th:each="op : ${myOptions}"
th:value="${op.myValueMember}"
th:text="${op.myTextMember}"
th:selected="${op.myTextMember == 'Chimichanga'}"
>
</option>
</select>
I need to setup A form where a user would be signing up to an event but while doing that it will collect the data of the user from their database table automatically while also taking information from the events table and inserting it into another table
What are you using primarily to achieve this at the moment? Are you using PHP? In case of PHP,
if you have a user id on whichever user that is going to fill out the form, then you can use that user id to fetch the information from whatever table that you need, and retrieve the information of the user. You then put those into PHP variables for later use. The only way to know which user is which, is by using sessions. This session can be their user id, which I will go by in this example, simply because it's simple and easy.
The handling of form data can be done by a classic form tag with post method and a submit button. You tell the form whichever page it is to supposed to post to.
It can also be handled by AJAX.
You then put those posts into PHP variables, or use them directly, but I personally prefer to put them into variables for clarification. It can look a bit messy using the post variables directly into your query, as well as the security risks it involves.
What it could look like is something like this:
<?php
/*
Firstly we need our session (this should be set upon logging by using $_SESSION['userId'].
As mentioned before, I am using a user id as our session variable in this example.
*/
/*
Carry over the session.
Use session_start() before anything else in a file to get the session of a user.
*/
session_start();
//Put session into a php variable
//mysql_ syntax:
$userId = mysql_real_escape_string($_SESSION['userId']);
mysqli_ syntax, with $conn being your database connection variable:
$userId = mysqli_real_escape_string($conn, $_SESSION['userId']);
mysqli_ syntax, with $conn being your database connection variable:
$userId = mysqli_real_escape_string($conn, $_SESSION['userId'])
?>
Now what is left, is to construct our form and send that data. Since I personally would prefer to handle the data in another file than the file that contains the form, we're going to tell the form to post to another file. This file will contain our form data, as well as our user data. How we will go by getting our user data is by using the session variable, which conveniently happens to be the user id (which is unique to every user). We can post this with everything else in our form by using a hidden input field carrying the user id variable (just as an example).
<!--
What we do here is make a form that that tells which page it is going to go to
on submit
-->
<form action="/another_page.php" method="POST">
<!-- Our hidden input field, carrying the user id -->
<input type="hidden" name="userId" value="<?php echo $userId; ?>" />
What brand is your current car?:<br />
<input type="text" name="carBrand" placeholder="Brand of your car" />
Tell us a little about yourself:
<textarea rows="4" cols="50" name="summary"></textarea>
Rate your experience, 1-5:
<select name="rating">
<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>
</select>
<br /><br />
<button type="submit" name="submitButton">Submit form!</button>
</form>
Now we go to the other file to handle our data, which we will later put into the second table as per your request.
<?php
//This is our POST variables from our form:
$userId = $_POST['userId'];
$car_brand = $_POST['carBrand'];
$summary = $_POST['summary'];
$rating = $_POST['rating'];
//Now to our SQL, to get there data of our user:
//Put SQL command into a variable
$sql = "SELECT * FROM name_of_user_table WHERE userId='$userId'";
//Put query into a variable with mysql_ syntax:
$result_set = mysql_query($sql);
//Put query into a variable with mysqli_ syntax:
//$conn still being your connection variable
$result_set = mysqli_query($conn, $sql);
//The rows in your table in mysql_ syntax:
$row = mysql_fetch_array($result_set);
//The rows in your table in mysqli_ syntax:
$row = mysqli_fetch_array($conn, $result_set);
/*
Now we can start using our data from the database, and store them into variables.
The variables depends on your fields names in the database.
We basically have the data stored into an array,
where we need to tell the array exactly which index we'd like to use
(in this case which field we'd like to store into a variable).
*/
//Examples:
$variable1 = $row['name_of_field'];
$variable2 = $row['name_of_another_field'];
[...]
?>
Now what is left, is to put everything into your second table, using our variables. Hope this helps :)
It is also very important that you use prepared statements before firing your SQL commands into your database, or at least sanitize the inputs to prevent SQL-injections.
Martin wrote a really comprehensive answer; I'm not saying that it is wrong (how could I? I don't speak PHP); however, as the OP tagged it as Oracle Application Express (not PHP), it might not be the best fit.
Anyway: that looks like a simple task: if signing up to the event is done by pushing a button (why wouldn't it be?), you'd create a process which does the rest of the job. Either write it in the appropriate process property, or create a stored procedure which collects data & inserts it elsewhere and - in the Apex process - call that procedure.
I have defined a select in a jqgrid table as follows:
{name: 'station', index: 'station', editable: true, width: 60,
edittype:"select", defaultValue:"",
editoptions:{
dataUrl: "getStationList"
},
editrules: { required: true }
},
The getStationList returns something like:
<select>
<option value="id1">Station1</option>
<option value="id2">Station2</option>
</select>
With the current definition, the first time the combo is shown, the list of Station appears nicely (Station1, Station2,...) and the JSON contains "id1" when Station1 is selected.
But when the table updates it displays "id1" in the select combo instead of keeping showing the Station's list.
Is that a bug or I`m missing some configuration option? (probably the last)
Thanks!
I think you have already a problem during filling the grid. If you want to use ids instead of names you should use formatter: "select" additionally to edittype:'select' (see the documentation). In the case you will have to place ids in the grid during filling of the grid with data. I mean that input data for jqGrid sould contains id1 and id2 instead of "Station1" and "Station2". Only in the case you will be able to use dataUrl which provide <option value="id1">Station1</option>. The next problem is: you have to set editoptions.value or formatoptions.value instead of usage dataUrl: "getStationList". So the usage of formatter: "select" is relatively complex. What one can do is to send the data like {"id1":"Station1", "id2":"Station2"} as a part of main grid data. One can place {stations: {"id1":"Station1", "id2":"Station2"}} as userdata part of JSON input (see the documentation). Inside of beforeProcessing callback one could set formatoptions.value based of userdata.stations. In the way one would de facto make request to getStationList not only during editing of data, but additionally during every filling of grid.
I personally prefer to use no formatter: "select" and use selects in the form
<select>
<option value="Station1">Station1</option>
<option value="Station2">Station2</option>
</select>
In the way the client code would "know" nothing about implementation details of the representation of data. One would fill grid with the data "Station1" and "Station2" and send the same data during editing of grid. The server on the other side will get ids by the names whenever it's needed. Typically if I create "lookup" table Stations with column like "Id" and "Name" I would set
CONSTRAINT UC_Stations_Name UNIQUE NONCLUSTERED (Name ASC)
So there are unique index in the table which can get Id by Name. In the way all Update statements with Name are exactly so quickly as with Id. I use Id in all internal SQL statements, but send only Name to external source. In the way I don't need use formatter: "select".