Pls help basically I want to filter my datatable using form.
each input has a value that would affect the query with submitted form.
here is my JQUERY.
$("#submit").click(function (e) {
$('#table').dataTable
({
"sAjaxSource": "index.php/report/get_report",
"sServerMethod": "POST",
'fnServerData': function (url, data, callback) {
// Add new data
dataString = $("#myform").serialize();
$.ajax({
'url': "index.php/report/get_report",
'data': dataString,
'type': 'POST',
'success': callback,
'dataType': 'json',
'cache': true
});
},
'bServerSide' : true,
"aaSorting": [[ 3, "desc" ]],
"bPaginate": true,
"bSortClasses": false,
"bAutoWidth": true,
"bInfo": true,
"iDisplayLength" : 3,
"bScrollCollapse": true,
"oLanguage": {
"sSearch": "Search:"
},
"bDestroy": true
});
});
and this is my HTML FORM
<form name="myform">
<label>Employee:</label>
<input type="text" name="employeeid" id="employeeid" title="Type Employee" />
<label>Training Type: </label>
<select name="trainingtype" id="trainingtype" >
<option value="" selected="selected">All</option>
<option value="1">Externally Facilitated Training</option>
<option value="3">Internally Facilitated Training</option>
<option value="2">Webcast/E-Learning</option>
</select>
<label>Datestart</label>
<input type="text" class="field size3" name="datestart" id="datepicker_s" />
<label>Dateend </label>
<input type="text" class="field size3" name="dateend" id="datepicker_e" />
<input type="hidden" id="txtsearchid" name="txtsearchid">
<input type="button" class="button" value="Submit" id="submit" />
when I submit my form I get nothing.
Im I doing the right way?
pls help.
GOT IT
"fnServerData": function ( sSource, aoData, fnCallback ) {
//REQUIRED: Add a Post variable with the object value
aoData.push(
{ "name": "txtsearchid", "value": $( "#txtsearchid" ).val() },
{ "name": "datestart", "value": $( "#datepicker_s" ).val() },
{ "name": "dateend", "value": $( "#datepicker_e" ).val() },
{ "name": "trainingtype", "value": $( "#trainingtype" ).val() }
);
$.ajax( {
dataType: 'json',
type: "POST",
url: sSource,
data: aoData ,
success: fnCallback
} );
},
this must be the solution for my problem. I didnt used the serialized instead of push
Use Firebug add ons from Mozilla to check the error
Related
I'm new to Composition API and I don't know why I get http response 400. Payload in request looks same as json object. I have to send to an api a nested object. JSON object looks like this:
{
"contact": {
"email": "",
"firstname": "",
"lastname": "",
},
"description": "",
"preference": "",
"title": "",
"hobbies": [],
"maxSum": -17692428,
"minSum": 98485775,
"interests": [
{
"interest1": ""
},
{
"intereest2": ""
}
],
"passions": [
{
"pasion1": ""
},
{
"passion2": ""
}
]
}
My template is:
<template>
<form class="form" novalidate="">
<div class="form__header">
<h3 class="form__title">Title</h3>
</div>
<div class="form__section">
<label for="title">Title*</label>
<input
type="text"
v-model="title"
/>
</div>
<div class="form__section">
<label for="preference"> Preference*</label>
<textarea
type="text"
v-model="preference"
/>
</div>
<div class="form__section">
<label for="hobbies"> Programming languages*</label>
<textarea
type="text"
v-model="hobbies"
/>
</div>
<div class="form__section">
<label for="interests"> interests*</label>
<textarea
type="text"
v-model="interests"
/>
</div>
<div class="form__section">
<label for="passions"> passions*</label>
<textarea
type="text"
v-model="passions"
/>
</div>
<div class="form__section">
<div> Job mobility*</div>
<select v-model="preference">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form__section">
<label for="minSum"> Minimum Payment *</label>
<input
type="number"
v-model="minSum"
/>
</div>
<div class="form__section">
<label for="maxSum"> Maximum Payment *</label>
<input
type="number"
v-model="maxSum"
/>
</div>
<div class="form__section">
<label for="name"> name*</label>
<input
type="text"
placeholder=" Name"
v-model="contact.firstname"
/>
</div>
<div class="form__section">
<label for="last name"> last name *</label>
<input
type="text"
placeholder=" Last Name"
v-model="contact.lastname"
/>
</div>
<div class="form__section">
<label for="email"> email *</label>
<input
type="email""
placeholder=" Email"
v-model="contact.email"
/>
</div>
<div class="form-buttons">
<div class="form__section">
<button
#click.prevent="save()"
id="save"
class="form__submit"
type="submit"
data-inline="true"
>
Save
</button>
</div>
</div>
</form>
</template>
And script tag:
<script>
import { reactive, toRefs } from "vue";
import { ref } from "vue-demi";
export default {
setup() {
const handleSave = reactive({
title: "",
description: "",
hobbies: [],
passions: [],
interests: [],
description: "",
maxSum: "",
minSum: "",
contact: {}
});
const isSaveAdded = ref(false)
const addSave = async () => {
const body = {}
body.title = handleSave.title
body.description = handleSave.description
body.hobbies = handleSave.hobbies.toString().split(",").map(value => {return {hobby:value }})
body.technologies= handleJob.technologies.toString().split(",").map(value => {return {techName:value }})
body.passions = [handleSave.passions]
body.interests = handleSave.interests
body.maxSum = handleSave.maxSum
body.minSum = handleSave.minSum
body.contact = handleSave.contact
const response = await axios.post("/foo", body,
{
headers: {
///////////////////////
}
});
handleSave.value = response.data;
isSaveAdded.value = true
};
return {
...toRefs(handleSave),
addSave,
isSaveAdded
};
}
};
</script>
Why request is not successful and what should it look like? Thank you
I'm using following js code to show paypal button on a page.
I add two radio button to select amount of payment, but I can't set it.
I save amount in variable named importoSelezionato.
But if I replace 50 with variabled,it not work.
How replace correctly number in purchaseunit with variable?
Thanks
<script>
function initPayPalButton() {
// Radiobutton IMPORTO $(document.getElementsByName('CustImporto')).on('click',function(){
var getSelectedValue = document.querySelector( 'input[name="CustImporto"]:checked');
//alert("importo selezionato: euro "+getSelectedValue.value);
var importoSelezionato = getSelectedValue.value;
});
// Radiobutton IMPORTO
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'horizontal',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"Ricarica standard account","amount":{"currency_code":"EUR","value":50}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
//aggiungere un log in una tabella di database
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
<div class="row">
<div class="col-lg-6 in-gp-tl">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="CustImporto" required="" value="25" aria-label="...">
</span>
<input type="text" class="form-control" readonly="readonly" value="25" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6 in-gp-tb">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="CustImporto" required="" value="50" aria-label="...">
</span>
<input type="text" class="form-control" readonly="readonly" value="50" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Query the DOM from createOrder, which runs when a PayPal button is clicked. No need for an onclick listener...
<script>
function initPayPalButton() {
function getAmount() {
var getSelectedValue = document.querySelector( 'input[name="CustImporto"]:checked');
//alert("importo selezionato: euro "+getSelectedValue.value);
return getSelectedValue.value;
};
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'horizontal',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
"purchase_units": [
{
"amount": {
"currency_code": "EUR",
"value": getAmount()
},
"description": "Ricarica standard account"
}
]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
//aggiungere un log in una tabella di database
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
On submitting the form, I want to show 'Please wait ..' and on successful submission the data returned from server. Using jQuery , it is easy to do. But there should be a React way as React does not like such kind of direct DOM manipulation - I think . 1) Am I right ? 2) How to show the message on (not after ) form submission?
var FormComp = React.createClass({
handleSubmit:function(){
var userName=this.refs.userName.getDOMNode().value.trim();
var userEmail= this.refs.userEmail.getDOMNode().value.trim();
if(!userName || !userEmail){
return;
}
this.props.onFormSubmit({userName:userName, userEmail:userEmail,url:"/api/submit"});
this.refs.userName.getDOMNode().value='';
this.refs.userEmail.getDOMNode().value='';
return;
},
render: function() {
var result=this.props.data;
return (
<div className={result}>{result.message}</div>
<form className="formElem" onSubmit={this.handleSubmit}>
Name: <input type="text" className="userName" name="userName" ref="userName" /><br/>
Email: <input type="text" className="userEmail" name="userEmail" ref="userEmail" /><br/>
<input type="submit" value="Submit" />
<form >
</div>
);
}
});
var RC= React.createClass({
getInitialState: function() {
return {data: ""};
},
onFormSubmit:function(data){
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: data,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render:function(){
return <FormComp onFormSubmit={this.onFormSubmit} data={this.state.data}/>
}
});
React.render(
<RC/>,
document.getElementById('content')
);
This is definitely something React can handle, no direct DOM manipulation is needed. You're almost there, just need to reorganize a little. Here's one way to approach this (with comments around important changes):
var FormComp = React.createClass({
// To get rid of those input refs I'm moving those values
// and the form message into the state
getInitialState: function() {
return {
name: '',
email: '',
message: ''
};
},
handleSubmit: function(e) {
e.preventDefault();
var userName = this.state.name.trim();
var userEmail = this.state.email.trim();
if(!userName || !userEmail) return;
this.setState({
name: '',
email: '',
message: 'Please wait...'
});
// I'm adding a callback to the form submit handler, so you can
// keep all the state changes in the component.
this.props.onFormSubmit({
userName: userName,
userEmail: userEmail,
url: "/api/submit"
}, function(data) {
this.setState({ message: data });
});
},
changeName: function(e) {
this.setState({
name: e.target.value
});
},
changeEmail: function(e) {
this.setState({
email: e.target.value
});
},
render: function() {
// the message and the input values are all component state now
return (
<div>
<div className="result">{ this.state.message }</div>
<form className="formElem" onSubmit={ this.handleSubmit }>
Name: <input type="text" className="userName" name="userName" value={ this.state.name } onChange={ this.changeName } /><br />
Email: <input type="text" className="userEmail" name="userEmail" value={ this.state.email } onChange={ this.changeEmail } /><br />
<input type="submit" value="Submit" />
</form>
</div>
);
}
});
var RC = React.createClass({
onFormSubmit: function(data, callback){
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: data,
success: callback,
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return <FormComp onFormSubmit={this.onFormSubmit} />
}
});
React.render(
<RC />,
document.getElementById('content')
);
I have created a modal dialog using Bootstrap and I'm having a problem with the Modal dialog box not clearing form input fields after the box is closed or after it's submitted.
HTML
<!-- Password Reset Modal -->
<div id="passwModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Forgot Password?</h4>
<p>Please enter your registered email address below and a new password will be sent to you.</p>
</div>
<div class="modal-body">
<div id="sent"><!-- Display sent message after password reset -->
<form class="form-horizontal" id="reset">
<div class="control-group">
<label class="control-label" for="Email">Username</label>
<div class="controls">
<input class="input-large" type="email" id="Username" name="Username" placeholder="Email Address">
</div>
</div>
<div class="controls">
<button class="btn btn-inverse" id="close" value="CANCEL" data-dismiss="modal" aria-hidden="true">CLOSE</button>
<button class="btn btn-success" id="submit">SEND</button>
</div>
</form>
</div><!-- end of sent -->
</div>
</div><!-- end of Password Reset Modal -->
JavaScript (Validation & ajax)
$(document).ready(function () {
jQuery.validator.addMethod("accept", function (value, element, param) {
return value.match(new RegExp("." + param + "$")); });
$("#register").validate({
rules: {
FirstName: {
required: true,
accept: "[a-zA-Z]+"
},
LastName: {
required: true,
accept: "[a-zA-Z]+"
},
Pwd: {
required: true,
minlength: 8
},
CPwd: {
required: true,
minlength: 8,
equalTo: "#Pwd"
},
Email: {
required: true,
email: true
},
Agree: "required"
},
messages: {
FirstName: {
required: "First name required.",
accept: "Letters only please."
},
LastName: {
required: "Last name required.",
accept: "Letters only please."
},
Pwd: {
required: "Please create a password.",
minlength: "Password must be at least 8 characters."
},
CPwd: {
required: "Please confirm password.",
minlength: "Password must be at least 8 characters.",
equalTo: "Passwords do not match."
},
Email: "Email address is not valid.",
Agree: "Please accept our policy."
},
submitHandler: function() {
$.ajax({
type: "POST",
url: "../process.php",
data: $('form#register').serialize(),
success: function (msg) {
$("#thanks").html(msg)
},
error: function () {
alert("failure");
}
});
}
});
}); // end document.ready
Just an update to the previous answer for anyone now using the new Bootstrap, currently v3.1.1, that needs this answered!
$('#passwModal').on('hidden.bs.modal', function (e) {
$('#Username').val('');
});
To ensure that your form will be empty when you will reopen the modal, you can do this for every field on your form. It will delete the last value of your field on the hidden state of the modal when this one is closing :
$('#passwModal').on('hidden', function () {
$('#Username').val("");
});
I have a dropdownlist in my page this is the code:
<div id="test">
Role: <span data-bind="text: role"></span>
</br>
Roles:<select id="roles" data-bind="source: roles, value: role" data-text-field="roleName" data-value-field="roleId" ></select>
<ul id="view" data-template="Access-template" data-role="listview" data-bind="source:Accesses"></ul>
<script id="Access-template" type="text/x-kendo-template">
<li>
<input type="checkbox" data-bind="checked: selected" />
<label data-bind="text: AccessName" />
</li>
</script>
</div>
and I want that when I change the dropdownlist value it changes my role collection. This is my code:
var Accesses = [{
AccessName: 'Create',
selected: false
}, {
AccessName: 'Delete',
selected: false
}, {
AccessName: 'Update',
selected: true
}];
var Roles = [{
roleName: "Admin",
roleId: 1,
accessItem: Accesses
}, {
roleName: "User",
roleId: 2,
accessItem: Accesses
}];
var viewModel = kendo.observable({
roles: Roles,
accssesItem: Roles.accessItem
});
kendo.bind($("#test"), viewModel);
Figuring out what DropDown item is selected is a little... unintuitive, but here is what you want:
<script id="Access-template" type="text/x-kendo-template">
<li>
<input type="checkbox" data-bind="checked: selected" />
<label data-bind="text: AccessName" />
</li>
</script>
<select
data-role="dropdownlist"
data-bind="source: roles, events: { select: roleSelected }"
data-text-field="roleName"
data-value-field="roleId"></select>
<ul data-template="Access-template"
data-role="listview"
data-bind="source: accessItem"></ul>
...and...
$(document).ready(function () {
var roles = [{
roleName: "Admin",
roleId: 1,
accessItem: [{
AccessName: 'Create',
selected: true
}, {
AccessName: 'Delete',
selected: true
}, {
AccessName: 'Update',
selected: true
}]
}, {
roleName: "User",
roleId: 2,
accessItem: [{
AccessName: 'Create',
selected: false
}, {
AccessName: 'Delete',
selected: false
}, {
AccessName: 'Update',
selected: true
}]
}];
var viewModel = kendo.observable({
roles: roles,
accessItem: roles[0].accessItem,
roleSelected: function (e) {
this.set("accessItem", this.roles[e.item.index()].accessItem);
}
});
kendo.bind("body", viewModel);
});
Working jsFiddle here: http://jsfiddle.net/rally25rs/JHNm6/