Develop Reference

Best way to translate inputs

Good evening,
Today I've encountered a question/problem. I'll get right into it. So basically I have form which is used to create meal. Meal table (migration) looks like this:
$table->uuid('id')->primary();
$table->uuid('restaurant_id')->nullable();
$table->string('name_lt', 100);
$table->string('name_en', 100);
$table->string('name_ru', 100);
$table->smallInteger('prep_time');
$table->string('image', 150);
$table->boolean('visibility')->default(0);
$table->boolean('deleted')->default(0);
$table->timestamps();
$table->foreign('restaurant_id')->references('id')->on('restaurants')->onDelete('cascade');
Aside the there's tons of other stuff, like ingredients and stuff, which are related to that specific meal. In the form page I have 3 different forms for different languages that is my native lithuanian, english and russian. There is tab buttons for changing form to other language, all it does is just hide current form and show another (there is 3 identical forms in 1 page).
What I'm trying to achieve is if I fill in lithuanian language's inputs, I want english and russian inputs to be filled also (that can be achieved with jquery or javascript change function), but it should fill in translated text.
Simple example:
In first form I fill in text name_lt = 'Obuolys', so name_en and name_ru should get filled too, but in different language, in this case name_en = 'Apple', name_ru = 'яблоко'
I never used translation api's so I'm wondering what would be the best way, I'm thinking of using DeepL as it is quite cheap.
If someone could give me some advices or simple example would be nice, I could follow on from that.

If you want to use javascript, you could use a button's click event to fill out the other fields before submiting the form. If I understand it correctly you have 3 forms (1 per tab).
You could do something like this for each form.
<form id="form-lt" method="post">
#csrf
<input name="name_lt">
<input type="hidden" name="name_en">
<input type="hidden" name="name_ru">
{{-- Not a true submit button --}}
<button id="button-lt type="button">Submit</button>
</form>
Given a function that takes text input, the original language and the language you want to translate
async function translate(text, from_language, to_language) {
const response = await fetch(...);
const data = await response.json();
// get translated text from data
return translated_text;
}
The js part could look like this
const button_lt = document.getElementById('button-lt');
button_lt.addEventListener('click', async event => {
const form = event.target.form;
const lt_value = form.querySelector('[name=name_lt]').value;
const en_input = form.querySelector('[name=name_en]');
const ru_input = form.querySelector('[name=name_ru]');
en_input.value = await translate(lt_value, 'lt', 'en');
ru_input.value = await translate(lt_value, 'lt', 'ru');
form.submit();
});
Alternatively, if you want to do it server-side, you could try to call whatever translation API you end up using using the Http facade provided by laravel before validating the input data or before saving the model to the database.

Are you using PHP or javascript?
DeepL offers a NodeJS library (for the backend) and a PHP library to easily allow you to translate. For example, to translate in PHP, you can use the following snippet after installing the library:
$authKey = "f63c02c5-f056-..."; // Replace with your key
$translator = new \DeepL\Translator($authKey);
$result = $translator->translateText('Hello, world!', null, 'fr');
echo $result->text; // Bonjour, le monde!
To perform this when your users fill in some text, you will need to write the appropriate Laravel code. Please note that it is not safe to do this in the frontend, as it requires you to expose your $authKey.

Limiting dropdown options based on userID

I am asking this question because I'm unsure of the best way to solve my problem.
Problem:
I have a pre-populated drop down list of 1,000 or so numbers. I need to limit which numbers appear in the drop down based on which user is using the drop down.
Solution I thought of:
Hide all numbers with jQuery
Use jQuery / AJAX to call a database, passing a userID
DB returns a list of values based on the userID
Show options in drop down that have same values as numbers returned from the DB
Lets say this is my HTML:
<select>
<option>Please Select..</option>
<option value="101"> CC 101 </option>
<option value="102"> CC 102 </option>
<option value="103"> CC 103 </option>
<option value="104"> CC 104 </option>
<option value="105"> CC 105 </option>
<option value="106"> CC 106 </option>
</select>
And this is my DB table:
=======================
| User1 | 101 |
| User2 | 101 |
| User2 | 102 |
| User2 | 103 |
| User3 | 103 |
=======================
I need to figure out, for example, how to pass user2 and then return 101,102,103.
I only know basic js/jQuery, and I am not very experienced with DBs, so I am welcome to any suggestions that can help me accomplish my end goal.
EDIT/NOTE: As dumb as this sounds.... Security is not a huge deal here. This will be used on an internal company website, where if a user felt the need to hack around and select a different number, it really wouldn't matter that much. I also don't foresee any of the employees of the company having the desire/need/want to select a different option than they are allowed.
Also, the list must be pre-populated then numbers hidden. Its the way the platform I am using is set up, so I have to use show/hide, or something similar.

I would go only with steps 2-3 of your approach; however, I would not store the numbers in the way you showed. A better approach would be to store them in a table called user_value -or something like that-:
user_id | value
---------+-------
user1 | 101
user1 | 102
user2 | 101
Just because you can then easily add/remove/update values in the future as opposed to having to parse the comma-delimited value.
I would avoid using jQuery to simply "hide" things because Javascript can be disabled by the user and he may end up submitting whatever value he wants (visible or invisible) - Never trust user input.
In conclusion do this:
Use jQuery / AJAX to call a database, passing a userID
DB returns a list of values based on the userID
populate the dropdownlist with the values returned from the database.
Validate the form on the server side to make sure that the value submitted is present in the user_value table.

If that's the example Database Table and an example of a Select element. Then I think the best method would be to not write anything on your own and just let the Database choose what to share and where to share.
Here we go with the coding. I will try to explain what I am writing and how I am writing; since you're a newbie :-)
HTML code for you
The HTML code for your job, would be simple as this
<select name="someName">
<!-- No options please! -->
</select>
Getting the UserId
Now, once the user has logged in. Try to get the UserId by any one of the following method.
jQuery
To use jQuery you will need to be using the Server's generated value, because jQuery cannot interfere the Server Requests and code. So, you can create a simple hidden input and give it the value of the current logged in user. Here is the example
<input type="hidden" id="userId" value="#WebSecurity.CurrentUserId" />
Now, using jQuery you can get the value for this input. Here would be the code for that
var userId = $('#userId').val();
ASP.NET
To use ASP.NET, you don't do anything. All you do is you use the Built-in method of the ASP.NET as
WebSecurity.CurrentUserId;
and it would give you an integer value. Which would be the userId of the currently logged in user.
Usage of WebSecurity
The WebSecurity as the following link states, is a Class of data. Which can be used in your application, to lessen down the code and to help you get the User's properties at a better rate.
This class is used as a value for the variable, or as a parameter. This method would return a particular user's property. For example, you can get User's UserId, his UserName, his CreateDate, or you can use WebSecurity to Login a user, or Log him out.
Here would be an example of using WebSecurity. Just the way you create a variable in jQuery and get its value. You use this method and get the value.
jQuery Method
var userId = $('someElement').val();
/* get the value of some element as userId */
WebSecurity.CurrentUserId Method
var userId = WebSecurity.CurrentUserId;
Then you can use it inside the Database query,
db.Query("SELECT * FROM UserProfile WHERE UserId =#0", userId);
or, write it inside the document
Response.Write(userId);
Or do what ever you want to do. You can learn the syntax of the Class and other stuff in the links of MSDN. :-)
http://msdn.microsoft.com/en-us/library/webmatrix.webdata.websecurity(v=vs.111).aspx
Sending the Ajax request
Now send the Ajax request. If you know, then wonderfull! If not, then here is the example of the Ajax request to be sent
$.ajax({
url: 'page_url',
data: 'userId=' + userId, // userId that you got from input
success: function (data) { // note the data parameter
/* write in the select statement */
$('select').html(data); // usage of data parameter
}
});
Once it is done. It would update the Select element's options. But wait, what would it add to it?
It you, who control it too. You edit the server-side code to the following.
Getting the Data from Database.
If you're a newbie to the Databases and ASP.NET you need to first learn a bit.
http://www.asp.net/web-pages/tutorials/data/5-working-with-data
Ok, you can learn that a bit later too. I will still explain all my code to you. :-)
So, for Database you first need to create a Connection to the database and then you can search its tables and other content. Here is the code
var db = Database.Open("databaseName"); // Open a connection
var userId = Request.QueryString["userId"]; // get userid from ?userId=int
var selectQuery = "SELECT * FROM table_name WHERE UserId =#0"; // Query
var results = db.Query(selectQuery, userId); // Get data in a variable
After getting all these values, all that you need to do is to create a Response, to be sent to the client.
I hope, you're using Web Pages technology. Good! You're one step safer than others here.
Just press Page Down and move down to the last few lines and create a new Div element
<div>
<!--empty div element -->
</div>
Now, write an if else statement in it and create a Response which would be added to the select element.
P.S Other method (Actual method) of giving out a Response, is using the Actuall HttpResponse class and then giving the values to it. Like this
Response.Write("Hello World!");
If you write the above line, it would add this string to your select statement (although illegal) but that would make you understand its usage.
http://msdn.microsoft.com/en-us/library/system.web.httpresponse.aspx

I'm still a little confused about your constraints, but based on your comment:
The list will be pre-populated client-side (from a server I can't access/modify) THEN the AJAX call to a different DB (simple, two columns) THEN return values to original AJAX call, where THEN JS hides the values not returned (or shows the returned values, if they are initially hidden.)
Why not create a "unifying" service (on a server) so that you only make one AJAX call (from the client)?
http://MySite/MyService.aspx/GetOptionsForUser(101)
This service would make calls to both databases an return a list of the allowable option for the given user ID. This lets the server do most of the heavy lifting and greatly reduces the amount of jQuery on the client.
More Info:
The URL is what jQuery uses to make the AJAX call.
The simplest thing to do is:
Create a webpage called http://mySite/MyService.aspx
Add a public method called GetOptionsForUser() that accepts an integer and returns a list of numbers. This is the "unifying" logic that queries both databases. Make the method AJAX-callable by adding the WebMethod attribute.
In the existing web page where you want to populate your dropdowns, you make an AJAX call to http://MySite/MyService.aspx/GetOptionsForUser and pass the User ID as the AJAX parameter.

i think a good way to do it would be using JSON for all users.
prepare a json array for users with options and render it based on users to populate options.
eg.
var user1 = '["101","102","103"]';

This is an Example that shows how jquery ajax and php works to gather:
for example when a button clicked a ajax send an order to server side language (php), and php proccess that order and shows a suitable response:
$("#button").click(function(){
$.ajax({
type:"POST",
url:"ajax/alertMe.php",
data:({alert:"yes"}),
// The alert ^^ is the name of $_POST variable in php
success:function(data){
//this data can be some javascript and HTML codes or a text and ...
evel(data);
}
});
})
and here is php code with name alertMe.php:
<?php
if(isset($_POST['alert']) && $_POST['alert']!=""){
if($_POST['alert']=="yes"){
echo 'alert("the condition says I should alert!");';
}else{
echo '$(this).fadeOut();';
}
}
?>

Since you are saying that - You have pre-populated entries I would have gone with this approach -
First save all the items in a JS array at page load-
var alloptions = $("select").find("option").get();
Then for each user ID after getting the list of items, show and hide them as following -
//getting the id of the user and passing to AJAX call
$.ajax({
url: '',
dataType: 'json',
type: 'GET',
success:function(data){
// other codes
var userItemList = []; //list of items for this user [102,103, etc]
$("select").empty();
$("select").append(alloptions[0]) //the first one since it is the null one
for(var i = 0; i < userItemList.length; i++){
for(var j = 0; j < alloptions.length; j++){
if (parseInt($(alloptions[j]).val()) == userItemList[i]){
$("select").append(alloptions[j]);
}
}
}
}
});

If you only need to populate once at the first page loads this is the best option by me
Example:
HTML:
<select id="auto-populated">
<?php
//Next three lines you need if you dont have the user_id stored before in your code
require('db.php');
session_start();
$user_id = $_SESSION['user_id'];
//Selecting only the needed options to put here
$sql = "SELECT dropdown_value, dropdown_option FROM tbl_dropdown WHERE dropdown_number='your-filter-kriteria-here'";
$result = mysql_query($sql, $db) or die(mysql_error().': '.$sql);
//After you got the filtered results from database, print them in the <select>
echo "<option value=' '>Please select one...</option>";
while ($item = mysql_fetch_assoc($result)) {
echo "<option value='".$item['dropdown_value']."'>".$item['dropdown_option']."</option>";
}
?>
</select>
EDIT: I see that you need for asp.net so try converting this

Straightforward problem. I will try to answer in your own way you thought of.
0. Your existing HTML code
Choose your Value:
<select id="dropDown">
<option>Please Select..</option>
<option value="101"> CC 101 </option>
<option value="102"> CC 102 </option>
<option value="103"> CC 103 </option>
<option value="104"> CC 104 </option>
<option value="105"> CC 105 </option>
<option value="106"> CC 106 </option>
</select>
1. Hide all numbers with jQuery
<script>
$("#dropDown").html("<option>Please Select..</option>");
</script>
2. Use jQuery / AJAX to call a database, passing a userID &
3. DB returns a list of values based on the userID
<script>
$(function()
{
var userId = 1; <!-- Read & store the userId here -->
$.ajax({
type: 'POST',
url: 'server.php', <!--server.pl, server.js, server.asp, server.py whatever-->
dataType: "json",
data: {'userId': userId},
success: function (returnData) //Returns "[101, 102, 103]"
{
4. Show options in drops down that have same values as numbers returned from the DB
for (var i=0; i<returnData.length; i++)
{
$("#dropDown").append("<option value='"+returnData[i]+"'> CC "+returnData[i]+" </option>");
}
}
});
});
</script>

jQuery Autofill textbox with information from another autofill

I am having an issue with jQuery autocomplete. Basically I have a search bar, and when you type in what you're looking for the jQuery code I have calls a php script which does a MySQL query and returns everything I need and fills in the text boxes accordingly. What I then want to do is take the value I receive from that autocomplete, and use it in another autocomplete to fill in more data. The tricky part is that the data I need to get with the 2nd query is located in a different table than the first query, which share a relationship. My question is do I need a completely separate function to do this, or can I simply put both queries in the 1 php script and have the information from the first query be used for my 2nd query.
Any help is appreciated thanks!
Here is the jQuery function:
$(function() {
/* $('#abbrev').val("");
*/
$("#q16_location16").autocomplete({
source: "location_query.php",
minLength: 1,
select: function(event, ui) {
$('#q16_location161').val(ui.item.LocationID);
$('#SystemName').val(ui.item.SystemName);
$('#SiteAddress1').val(ui.item.SiteAddress1);
$('#SiteAddress2').val(ui.item.SiteAddress2);
$('#SiteCPP').val(ui.item.SiteCPP);
$('#Contact').val(ui.item.Contact);
$('#SiteLocationHours').val(ui.item.SiteLocationHours);
}
});
});
and the php script:
/* If connection to database, run sql statement. */
if ($conn)
{
$fetch = mysql_query("
SELECT Location.LocationID,
Location.SystemName,
Location.SiteAddress1,
Location.SiteAddress2,
CONCAT_WS(' ', Location.SiteCity, Location.SiteProvince, Location.SitePostalCode) AS SiteCPP,
CONCAT_WS(' ', Location.ContactName, Location.ContactPhone, Location.ContactEmail) AS Contact,
Location.SiteLocationHours,
CONCAT_WS(' ', SystemName, SiteNameLocation, SiteAddress1, SiteCity, SiteProvince, SitePostalCode) as expr2
FROM Location
WHERE Location.SystemName like '%".mysql_real_escape_string($_GET['term'])."%'
OR Location.SiteNameLocation like '%".mysql_real_escape_string($_GET['term'])."%'
OR Location.SiteAddress1 like '%".mysql_real_escape_string($_GET['term'])."%'
OR Location.SiteCity like '%".mysql_real_escape_string($_GET['term'])."%'
OR Location.SiteProvince like '%".mysql_real_escape_string($_GET['term'])."%'
OR Location.SitePostalCode like '%".mysql_real_escape_string($_GET['term'])."% '
LIMIT 0,15");
/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['LocationID'] = $row['LocationID'];
$row_array['value'] = $row['expr2'];
$row_array['SystemName'] = $row['SystemName'];
$row_array['SiteAddress1'] = $row['SiteAddress1'];
$row_array['SiteAddress2'] = $row['SiteAddress2'];
$row_array['SiteCPP'] = $row['SiteCPP'];
$row_array['Contact'] = $row['Contact'];
$row_array['SiteLocationHours'] = $row['SiteLocationHours'];
array_push($return_arr,$row_array);
}
}
/* Free connection resources. */
mysql_close($conn);
/* Toss back results as json encoded array. */
echo json_encode($return_arr, $return_arr2);
So when the user types in "New York" they can can select that option. In my example New York has an ID of 5. I also have a query that selects different streets in new york but this is in a separate table. in my streets table however, there is a "LocationID" column that for every street in new york will have a value of 5. So I want to take that ID of 5 when a user enters in new york and generate all the streets from a different table which also have that ID. I have tried multiple things in terms of creating a new function but I am just unsure of how I would pass that ID to the function.
Thanks

You can use one PHP script for this. Here's about what I'd think the basic structure will look like:
Pass two values to "location_query.php". The first value would be the name of the table that you want to query. The second value could be the selection result from the auto-complete text box.
Create a prepared statement in "location_query.php" from the two values that were passed to "location_query.php".
Perform your query.
JSON encode the result (just like you did before).
I'd also like to point out a security concern with your code. You should be using Mysqli and prepared statements instead of PHP's MySQL and mysql_real_escape_string. mysql_real_escape_string has been shown to have security deficiencies that can lead to security breaches and PHP's MySQL class has been deprecated. Mysqli and Prepared statements are much safer, and, in my opinion, provide for cleaner code since it allows for the separation of the SQL and the parameters.
Hope this helps!
EDIT: I think I understand what you're trying to do now, but I think there's a better way to go about doing it. Instead of assigning the id value to a hidden field and trying to have jquery detect every time that field is changed, I would just do the following:
For your first text box's select method:
select:function(event, ui) {
$.get("location_query.php", {
searchterm:$(ui).val()
}, yourFunction);
}
Here's an example implementation of "queryFinished":
function queryFinished(data, textStatus, jqXHR) {
var mJSON = $.parseJSON(data);
/* mJSON is the parsed JSON data returned from your "location_query.php"
script.*/
//TODO the rest of your code
}
Here's what's going on:
We define a custom function to be called when the first text box has a new item selected. This functions only purpose is to call a GET on "location_query.php".
Then, we pass the value of the selected field from the first text box via our GET call.
We then create a function to be called when GET returns.
Finally, we parse the encoded JSON that is returned by "location_query.php". After that, you can perform whatever tasks you need with the parsed JSON (mJSON in our example).
Taking this approach keeps us from having to worry about "listening" for a value change in our hidden ID field and makes everything nice and clean.

Posting data via js/jQuery

I am really new to Javascript and its many brilliant libraries, I find even the most simple scripts hard to perform.
I do want to learn this language, because it would be powerful for creating client websites, however at the moment I am trying to do something relatively simple, this is to flag a personal message on my site. There are many messages in a big list, and what I am looking at doing is when the user clicks the "Flag PM" image, it will run flag.php in the background which will change the flag field in MySQL from 0 to 1.
This script is all dependant on one field, that is id so I can run this through the database. Anyway, here is my code;
flag.php
require('_inc/_core/core.php'); // inc core_funcs for sql & clean
$pm_id = clean($_POST['p_id']); // create new variable, clean the post
echo "The ID for the PM is " . $pm_id;
mysql_query("UPDATE `messages` SET `flag_status` = 1 WHERE `id` = {$pm_id}"); // update the db
JS/jQuery
// Flag a Personal Message
$("#flagPM").submit(function(event) {
event.preventDefault();
$.post("flag.php", { p_id: pm_id } );
alert(event);
});
HTML handling the form
<form action="#" id="flagPM"><input type="hidden" id="pm_id" value="$id" />
<input type="submit" class="submit" value="FLAG" /></form>
So there is a hidden input field named pm_id that contains what I want posted.
Would really appreciate some help, the Javascript is being run from an independent file that is two directory's up from flag.php
Thank you

the Javascript is being run from an independent file that is two
directory's up from flag.php
In that case simply doing:
$.post("flag.php", { id: id } );
wont reach the flag.php file, you need to specify correct path including folder names that you mentioned:
$.post("folder1/folder2/flag.php", { id: id } );
By the way, you should use a callback for the $.post function to know what message is returned by flag.php:
$.post("flag.php", { id: id }, function(data){
alert(data);
} );
From your flag.php, make sure to echo something so that you get that response in your ajax handler:
// your other code here, such as query, etc
echo 'whatever...';

Django Dynamic Drop-down List from Database

I wanted to develop a Django app and one of the functionalities I'd like to have is dynamic drop-down lists...specifically for vehicle makes and models...selecting a specific make will update the models list with only the models that fall under that make....I know this is possible in javascript or jQuery (this would be my best choice if anyone has an answer) but I don't know how to go about it.
Also, I'd want the make, model, year and series to be common then the other attributes like color, transmission etc to be variables so that one needs only enter the make, model, year, and series only for a new vehicle. Any ideas would be highly appreciated.

The 3 things you mention being common, make, model, year, would be the 3 input values. When given to the server, an object containing the details would be returned to the calling page. That page would parse the object details (using JavaScript), and update the UI to display them to the user.
From the Django side, there needs to be the facilities to take the 3 inputs, and return the output. From the client-side, there needs to be the facilities to pass the 3 inputs to the server, and then appropriately parse the server's response.
There is a REST api framework for Django that makes it rather easy to add the "api" mentioned above -- Piston. Using Piston, you'd simply need to make a URL for that resource, and then add a handler to process it. (you'll still need to skim the Piston documentation, but this should give you an idea of what it looks like)
urls.py:
vehicle_details = Resource(handler=VehicleDetails)
url(r'^vehicle/(?<make>.*)/(?<model>.*)/(?<year\d{2,4}/(?P<emitter_format>[a-z]{1,4}), vehicle_details, name='vehicle_details'),
handler.py:
class VehicleDetails(BaseHandler):
methods_allowed = ('GET',)
model = Vehicles #whatever your Django vehicle model is
def read(self, request, *args, **kwargs):
# code to query the DB and select the options
# self.model.objects.filter()...
# Build a custom object or something to return
return custom_object
This simply sets up the url www.yoursite.com/vehicle/[make]/[model]/[year]/json to return a custom data object in JSON for jquery to parse.
On the client side, you could use jquery to setup an event (bind) so that when all 3 drop downs have a value selected, it will execute a $.get() to the api URL. When it gets this result back, it passes it into the Jquery JSON parser, and gives the custom object, as a javascript object. That object could then be used to populate more drop down menus.
(Big warning, I just wrote the following off the top of my head, so it's not meant to be copy and pasted. It's just for the general idea.)
<script type="text/javascript">
// On document load
$(function() {
$('#dropdown_make').bind('change', checkForValues());
$('#dropdown_model').bind('change', checkForValues());
$('#dropdown_year').bind('change', checkForValues());
});
function checkForValues() {
if ($('#dropdown_make').val() && $('#dropdown_model').val() && $('#dropdown_year').val())
updateOptions();
}
function updateOptions() {
url = '/vehicle/';
url += $('#dropdown_make').val() + '/';
url += $('#dropdown_model').val() + '/';
url += $('#dropdown_year').val() + '/';
url += 'json/';
$.get(url, function(){
// Custom data object will be returned here
})
}
</script>

This is uncanny: Dynamic Filtered Drop-Down Choice Fields With Django
His question:
"Here is the situation: I have a database with car makes and models. When a user selects a make, I want to update the models drop-down with only the models associated with that make. ... Therefore I want to use Ajax to populate the data."
You're not the same guy? :)