(Lift) Ajax submit using SHtml.select onchange event - scala

I'm tring to implement the classic functionality of this select:elements depends on this other select:selection using Lift, E.g. select the country and get the possible states for the selected country.
The problem that I'm facing is that the "this.myForm.submit()" that I have inside the onchange of the select element is not firing the ajax request. If I use an input type"submit" it works perfectly.
Is this behaivior related with Lift framework? Is there a better way of implementing this kind of functionality using Lift libraries?
The relevant snipped code:
"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
The view html:
<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
<option></option>
</select>
<br/>
Device:
<select name="devices" id="the_devices">
<option></option>
</select>
</form>
The rendered HTML:
<form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F391649920812YBACEZ").serialize(), null, null, "javascript");return false;">
<div>
Punto de distribuciĆ³n:
<select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
<br />
Equipo:
<select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
<br />
</div>
</form>
[edit]
I finally got the solution. Like Chris mentioned I used ajaxSelect instead of just selects and instead of using setHtml there's a method called JsCmds.ReplaceOptions that does exactly what I was looking for.

You should understand that when using Ajax submit the page is not reloaded. So I would suggest you to use JsCmds.setHtml on server side to "reset" the second select element.
So, in fact the first select is an ajaxSelect which is meant to modify the second one (so it is not concerned by the hidden submit in my opinion). The second select is updated when the first one is changed, using 'selectPoint(s)'
Piece of Scala code
def selectPoint(s):JsCmd = {
selectedDistributionPoint = s;
newDevices:List[String] = findCorrespondingDevices(s);
JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process))
}
"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
Piece of template code
<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>

Related

How to select specific data in dynamic table using protractor?

I am trying to automate some scenarios using protractor where we need to verify whether the data is updating in dynamic table.
Please find below
HTML Code:
enter image description here
Table in page:
enter image description here
It can be done by verifying that element is present in the DOM with the added Group ID or Group Name.
For Group ID:
element(by.xpath("*//table//tbody//tr//td[1]//p[text()='Amanda Test
Group']")).isDisplayed()
For Group name:
element(by.xpath("*//table//tbody//tr//td[2]//p[text()='Amanda
Group']")).isDisplayed()
I'm assuming you're using Angular2+, yes?
In your HTML Template, you are probably using an *ngFor directive to populate the table dynamically. Add an index to the *ngFor (it's best practices for updating the DOM) in order to add a dynamic id to each element:
<tr *ngFor="let user of user; index as u" id="user-{{u + 1}}">
<td id="userName-{{u + 1}}">
{{user.firstName}} {{user.userName}}<br />
{{user.userName}}
</td>
<td id="userRoles-{{ u + 1 }}">
<span id="role-{{u + 1}}-{{ r + 1 }}" *ngFor="let role of user.roles; index as r">
{{ role.toUpperCase() + ', '}}
</span>
</td>
<!- Omitted code -->
</tr>
In your Page Object:
// Get first user on the table
get firstUser() {
return element(by.id('user-1');
}
// Get a specific user by id
public getUser(index: number) {
return element(by.id(`user-${index}`);
}
// Get all of the attributes for a single user by id
get userAttributes(index: number) {
return element.all(by.id(`user-${index}`);
}
I am not a fan of xpath selectors. Yes, they are faster. But in code that is dynamic or changes frequently, they are the most fragile of selectors. There is no reason your dynamic data cannot have a dynamic ID that clearly identifies each portion of the code you need.
Good luck!

how to retrieve select options from my database

I'm trying to retrieve my select option from 3 databases located in a connection that's not my defaut connection.
but I'm getting an error : Undefined variable: marqs (View: C:\wamp64\www\projetSovac\resources\views\home.blade.php)
Here's my controller code
public function index()
{
$marques= DB::connection('sqlsrv2')->table('marque')->get();
$modeles = DB::connection('sqlsrv2')->table('Modele')->select( DB::raw('CodeModele'))->get();
$finitions = DB::connection('sqlsrv2')->table('finition')->select( DB::raw('CodeFinition'))->get();
$marqs = $marques->all(['marque']);
$models = $modeles->all(['CodeModele']);
$Finitions = $finitions->all(['CodeModele']);
return View::make('home')
->with(compact($marqs))
->with(compact($models))
->with(compact($Finitions));
return View('home');
}
and my home.blade.php code
<tr class="filters">
<th><input type="text" class="form-control daterangepicker-field" placeholder="PĆ©riode d'analyse" disabled ></th>
<th><select class="form-control " disabled>
{!! Form::Label('marque', 'marque:') !!}
#foreach($marqs as $marque)
<option value="{{$marque->codeMarque}}">{{$marque->codeMarque}}</option>
#endforeach
</select>
</th>
Can you help identify the problem?
Thanks
compact($marqs) wants to have a string divining the variable you want to pass to the view. Use: compact('marqs') you can also combine your variables like compact('marqs', 'models', ....etc )
Also you are returning something 2 times now in the function this is not possible.
I would rewrite your function to be like this:
$marques= DB::connection('sqlsrv2')->table('marque')->get();
$modeles = DB::connection('sqlsrv2')->table('Modele')->select( DB::raw('CodeModele'))->get();
$finitions = DB::connection('sqlsrv2')->table('finition')->select( DB::raw('CodeFinition'))->get();
$marqs = $marques->all(['marque']);
$models = $modeles->all(['CodeModele']);
$Finitions = $finitions->all(['CodeModele']);
return View::make('home')->with(compact('marqs', 'models', 'Finitions'));
Assuming the first 6 lines get you the actual data all i changed was the return.
You might want to read up on how to use laravel models
https://laravel.com/docs/5.7/eloquent
I am not sure if u have defined any but it could make your code allot simpler.

JAX-RS, #FormParam display result in the same page

I have this program that I am coding, the main thing is mostly to get familiar with Jax-rs and rest API. I am sending from a form in JSP page one input and with POST I pass it to my java Response class(that I use annotation #FormParam), it does what calculation I need and then I get the result in another link, what can i do to take the result just below my button on the same page? For my button function I use javascript, and when I push it I don't want to be redirected and take the result like this.
So i use this form and a javascript function in my jsp to pass the value in my POST method in java throw #FormParam
<form name="Form1" method="post">
<p>
Name : <input type="text" name="malename" id="malename" autofocus
value="enter your name..." />
</p>
<input type="submit" name="action" id="malename" value="I'm feeling lucky"
onclick="OnButton1();"> </form>
function OnButton1() {
document.Form1.action = "webapi/perfectmatcher/mate"
document.Form1.target = "_self"; // Open in a new window
document.Form1.submit(); // Submit the page
//return;
}
Here after i have the value i use two other classes to do the calculations and return the result i need. In a few words i pass a value in my form and when i push the button i am redirected in another link(the path of POST) and i display the result. I want to display the result below my button. I hope the code is helpful and i hope i am clear with my explanation
#POST
#Path("/mate")
#Produces(MediaType.TEXT_PLAIN)
public Response postMaleName(#FormParam("malename") String malename) {
String femalename = NumMatcher.numMatcher(Numberizer.numberizer(malename));
// FemaleName female = new FemaleName(femalename);
female.setName(femalename);
System.out.println(female.getName());
return Response.status(200).entity("Perfect Match for " + malename + " is " + femalename).build();
}
P.S.:The object female that i am trying to create its for testing purposes, i was trying somehow to get the information that i store but i cannot find how!!I used even jsp expressions but i get null value of course ...
<%
FemaleName female = new FemaleName("john");
String string = female.getName();
out.print(string);
%>

rubaxa:sortable (Meteor) dying with error "TypeError: templateInstance.collection.findOne is not a function"

Using Meteor I implemented a pretty basic rubaxa:sortable instance. Not using multiple sortable lists or anything fancy. Pre-loaded "order" data in my Mongo Collection with unique numbers 1, 2, 3, etc.
Everything displays fine, and lets you sort once then the package dies when it tries to save the new order to the DB.
Error in the browser console is:
TypeError: templateInstance.collection.findOne is not a function. (In 'templateInstance.collection.findOne(itemId)', 'templateInstance.collection.findOne' is undefined)
adjustOrdersrubaxa_sortable.js:1404
sortableUpdaterubaxa_sortable.js:1446
_dispatchEventrubaxa_sortable.js:1102
_onDroprubaxa_sortable.js:799
(anonymous function)
handleEventrubaxa_sortable.js:853
Relevant code snippets below...
Server:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];`
Client JS:
Meteor.startup(function() {
Mongo.Products = new Mongo.Collection('products');
});
Client HTML:
<div class="sortable target" id="object">
{{#sortable items=products animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" sortField="order"}}
{{> productSettingsRow}}
{{/sortable}}
</div>`
<template name="productSettingsRow">
<div data-id="{{order}}" class="sortable-item well well-sm">
<div class="row">
...
<div class="col s5">
<div class="input-field">
<input id="{{sku}}-displayName" type="text" value="{{displayName}}">
</div>
</div>
...
<div class="col s1">
<i class="sortable-handle mdi-action-view-headline pull-right"></i>
</div>
</div>
</div>
Tried searching on the error; don't see anything quite like this though #578 here seems similar(?):
https://github.com/RubaXa/Sortable/issues/578
Any suggestions, or any other info I can provide to help debug? (Also posted this to the GitHub repo as suggested.)
You need to define collections both on the client and the server. So all you might be missing is to put:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];
in a shared place, such as /lib/common.js.
Partial Solution Found...
The helper that was passing in the "products" collection was set up like this:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find().fetch();
}
});
It should have been:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find();
}
});
This way it's a pointer rather than an array. rubaxa:sortable doesn't yet handle arrays.
(Still working through a DB storage problem; this plugin doesn't seem to work out of the box with Meteor -- gives "Access Denied" when you try to update. Will try to sort that out tomorrow.)

playframework - how to set a select input in scala

So I have a form on a page, and I am trying to pre load all the old value when the page loads up. But I am having some trouble achieving this for the select object.
I have the following scala code for generating the select:
<select id="networkInterfaces">
<option value="">First Available</option>
#for(interface <- networkInterfaces) {
#if(interface.Name == configs.last.networkInterfaceName) {
<option selected="selected" value="#interface.Name">#interface.DisplayName</option>
} else {
<option value="#interface.Name">#interface.DisplayName</option>
}
}
</select>
And when the page loads it does show that the selected network interface is selected. But the problem is if I change some of my other settings and submit it is returning the options html not the value. Is there a way to select the form value for the select in scala while the page is loading?
Is there something fundamental I am missing? Otherwise I will change the way it is handled to process display name rather than value...
EDIT
As I could not get this to work i changed the value to #interface.DisplayName and then converted it in code on the server. I would like to be able to do it properly but it doesnt seem to work.
Is that correct that <select id="networkInterfaces"> has no name specified?
and than you should use play helper #select and Form object. I think its the better way to handle form values.
#(form : Form[ABean])
#import helper._
#select(
form("configs.last.networkInterfaceName"),
options(networkInterfaces),
'_label -> "Interface Name",
'_default -> "First Available"
)
Further info about helper #select visit :
https://github.com/playframework/Play20/blob/master/framework/src/play/src/main/scala/views/helper/select.scala.html
Try this way.
<input type="hidden" id="groupIdRef" name="groupIdRef" value="#userRecord.groupId">
#input(field=userRecordform("groupId"),'_label -> "") { (id, name, value, htmlArgs) =>
<select id="groupId" name="groupId" #toHtmlArgs(htmlArgs)>
options.map { v =>
#for(g <- groups){
<option value=#g.id >#g.displayName</option>
}
}
</select>
}
// User JavaScript this onload function
window.onload = function() {
document.getElementById('groupId').value = document.getElementById('groupIdRef').value;
}
It is work for me.