Xml:
<record id=“rec_id” model="ir.ui.view">
<field name="name">Demo</field>
<field name="model">model.name</field>
<field name="arch" type="xml">
<form string=“Demo”>
<header>
<h1>
<table align="center"class="Demo_class">
<tr>
<td align="center">
<input type="button" id=“demo_id” string=“Demo Button” class=“find_button”/>
</td>
<tr>
</table>
</h1>
</header>
</form>
</field>
</record>
Js:
var DemoClass = form_common.FormWidget.extend(form_common.ReinitializeWidgetMixin, {
events : {
'click .find_button':'find_button',
},
init: function() {
this._super.apply(this, arguments);
}
find_button : function(){
console.log("Click Event Called")
},
});
Issue: This is my code i just want to bind click event to specific Css selector ".find_button" but this code has not worked. Any one help me to resolve this problem.
Related
Request your help, as the below line of code if not loading the data into the table when i choose the related radio button, not sure what is wrong nor missing, if there is any alternate way other then this please do let me know.
Code
<div>
<label class="form-check-label><input type="radio" class="form-check-input" name="Gender" value="M" checked>Male</label>
<label class="form-check-label><input type="radio" class="form-check-input" name="Gender" value="F" checked>Female</label>
</div>
<div class="row" id="Dbackup">
<table id="Backup">
<thead>
<tr>
<th>Name</th><th>Gender</th>
</tr>
</thead>
<tbody>
<tr><td>xxxx<</td><td>Male</td></tr>
.
.
<tr><td>xxxx<</td><td>Female</td></tr>
</tbody>
</table>
</div>
**Ajax script**
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").on('click', function(){
var radioValue = $("input[name='Gender']:checked").val();
$.ajax({
url: "/gdata/" + radioValue,
method: "GET",
data:{rvalue:radioValue},
success: function(data){
$('#Backup').load(data);
}
});
});
});
</script>
From,
Vino
i am practicing with axios and Vue in the use of WebApi.
I have done this:
My template:
<template>
<form>
<div>
<div class="panel panel-default">
<div class="panel-heading"><h1><strong>Lista de nombres</strong></h1></div>
<div class="panel-body">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
</tr>
</thead>
<tbody>
<tr v-for="usuario in usuarios">
<td>{{usuario.Nombre}}</td>
<td>{{usuario.Apellido_P}}</td>
<td>{{usuario.Apellido_M}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p>Buscar usuario</p>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" v-model="busqueda" placeholder="Buscar usuario" />
<button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
</div>
</div>
</div>
</form>
</template>
And My Script:
<script>
import axios from 'axios'
export default {
data() {
return {
usuarios:[],
busqueda: ''
}
},
methods: {
buscarUsuario() {
axios.get('http://localhost:50995/api/GetUsuario', {
params: {
'id' : 7
}
}).then(response => {
this.usuarios = response.data
}).catch(e => {
console.log(e)
})
},
getUsuarios() {
axios.get("http://localhost:50995/api/GetUsuarios")
.then(response => {
this.usuarios = response.data
})
.catch(e => {
this.errors.push(e)
})
}
},
created() {
this.getUsuarios(),
this.buscarUsuario()
}
}
</script>
The method getUsuarios() is working well; but the method buscarUsuario() not; only if i put in the params ‘id’ a number the log of my WebApi records a query, but if write this code: this.busqueda not working. Either way, the result in the page is not working with the method buscarUsuario().
And finally friends, how to prevent load the page everytime i push the button?
Thank you very much!
It seems kind of strange. I conclude you reading it properly on server-side. So I bet your server only wants Number(7) not String(7). You should change basic stance of busqueda to null. Then add .number modifier to v-model. Like that:
<input type="text" class="form-control" v-model.number="busqueda" placeholder="Buscar usuario" />
How to prevent load the page everytime you push button?
Add .prevent modifier.
Change:
<button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
To:
<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>
Also I recomend use # as shortcut for v-on:(in this example you could have use #click.prevent).
If it still refreshes. Add #submit.prevent="functionName" to form...
Use id without quote and click.prevent to prevent submit.
params: {
id: 7
}
<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>
also you can use button type="buttton"
<button type="button" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
Add row script is not working after adding other functionality screen.
I am trying to do dynamically adding table tows when user clicks "addrow" button. It works when i do it separately. But when i add along with my main jsp code which has other functionality script, that time its not working. Please help me on this.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>section</title>
<style>
</style>
<!-- date picker -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
} );
</script>
<!-- addrows functionality -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=1;
$("button").click(function(){
$('#add'+i).html("<td><select name='inpparameter0"+i+"'id='input_parameter'><option value='P1'>Type/Rating</option><option value='P2'>Operating Check</option><option value='P3'>Ext.Apperance</option><option value='P4'>Verify TC</option><option value='P5'>Material</option<option value='P6'>Dimension Check</option><option value='P7'>Threads Check</option> <option value='P8'>Visual Check</option><option value='P9'>Specification</option><option value='P10'>Batch no</option><option value='P11'>Mfg. Date</option><option value='P12'>Exp. Date</option></select></td><td><select name='inpspec0"+i+"' id='input_spec'><option value='S1'>As per PO</option><option value='S2'>Damage</option><option value='S3'>OK</option><option value='S4'>Stainless Steel</option><option value='S5'>Gaues</option><option value='S6'>Mild Steel</option><option value='S7'>As per Drawing]</option><option value='S8'>Cast Iron</option><optionvalue='S9'>Copper</option><optionvalue='S10'>Aluminium</option><optionvalue='S11'>Brass</option><option value='S12'>Spring Steel</option><option value='S13'>Tool Steel</option></select> </td><td class='Body_Cell'><input type='text' name='inpact1"+i+"' id='inpact1' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact2"+i+"' id='inpact2' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact3"+i+"' id='inpact3' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact4"+i+"' id='inpact4' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact5"+i+"' id='inpact5' value='NIL'></td>");
$('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>');
i++;
});
});
</script>
<script>
<!-- For calling Populate Table Servlet for getting Item list -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.post('PopulateTable',{pono : $('#pono').val()},function(responseJson) {
if(responseJson!=null){
$("#itemtable").find("tr:gt(0)").remove();
var table1 = $("#itemtable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).html('<input type="checkbox"/>');
rowNew.children().eq(1).text(value['itemname']);
rowNew.children().eq(2).text(value['itemcode']);
rowNew.children().eq(3).text(value['supplier']);
rowNew.children().eq(4).text(value['totalqty']);
rowNew.children().eq(5).html('<input type="text"/>');
rowNew.children().eq(6).html('<input type="text"/>');
rowNew.children().eq(7).html('<input type="text"/>');
rowNew.appendTo(table1);
});
}
});
$("#tablediv").show();
});
});
</script>
</script>
<script>
$(document).ready(function() {
$("#find").click(function(event){
$.ajax({
url : 'callserv0',
type: 'POST',
data : {
grnno : $('#grn').val()
},
success : function(data) {
alert("Please hold on!");
var str = data;
var res = str.split(",");
$('#pono').val(res[0]);
$('#podt').val(res[1]);
return false;
}
});
});
});
</script>
<script>
/* function to show dropdown list of print menu*/
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* reload the page when user clicks new button*/
function myfun1() {
location.reload(true);
}
/* to allow only numerical values in GRn field*/
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</head>
<body>
<form>
<img border="0" src="mwlogo.gif" alt="logo" id="topright">
<header><h1>testing</h1></header>
<ul>
<li>Newreload</li>
<li>Helptest</li>
<li>Logout</li>
<li class="dropdown">
Print
<div class="dropdown-content" id="myDropdown">
Print Current Report
Print Preview
Print Report for given date
Print Report for given period
</div>
</li>
</ul>
<p>
Receipt number: <input type="text" id="grn" onkeypress="return isNumber(event)" required/>
<input type="button" id="find" value="Find" class="button0"/>
Type of Evaluation <select name="Evalu">
<option value="electrical">Electrical</option>
<option value="mechanical">Mechanical</option>
</select>
Unit <select name="unit">
<option value="unit1">xx</option>
<option value="unit2">yy</option>
<option value="unit3">zz</option>
<option value="unit5">rr</option>
</select>
<br>
Report No <input type="text" name="irepno" maxlength="8"/>
Inspection date <input type="date" name="inspdate" id="datepicker" required/>
<br></br>
POod number: <input type="text" id="pono" />
POdt Date : <input type="text" id="podt" />
doc No <input type="text" name="invno"/>
doc Date <input type="text" name="invdate"/>
</p>
<input type="button" value="Show Item List" id="showTable" class="button1"/>
<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<td><input type="checkbox" /></td>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
</table>
</div>
<br></br>
<table cellspacing="0" cellpadding="0" width="100%" id="tab_logic" >
<tr>
<th class="Header_Cell" width="91" align="center">Parameters</th>
<th class="Header_Cell" width="150" align="center">Specification</th>
<th class="Header_Cell" width="150" align="center">Actual1</th>
<th class="Header_Cell" width="50" align="center">Actual2</th>
<th class="Header_Cell" width="50" align="center">Actual3</th>
<th class="Header_Cell" width="50" align="center">Actual4</th>
<th class="Header_Cell" width="50" align="center">Actual5</th>
</tr>
<tr id ='add0'>
<td>
<select name="inpparameter0" id="input_parameter">
<option value="P1">Type/Rating</option>
<option value="P2">Operating Check</option>
<option value="P3">Ext.Apperance</option>
<option value="P4">Verify TC</option>
<option value="P5">Material</option>
<option value="P6">Dimension Check</option>
<option value="P7">Threads Check</option>
<option value="P8">Visual Check</option>
<option value="P9">Specification</option>
<option value="P10">Batch no</option>
<option value="P11">Mfg. Date</option>
<option value="P12">Exp. Date</option>
</select>
</td>
<td>
<select name="inpspec0" id="input_spec">
<option value="S1">As per PO</option>
<option value="S2">Damage</option>
<option value="S3">OK</option>
<option value="S4">Stainless Steel</option>
<option value="S5">Gaues</option>
<option value="S6">Mild Steel</option>
<option value="S7">As per Drawing]</option>
<option value="S8">Cast Iron</option>
<option value="S9">Copper</option>
<option value="S10">Aluminium</option>
<option value="S11">Brass</option>
<option value="S12">Spring Steel</option>
<option value="S13">Tool Steel</option>
</select>
</td>
<td class="Body_Cell"><input type="text" name="inpacta0" id="inpact1" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactb0" id="inpact2" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactc0" id="inpact3" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactd0" id="inpact4" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpacte0" id="inpact5" value="NIL"/></td>
</tr>
</table>
<br>
<input type="button" value="Addrow" id="addrow" class="button1" style="float: right;">
<input type="button" value="Save the record" class="button0">
</form>
</body>
</html>
You have not used the id of the button while using the click event listener. You have used the 'button' class. Please use 'addrow' id of button to trigger the event. Also, use .on for triggering click events as .click doesn't work when DOM is manipulated. Move the $('#tab_logic').append above $("#addrow").on('click',function(){ because on first click there will be no <tr> to append the row.
$(document).ready(function(){
var i=1;
$("#addrow").on('click',function(){
$('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>');
$('#add'+i).html("<td><select name='inpparameter0"+i+"'id='input_parameter'><option value='P1'>Type/Rating</option><option value='P2'>Operating Check</option><option value='P3'>Ext.Apperance</option><option value='P4'>Verify TC</option><option value='P5'>Material</option<option value='P6'>Dimension Check</option><option value='P7'>Threads Check</option> <option value='P8'>Visual Check</option><option value='P9'>Specification</option><option value='P10'>Batch no</option><option value='P11'>Mfg. Date</option><option value='P12'>Exp. Date</option></select></td><td><select name='inpspec0"+i+"' id='input_spec'><option value='S1'>As per PO</option><option value='S2'>Damage</option><option value='S3'>OK</option><option value='S4'>Stainless Steel</option><option value='S5'>Gaues</option><option value='S6'>Mild Steel</option><option value='S7'>As per Drawing]</option><option value='S8'>Cast Iron</option><optionvalue='S9'>Copper</option><optionvalue='S10'>Aluminium</option><optionvalue='S11'>Brass</option><option value='S12'>Spring Steel</option><option value='S13'>Tool Steel</option></select> </td><td class='Body_Cell'><input type='text' name='inpact1"+i+"' id='inpact1' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact2"+i+"' id='inpact2' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact3"+i+"' id='inpact3' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact4"+i+"' id='inpact4' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact5"+i+"' id='inpact5' value='NIL'></td>");
i++;
});
});
Hope it helps. :)
I have two buttons on single form.
First button used to upload file and second button is submit .
I want validation , when i clicked on submit button that time validation should be generate.
But in my application when i clicked on upload button that time validation generated.
View:
<% using (Html.BeginForm("Create","Document", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
<table>
<tr>
<td >
File Name:
</td>
<td >
<%: Html.EditorFor(model=>model.document.DOCUMENT_NAME) %>
<%: Html.ValidationMessageFor(model => model.document.DOCUMENT_NAME) %>
</td>
</tr>
<tr>
<td>
Select File:
</td>
<td>
<input type="file" name="file" id="file" style="height: 24px" />
<input type="submit" name="submitButton" value="Upload" />
</td>
<tr>
</table>
<div>
<input type="submit" name="submitButton" value="Create" />
</div
<%}%>
Controller:
[Required]
[Display(Name = "DOCUMENT NAME")]
[ReadOnly(true)]
public string DOCUMENT_NAME
{
get;
set;
}
Any button on form (and You have two) will trigger validation. One of possibile solutions is replace upload button by some element and do uploading via jquery.
you can also check which button is click like below
View:
<div>
<input type="file" name="file" id="file" style="height: 24px" />
<input type="submit" id="btnUpload" name="submitButton" value="Upload" />
</div>
<div>
<input type="submit" id="btnCreate" name="submitButton" value="Create" />
</div
controller
public ActionResult actionName(string btnUpload,string btnCreate)
{
//now you can easily check here for which button is clicked
if(btnUpload != null || btnUpload !="")
{
//perform uploading logic here
}
if(btnCreate!=null || btnCreate !="")
{
//perform your validation here
}
}
i hope this will help you.
Having a hard time figuring out how to add an increment value for each id attribute within the div contents with cloned jQuery object.
http://jsfiddle.net/hvK8d/
===================== HTML=====================
<div class="upload-file-container">
<div class="uploadFile left clearfix">
<input type="file" id="FileUpload1">
<table id="RadioButtonList1">
<tbody>
<tr>
<td><input type="radio" value="Resume" id="RadioButtonList1_1">
<label for="RadioButtonList1_1">Resume</label></td>
<td><input type="radio" value="Letter of Recommendation" id="RadioButtonList1_2">
<label for="RadioButtonList1_2">Letter of Recommendation</label></td>
<td><input type="radio" value="Other" id="RadioButtonList1_3">
<label for="RadioButtonList1_3">Other</label></td>
</tr>
</tbody>
</table>
</div>
Remove </div>
<div class=""><a class="plus" href="javascript:;">plus one</a></div>
===================== JQUERY =====================
//Cloning upload file control
$('.remove').live('click', function () {
if (confirm("Are you sure you wish to remove this item?")) {
$(this).parent().slideUp('fast', function () {
$(this).remove();
});
}
return false;
});
$('.plus').click(function () {
console.log('cloning');
var divCloned = $('.upload-file-container:first').clone();
divCloned.hide().insertAfter('.upload-file-container:last').slideDown('fast');
return false;
});
For the sake of completeness I will put here a small solution making use of a "template."
A class for hiding the template:
.upload-file-container.template {
display: none;
}
A small function to do replacements:
$.fn.template = function(variables) {
return this.each(function() {
this.innerHTML = this.innerHTML.replace(/{{(.+)}}/g, function(match, variable) {
return variables[variable];
});
return this;
});
};
A template:
<div class="upload-file-container template">
<div class="uploadFile left clearfix">
<input type="file" id="FileUpload{{id}}">
<table id="RadioButtonList{{id}}"><tbody>
<tr>
<td>
<input type="radio" value="Resume" id="RadioButtonList{{id}}_1">
<label for="RadioButtonList{{id}}_1">Resume</label>
</td>
</tr>
</tbody></table>
</div>
</div>
Usage:
var count = 0;
var divCloned = $(".upload-file-container.template")
.clone()
.removeClass("template")
.template({
id: count++
});
Instead of using numbered IDs, you should be using the array-like notation (e.g. RadioButtonList[]) in the name attribute, and wrap your labels around the inputs:
<td>
<label for="RadioButtonList1_1">
<input type="radio" value="Resume" name="RadioButtonList1[]">
Resume
</label>
</td>
<td>
<label for="RadioButtonList1_2">
<input type="radio" value="Letter of Recommendation" name="RadioButtonList2[]">
Letter of Recommendation
</label>
</td>
<td>
<label for="RadioButtonList1_3">
<input type="radio" value="Other" name="RadioButtonList3[]">
Other
</label>
</td>
P.S. You should also consider using a more descriptive name than RadioButtonList.