when I populate my input field with an onClick event with jQuery and inserting that clicked value into the input upon sending the form to the database I get the next error :
SEVERE: Servlet.service() for servlet [ws.ApplicationConfig] in
context with path [/CRUDAngularJS_Server] threw exception
org.hibernate.PropertyValueException: not-null property references a
null or transient value: entities.Product.startdate
this is the input setup
<div id="bookmenu">
<fieldset>
<legend>Booking Information</legend>
<table cellpadding="2" cellspacing="2">
<tr>
<td>Name</td>
<td><input type="text" ng-model="product.name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" ng-model="product.email"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" ng-model="product.phone"></td>
</tr>
<tr>
<td>Service</td>
<!-- ng-options="product.service.text for product.service in objectList track by product.service.Main Haircut" - returns null -->
<td><select type="text" ng-model="product.service" id="serviceSelect">
<option value="Man Haircut">Man Haircut</option>
<option value="Woman Haircut">Woman Haircut</option>
<option value="Hair Dye">Hair Dye</option>
<option value="Abu Agela">Abu Agela</option>
</select>
</td>
</tr>
<tr>
<td>Start date</td>
<td><input type="text" ng-model="product.startdate" id="startdateID" readonly></td>
</tr>
<tr>
<td>End date</td>
<td><input type="text" ng-model="product.enddate" id="enddateID"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Book" ng-click="add()">
and this is the jquery script surrounded with setTimeout to see if I refresh the selection after fetching it will actually apply it to the field.
the complete onClick function
select: function(start, end) {
// Booking Form Toggle
if ($('#bookmenu').css('display') === "none") {
$('#bookmenu').show();}
// Fetching data from click event to booking form
var startString = start;
startString = new Date(startString).toUTCString();
startString = startString.split(' ').slice(0, 5).join(' ');
setTimeout(function() {
$("#startdateID").val(String(startString));
console.log($("#startdateID").val());
}, 500);
// Constructing the end date based on start date + service.duration
},
console.log($("#startdateID").val());
returns the appropriate selection.
if I copy-paste the data that populated in that field and submit it works fine but I want that field to be readonly.
Related
I have a report that, when it goes into input mode, creates a form where you have multiple rows of data, and on each row, there is a button and an input field. The input field name is the same for each row (it's easier for the CGI program to process the input that way). What I would also like, but having trouble doing, is if the user clicks on the button of that row, it should automatically update the input field in that same row. How can javascript find the input field for the same row where the button is?
I was stuck coming out of the gates, so don't even know where to start.
Here's a simplified version of the HTML:
<table>
<tr>
<td>Frank</td>
<td>Burns</td>
<td><input type="text" name="overtime" value="1000"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN('1000,'2000');">
</tr><tr>
<td>John</td>
<td>Doe</td>
<td><input type="text" name="overtime" value="500"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN('500,'2000');">
</tr>
</table>
Here's the incomplete javascript:
function avgIN(orig, avg) {
let text = "Request to Average In Overtime:\n\n"+
"Current OT Total: "+orig+"\n"+
"Averaged In Total: "+avg+"\n\n"+
"Click OK to accept";
if (confirm(text) == true) {
// do something here to set the overtime input field on the same row to the value of "avg"
}
else {
alert("Average In function canceled");
}
}
use event delegation...
and do something like that:
const myTable = document.querySelector('#my-table')
myTable.onclick = e =>
{
if (!e.target.matches('button[data-avg-in]')) return // exit
let
[orig, avg] = e.target.dataset.avgIn.split(',').map(Number)
, txt =
`Request to Average In Overtime:
Current OT Total: ${orig}
Averaged In Total: ${avg}
Click OK to accept`
;
if (confirm(txt))
{
e.target.closest('tr').querySelector('input[name="overtime[]"]').value = 'avg'
}
else
{
alert('Average In function canceled');
}
}
<table id="my-table">
<tr>
<td>Frank</td>
<td>Burns</td>
<td><input type="text" name="overtime[]" value="1000"></td>
<td><button data-avg-in="1000,2000" >Average In</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><input type="text" name="overtime[]" value="500"></td>
<td><button data-avg-in="500,2000" >Average In</button></td>
</tr>
</table>
How to add values in a textarea using a add button & that values should be displayed in other textarea using HTML5
<script src="http://code.jquery.com/jquery-1.11.3.min.js">
jQuery('#constraint_btn').click(function(){
var newVal = jQuery('#consEditor_txtarea').attr('value');
jQuery('#new_html').show();
jQuery('#new_consEditor_txtarea').attr('value',newVal);
});
</script>
<table>
<tr>
<td valign="top"><label>Constarint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>
You need to close the script tags with the src and start a new script tag - if there is a src attribute, then you cannot have content inside the script
You need https (and preferably update the jquery to a newer version) in the jQuery source
You did not call the fields the same in the code as in the HTML
You need to execute the code after the page has loaded or the fields rendered - here I wrapped in the $(function() {}) load event handler
#new_html {
display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#constraint_btn').click(function() {
let oldVal = $('#consEditor_txtarea').val().trim();
let newVal = $('#new_consEditor_txtarea').val().trim();
const vals = newVal.split("\n").filter(item => item);
if (oldVal) vals.push(oldVal);
$('#consEditor_txtarea').val(""); // remove
$('#new_html').show();
$('#new_consEditor_txtarea').val(vals.join("\n"));
});
});
</script>
<table>
<tr>
<td valign="top"><label>Constraint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>
Trying to self create a validation that compares Gross and Tare values in the table using jQuery validation plugin. Tare should always be smaller than Gross.
Here is the JS code:
$.validator.addMethod('lessThan', function (value, element, param) {
if (this.optional(element)) return true;
var i = parseInt(value);
var j = parseInt($(param).val());
return i <= j;
}, "Tare must less than Gross");
$('#myForm').validate({rules: {tare: {lessThan: ".gross"}}});
And my HTML:
<form id="myForm">
<table id="lineItemTable">
<thead>
<th>
<tr>
<td>Gross</td>
<td>Tare</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td><input type="text" name='gross' class="gross"/></td>
<td><input type="text" name='tare' class="tare"/></td>
</tr>
<tr>
<td><input type="text" name='gross' class="gross"/></td>
<td><input type="text" name='tare' class="tare"/></td>
</tr>
</tbody>
</table>
</form>
This code works fine when only have one row involved.
When comes two table rows, it compares the 2nd row tare value with the 1st row gross value. Apparently I want it to compare 2nd row tare value with 2nd row gross value. Also for some reason the error message shows up at the 1st row.
Here is one screen shot:
Please advise how do I change my code to make it working properly.
And here is the CDN that I am using:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
Looking for $('.gross').val() will always retrieve the value of the first matched element (in the whole document).
Instead, look only in the row containing the element being validated:
var j = parseInt($(element).closest('tr').find(param).val());
$.validator.addMethod('lessThan', function(value, element, param) {
console.log(element);
if (this.optional(element)) return true;
var i = parseInt(value);
var j = parseInt($(element).closest('tr').find(param).val());
return i <= j;
}, "Tare must less than Gross");
$('#myForm').validate({
rules: {
tare: {
lessThan: ".gross"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="myForm">
<table id="lineItemTable">
<thead>
<th>
<tr>
<td>Gross</td>
<td>Tare</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" name='gross' class="gross" />
</td>
<td>
<input type="text" name='tare' class="tare" />
</td>
</tr>
<tr>
<td>
<input type="text" name='gross' class="gross" />
</td>
<td>
<input type="text" name='tare' class="tare" />
</td>
</tr>
</tbody>
</table>
</form>
Content loaded through AJAX into a div isn't clickable until the user zooms the page. This seems to reset or remap some clickable zone definition somewhere.
In some other cases, the "clickable zone" gets just a bit off and you can notice it as the mouse cursor changes in the wrong area, not under my input fields/buttons/links.
This issue is seen under Chrome and Mozilla, I'm not working with IE but it also happens there.
From the symptoms above, what can be the causes?
This is the code I'm using to load the elements, (I doubt it's too relevant since the content is effectively being loaded):
function reqHandler(xhr, section) {
var x = xhr;
var s = section;
this.callback = function() {
if (x.readyState == 4) {
var ss = document.getElementById(s);
if (ss != null)
ss.innerHTML = x.responseText;
stripAndExecuteScript(x.responseText);
}
}
};
function loadInto(page,section, wait) {
if (wait==null) wait = true;
if (wait) makeWait(section);
xhr = createXMLHttpRequest();
handler = new reqHandler(xhr, section);
xhr.onreadystatechange = handler.callback;
xhr.open("GET", page, true);
xhr.send(null);
}
stripAndExecute is just to eval the loaded content's javascript, but it isn't used, the loaded content has simple link tags and a form, but anyway here's the code:
function stripAndExecuteScript(text) {
var scripts = '';
var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
scripts += arguments[1] + '\n';
return '';
});
if (window.execScript){
window.execScript(scripts);
} else {
eval(scripts);
}
return cleaned;
}
HTML of the generated div content:
<form id="users_form">
<table>
<colgroup><col width="65px">
</colgroup><tbody><tr>
<td colspan="2">Llene todos los campos</td>
</tr>
<tr>
<td align="right">Nombre</td>
<td><input class="text_field" name="name" value="" type="text"></td>
</tr>
<tr>
<td align="right">E-Mail</td>
<td><input class="text_field" name="email" value="" type="text"></td>
</tr>
<tr>
<td align="right">Usuario</td>
<td><input class="text_field" name="user" value="" type="text"></td>
</tr>
<tr>
<td align="right">Contraseña</td>
<td><input class="text_field" name="password" type="password"></td>
</tr>
<tr>
<td align="right">Repita contraseña</td>
<td><input class="text_field" name="password_confirm" type="password"></td>
</tr>
<tr class="type_display_block">
<td align="right">Tipo</td>
<td><select class="text_field" name="type" style="width:100%;">
<option value="0">Administrador</option>
<option value="1">Gerente</option>
<option value="2">Normal</option>
</select></td>
</tr><tr>
<td colspan="2"><a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"><img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px">Enviar
</a></td>
</tr>
</tbody></table>
</form>
The element which becomes not clickable is the "Enviar" button in the bottom.
NOTE: I'm not using jQuery.
NOTE2: If I put the "Enviar" link not in the next row but in the next column next to the select, like this:
<tr class="type_display_block">
<td align="right">Tipo</td>
<td><select class="text_field" name="type" style="width:100%;">
<option value="0">Administrador</option>
<option value="1">Gerente</option>
<option value="2">Normal</option>
</select></td>
<td colspan="2"><a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"><img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px">Enviar
</a></td>
</tr>
this is, in a TD instead of a TR, the element "Enviar" is clickable again. Actually I discovered the Select controls are responsible for the wrong offset in other sections as well. This is reproducible under windows and linux in Mozilla Firefoz and Chrome.
A bug of some kind?...
ok should be an easy one for everyone,...
i am calling a javascript function in the tag of a button using inclick. Im trying to get that function to have three different parameters. The function then submits three different times, which should end up being three different records in a ruby table.
But i cant see why this doesnt work...
<script>
function submiteffort( elem )
{
// Elem 1
$("#effort_hours").val( $( elem ).val() );
$("#task_id").val( elem.id );
$("#effort_form").submit();
return true;
}
function medium( leave, toil, sick)
{
var dave = submiteffort(document.getElementsByName(leave));
if(dave == true){
var dave2 = submiteffort(document.getElementsByName(toil));
}
if(dave2 == true){
submiteffort(document.getElementsByName(sick));
}
}
</script>
<div class="startleft">
<table>
<tr>
<td>Leave</td>
<td><input class="dayinput" type="text" name="Leave" placeholder="0" ></td>
</t>
<tr>
<td>TOIL</td>
<td><input class="dayinput" type="text" name="TOIL" placeholder="0"></td>
</tr>
<tr>
<td>Sick</td>
<td><input class="dayinput" type="text" name="Sick" placeholder="0"></td>
</tr>
<tr>
<td>Total</td>
<td><input id="total" class="total_low" type="text" value="0" disabled="" name="Dave">
</tr>
<tr>
<td></td>
<td><button onclick="medium('Leave','TOIL','Sick')">Commit</button></td>
</tr>
</table>
</div>
For some reason this only submits 1 record into the table and i cant figure out why.
Well if you submit the form, the page refreshes, and the other 2 function calls don't execute. You'd have to use AJAX to send data to the backend in 3 separate function calls.