am having a problem testing a laravel 5.1 app forms which have input values that are conditional on other inputs, such that when the page is loaded the second input is disabled, then its enabled after the user chooses an option on a select control (which uses javascript to set the data store of the second select as well as enabling it) allowing them to enter input. The forms work on the browser, but when testing the disabled control isn't enabled even after explicitly selecting/typing in the first in put.
Here's my testing code
$this->visit('/forms/document')->submitForm('submit', ['username' => 'Superuser','password' => 'sample'])
->see('Upload Document')
//test sending blank form
->submitForm('save',['owner' => ''])
->see('Name is Required')
->see('Type is Required')
->see('Owner is Required')
->see('File is Required')
//test sending properly filled form
->type('user', '#type')
->type('1', '#owner')
->type('Test Document', 'name')
->attach(dirname(__FILE__).'/test_document.pdf','file')
->press('save')
->see('Test Document')
->see('Never')
->see(date("M d, Y"));
and a fragment of my form code
<tr>
<td align="right">Attachment Type</td>
<td >
<select name='type' id='type' required='1' dojotype='dijit.form.FilteringSelect'
value='{{$document->type}}'>
<option value=''>Please Select</option>
<option value='user'>System User</option>
<option value='company'>Company Document</option>
<option value='voucher'>Finance Voucher</option>
<option value='pipline'>Sales Voucher</option>
<script type="dojo/method" event="onChange">
children(this,'owner',null,"{{url('/')}}");
</script>
</select>
</td>
</tr>
<tr>
<td align="right">Attached To (Owner)</td>
<td>
<select id='owner' name='owner' dojotype='dijit.form.FilteringSelect' disabled searchattr='name'></select>
</td>
</tr>
<tr>
<td align="center" colspan='2'>
<button name='save' type='submit' dojotype='dijit.form.Button'>Save Document</button>
<button name='new' type='submit' dojotype='dijit.form.Button'>Save and New</button>
</td>
</tr>
finally the javascript
//changing the data store of child from the value of the parent
function children(parent,child,parameters,url)
{
var value = dijit.byId(parent).value.toLowerCase().split(' ')[0];
if(parameters !==null){
parameters = parameters.join('/');
}
var node = dijit.byId(child);
node.set('disabled', false);
node.set('displayedValue', '');
var store = new dojo.data.ItemFileReadStore({url: url+"/store/"+value+"/"+parameters});
node.set('store', store);
}
While working with Integrated (as a separate package) and laravel 5.0 this was not a problem, but after I upgraded to 5.1 (because of multi dimensional form controls testing) the problem cropped up. I have tried everything I can think of but so far no joy. :( please help.
Related
I'm at beginner level at Coding and got stuck at one place where I'm not able to display the content of saved data into text area once clicked on Submit button.
Please check below code for more details
$(".submitbtn").on("click", function() {
var textarea_value = $(this).closest("tr").find("textarea").val();
var select_value = $(this).closest("tr").find("select").val();
if((textarea_value != '') && (select_value != 'completed')){
$(this).closest("tr").find("td:eq(2)").text(textarea_value);
}
else{
$(this).closest("tr").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>Student Assignment Report</h1>
<div>
<table class='table' id='table'>
<thead>
<th>Student Name</th>
<th>Assignment</th>
<th>Reason by teacher</th>
<th>Set Status</th>
<th>Submit</th>
</thead>
<tbody>
<tr>
<td class="StuName">Lokesh</td>
<td class="Assignment">Ajax Assignment</td>
<td>
<textarea class="teachercomment" id="teachercomment" name="Reason by teacher" rows="3" cols="15" placeholder="Please describe"></textarea>
</td>
<td>
<select name="set_status" class="statusclass">
<option disabled selected value>Select Status</option>
<option value="completed">Completed</option>
<option value="pending">Pending</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary submitbtn">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I've shared logic of jquery as well where I got stuck. Here once I enter the content in textarea field ('Reason by teacher') having 'setStatus' dropdown selected as 'Completed' and click on Submit button then entire row should be disappear though data should get saved. However row is getting disappeared but once I refresh the page, it appears once again.
Along with this, if 'setStatus' dropdown is set as 'Pending' then data should be visible till the time 'setStatus' is not selected as 'Completed' and 'Submit' button is clicked. But when I saved the data having status as 'Pending', it is getting appeared under required column i.e. 'Reason by teacher'. But once I refresh the page, it disappears. Please let me know how to move ahead with this.
Please be noted that textarea should be editable till the time setStatus is selected as Pending.
Thanks in Advance..!!
I'm new to jsp and am creating a webpage that has a form with a select box and a few other input boxes.
I'm populating these input boxes automatically with values from properties file:
NumConfig.properties
SELECT= , ,
ONE=1,I,FIRST
TWO=2,II,SECOND
THREE=3,III,THIRD
Here is my form:
<html>
<body>
<form name="NumDetail" id="NumDetail" method="post">
<div>
<table>
<tr>
<th rowspan="2">Select
<select id="SelectText" name="SelectText" onchange="this.form.submit()">
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option value="THREE">THREE</option>
</select>
</th>
<th align="center">Number</th>
<th align="center">Roman</th>
<th align="center">Position</th>
</tr>
<tr>
<td align="center">
<input type="text" size=10 id="number">
</td>
<td align="center">
<input type="text" id="roman">
</td>
<td align="center">
<input type="text" id="position">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
And this is the JS code I'm using to load values from properties file:
< script type = "text/javascript" >
<%
ResourceBundle resource = ResourceBundle.getBundle("NumConfig");
String dbname;
if (request.getParameter("SelectText") == null)
dbname = "SELECT";
dbname = request.getParameter("SelectText");
String[] num = resource.getString(dbname).split(","); %>
var number = "<%= num[0]%>";
var rom = "<%= num[1]%>";
var pos = "<%= num[2]%>";
document.getElementById("number").value = number;
document.getElementById("roman").value = rom;
document.getElementById("position").value = pos; < /script>
I can indirectly open this page by appending ?SelectText value in the URL.
But when opening this page directly I get NullPointerException at the line
String[] num = resource.getString(dbname).split(",");
Two Questions:
How do I perform a null check or give the request parameter a default value so that page does not error out?
Once I select a value from the dropdown and the form submits, the select box does not retain its value and goes back to the default. How to resolve this?
You just need an else statement
if (request.getParameter("SelectText") == null)
dbname = "SELECT";
else
dbname = request.getParameter("SelectText");
To make an option selected by default, you should try this selected="selected". Stock the value somewhere and change your selected option dynamically.
<option value="ONE" selected="selected">ONE</option>
Firstly my recommendation would be not to mix Java code within HTML code in a JSP page. Try using a Java Servlet to manage your request and respose so you don't end up having a messy code.
I'll answer your questions below:
You are checking whether the parameter "SelectText" is null, and if that's the case then giving to 'dbname' a default value but the next instruction is replacing this given value with null.
The code should look like this:
String dbname = "SELECT";
String requestValue = request.getParameter("SelectText");
if (requestValue != null) {
dbname = requestValue;
}
Have you tried replacing your form request method with GET instead of POST?
I am using the jQuery plugin DataTables. I have a table of data that has HTML inputs and selects. When I use the DataTable search filter to filter the results and I search for all dropdowns that have the selected value of 'Open', nothing changes.
I believe this is happening because every dropdown in the table has the same options and the filter is searching on them and returning all results, since they all match.
How can I get the filter to search on only the selected value and not all options of the dropdown?
I have tried to find a solution, but all I can find are results like these :
Dropdown filter jquery datatables
CustomFilter
These all deal with adding custom filters for each column, I just want to use the existing DataTable filter.
Example
Live example of the problem, Search for 'Open' or 'Closed'
Code
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="name" type="text" value="Need more memory" id="name1"></td>
<td><select name="status" id="status1">
<option value="2">Closed</option>
<option selected="selected" value="1">Open</option>
</select>
</td>
</tr>
<tr>
<td><input name="name" type="text" value="Can't connect" id="name2"></td>
<td><select name="status" id="status2">
<option selected="selected" value="2">Closed</option>
<option value="1">Open</option>
</select>
</td>
</tr>
</tbody>
</table>
Now, you can use a data-search attribute on the <td>-element with data-tables. ref
<tr>
<td>
<input name="name" type="text" value="Need more memory" id="name1">
</td>
<td data-search="Open">
<select name="status" id="status1">
<option value="2">Closed</option>
<option selected="selected" value="1">Open</option>
</select>
</td>
</tr>
<tr>
fiddle
my similar question on datatables.net
There is a better way to put a drop-down list into your cells. Of course this is searchable. You can watch the offical tutorial about this technique.
Client side
Drop-down list creation
When you initialize the plugin you can do this:
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').dataTable().makeEditable({
sUpdateURL: "UpdateData.php",//Server side file accepting AJAX call.
"aoColumns": [//Column settings.
{},//1st column with default settings.
{//2nd column to a drop-down list.
indicator: 'Saving...',
loadtext: 'Loading...',
type: 'select',//This will make it a drop-down list.
onblur: 'submit',
data: "{'open':'Open','closed':'Closed'}"
}]
});
});
</script>
The key is the data part. Here you can define the options of your list. You can also add this part dinamically via PHP. The syntax is the following for one option.
'variable_sent_to_UpdateData.php':'Text that will be displayed'
Every option should be separated by a comma.
Column names
You can also rename your columns as shown in the offical tutorial so when they passed to the server, DataTables won't name them after the <th> tag:
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').dataTable(
aoColumns: [//Rename columns contained by AJAX call.
{sName: "name"},
{sName: "status"}
]
).makeEditable({
//Previous stuff...
});
});
</script>
Server side
After all, you just have to update your database in UpdateData.php:
$id = $_REQUEST['id'];//The id tag of your table's row.
$column = $_REQUEST['columnName'];//Column where the cell was edited.
$value = $_REQUEST['value'];//The new value.
$columnPosition = $_REQUEST['columnPosition'];
$columnId = $_REQUEST['columnId'];
$rowId = $_REQUEST['rowId'];
switch ($column)
{
case 'name':
//Do SQL update...
echo $value;
break;
case 'status':
//Do SQL update...
echo $value;
break;
default: echo 'Error';
}
It's important to echo (return) the $value variable because:
Indicates that the updating was successful.
This value will be the new value in the table.
If you return something else, it will count as an error message that will be displayed in a pop-up window and no changes will be shown in the table.
I have a form where I can add new rows to increase the form elements using jquery. In that form I have two dropdown options (Name:type and accounts) and two text inputs (Name:debit_amount and credit_amount).
Problem:
I have developed a jquery code to enable/disable text inputs based on the selected values from dropdown options. But the code works fine only if I don't add new rows. If I add a new row it only works for the very first row, I mean it disables/enables inputs of the first row only.
For the sake of clarity I have not provided the code for adding new rows below, but to get a live picture of all my codes please check this link, jsfiddle.net
Could you please tell me what change should I bring in my code to be able to make all the inputs (including inputs of generated rows ) disable/enable based on the selected values?
My HTML
<h2>Add Another Input Box</h2>
<table class="dynatable">
<thead>
<tr>
<th>Type</th>
<th>Account Name</th>
<th>Debit</th>
<th>Credit</th>
</tr>
</thead>
<tbody id="p_scents">
<tr>
<td>
<select name="type" id="type">
<option value="Debit">Debit</option>
<option value="Credit">Credit</option>
</select>
</td>
<td>
<select name="accounts" id="accounts">
<option value="">SELECT</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
</td>
<td>
<input type="text" name="debit_amount" id="debit_amount" />
</td>
<td>
<input type="text" name="credit_amount" id="credit_amount"/>
</td>
</tr>
</tbody>
Conditions for disabling/Enabling
1. If type selected == Debit and a value from accounts is selected then enable debit_amount input and disable credit_amount input
2. If type selected == Credit and a value from accounts is selected then enable credit_amount input and disable debit_amount input
3. If any of the values of type and accounts is not selected disable both
My Jquery Code for disabling/enabling inputs based on dropdown value
//ON the change of accounts(dropdown select)
$("#accounts").change(function() {
var type = $("select#type").val();
var accounts = $("select#accounts").val();
if (type == "Debit") {
$('#credit_amount').attr("disabled", true);
$('#debit_amount').removeAttr("disabled", true);
}
if (type == "Credit") {
$('#debit_amount').attr("disabled", true);
$('#credit_amount').removeAttr("disabled", true);
}
if (accounts == "") {
$('input[name=credit_amount]').val('');
$('input[name=debit_amount]').val('');
$('#debit_amount').attr("disabled", true);
$('#credit_amount').attr("disabled", true);
}
});
//ON the change of type(dropdown select)
$("#type").change(function() {
var accounts = $("select#accounts").val();
var type = $("select#type").val();
if (type == "Debit" && accounts != '') {
$('input[name=credit_amount]').val('');
$('#credit_amount').attr("disabled", true);
$('#debit_amount').removeAttr("disabled", true);
}
if (type == "Credit" && accounts != '') {
$('input[name=debit_amount]').val('');
$('#debit_amount').attr("disabled", true);
$('#credit_amount').removeAttr("disabled", true);
}
});
The problem is that your input elements all have the same id attribute values, ie: "debit_amount" and "credit_amount", so jQuery doesn't know which ones the "#debit_amount" and "#credit_amount" selectors refer to.
Element ids should be unique in the page, so you should append a sequence number to the end of each eg:
<select name="accounts_1" id="accounts_1">
....
<input type="text" name="debit_amount_1" id="debit_amount_1" />
<input type="text" name="credit_amount_1" id="credit_amount_1" />
Two solutions:
use the jQuery traversal API to find the input elements relative to the select element that triggered the onChange event. This is brittle and will break if you change your markup too much
parse the sequence number out of the <select> id attribute and use it to find the <input>s you want to modify
What I require is a pretty standard feature. And I am sure its easy enough, but somehow I cant make it happen. Please help me out here.
This is the scenario-->
I have a struts form on a jsp, which takes in employee information. Now with every employee I want to associate some family members.
So for information of family members I want :
1.) A row of -- 1 select element and 3 text field elements -- in the end of the form.
2.) A 'add' button which appends such rows on demand for adding more family members.
I dont know how I can attach a screen shot to give you exact idea of what I want.
I have tried doing this, using javascript, but javascript adds standard HTML elements, because of which I am not able to access the value of those fields in my action class.(Please tell me if this is not the case, because then the only question that will remain is, why am I unable access those values)
Currently what I am trying:
JSP:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td>Relationship</td>
<td>Name</td>
<td>Age</td>
<td>Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName[]"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++){
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
root.appendChild(cRow);
}
With this I am able to add a new row of specified elements, but unable to access the field values in the action class. I would like to point out that I am not able to access even the first row's elements in action class (probably because they are standard HTML).
Any help is appreciated.
Thanks!!
here is the solution to the problem, for those still stuck on it.
In the jsp:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td align="center">Relationship</td>
<td align="center">Name</td>
<td align="center">Age</td>
<td align="center">Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
</tr>
<tr>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
root.appendChild(cRow);
}
Then in the action class, just define a variables like this:
private String rel[];
private String rName[];
private String rAge[];
private String rOccupation[];
Define their getters and setters, and you can access each element of each row in jsp like this :
rel[0], rel[1], ........
rName[0],rName[1], .......
etc......
As for copying the Value of select element to cloned row, its simple javascript. Just do this:
clonedSelect.selectedIndex = original.selectedIndex;
If you still have issues, comment. :)