I use ajax to retrieve data.
How can I fill that return data to my jsp form.
This is ajax code.
$('#ppmerchant').click(function(){
var mNo = $('#inpMerchantNo').val();
$.ajax({
'url' : 'updatePPMerchant',
'type' : 'GET',
'data' : {
'merchantNo' : mNo
},
'success' : function(data) {
if (data != null) {
var info = $(data).find("tab_1_1_2");
$("tab_1_1_2").html(info.html());
}
}
});
});
It's show me form design.But not show the value.
Thanks in advance
If you have a form you can directly set the value using javascript
see the below example
<form>
First name:<br>
<input type="text" id="name" name="firstname">
</form>
<script>
document.getElementsById("name").value = myValue;
</script>
My value is the data you wish to set.
--remove ' '(single quote) in ajax options type--and try rerun !!!
$.ajax({
url : 'updatePPMerchant',
type : 'GET',
data : {
merchantNo : mNo
},
success : function(data) {
if (data != null) {
var info = $(data).find("tab_1_1_2");
$("tab_1_1_2").html(info.html());
}
}
});
Related
I am developing application in laravel 9.I have dependent dropdown in my application .
I have used ajax for dependent dropdown. It is working .But When I submit the form it is not showing selected option .It is showing "please select line"
I have used old() .But it is not working.
Here is my code
$("#downtimedatepicker").change(function(){
var downtimedate = $(this).val();
if(downtimedate)
{
$.ajax({
url:"{{ url('downtimeline') }}",
type : "POST",
data: {
downtimedate: downtimedate
},
dataType : "json",
success:function(data)
{
if(data){
$('select[name="line"]').empty();
$.each(data,function(key,value) {
$('select[name="line"]').append('<option value="'+ value +'" {{ old('line') == "'value'" ? 'selected' : '' }}>'+value+'</option>');
});
} else{
$("#line").empty();
}
}
});
}
});
Mycontrollercode
public function getdowntimeline(Request $request){
$downtimedate=$request->downtimedate;
$downtimelines=Downtime::where('date', $downtimedate)->distinct()->pluck('line', 'id')->unique();
return json_encode($downtimelines);
}
It should show selected option when I submit the form
validate Activity function with Ajax code
$(document).on('keyup','#activity_name',function () {
var error_activity = '';
var activity = $('#activity_name').val();
var _token = $('input[name="_token"]').val();
$.ajax({
type : 'post',
url : '{{ url('checkactivity') }}',
data :{activity:activity, _token:_token},
success:function (result) {
if(result == 'unique'){
$('#activity_status').html('<lable class="text-sucess" style="color: blue"></lable>');
$('#activity').removeClass('has-error');
$('#activity_btn').attr('disabled',false);
}
else
{
$('#activity_status').html('<lable class="text-danger">Try Another!</lable>');
$('#activity').addClass('has-error');
$('#activity_btn').attr('disabled','disabled');
}
}
});
});
My input field and here he is always call an event Onkeyup when ever i enters a single word in my input field and on each word he is sending a post request.
<div class="form-group">
<label for="checkbox">Group</label>
<select class="form-control form-control-sm" id="activitygroup" name="activitydeleverable">
<option>Select</option>
#foreach(App\Groups::all() as $group_name)
<option value="{{ $group_name->id }}">{{ $group_name->name }}</option>
#endforeach
</select>
</div>
<button type="submit" id="activity_btn" onclick="insertactivity()" class="btn btn-info">Insert</button>
here is my Controller Function
function checkactivity(Request $request){
$data = Activities::whereName($request->activity)->first();
if (!is_null($data)){
echo 'not_unique';
}
else
{
echo 'unique';
}
}
My code is work perfect, but i have a problem. On each single word my onkeyup Event Ajax send a post request to db and check data is available in db or not. but i have to stop this to doing again and again Post request. it's may do slow my system so i have to solve this please solve this logical issue i have to stop this Post requests or need only one post request.
You can see no of request in image
You will find all the information regarding your desired solution in this solved question:
How to delay the .keyup() handler until the user stops typing?
proper way of doing ajax request is use make it single at a time.
var req = null;
$(document).on('keyup','#activity_name',function () {
var error_activity = '';
var activity = $('#activity_name').val();
var _token = $('input[name="_token"]').val();
if (req != null) req.abort();
req = $.ajax({
type : 'post',
url : '{{ url('checkactivity') }}',
data :{activity:activity, _token:_token},
success:function (result) {
if(result == 'unique'){
$('#activity_status').html('<lable class="text-sucess" style="color: blue"></lable>');
$('#activity').removeClass('has-error');
$('#activity_btn').attr('disabled',false);
}
else
{
$('#activity_status').html('<lable class="text-danger">Try Another!</lable>');
$('#activity').addClass('has-error');
$('#activity_btn').attr('disabled','disabled');
}
}
});
});
try to make it delay method.
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
$('#input').keyup(delay(function (e) {
console.log('Time elapsed!', this.value);
}, 500));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>
I need to post values from a table cell to a servet through Ajax but the response is returning a null. My Javascript is not that strong and I am certainly doing something wrong and need some direction. Below are my JSP and Ajax script:
**My JSP code**
<td><button type="button" class="btn btn-default btn-md" class="itemData" tableData="${item}" onclick="saveData()"><span class="glyphicon glyphicon-save"></span></button> </td>
**My Ajax code**
function saveData(){
$(document).ready(function(){
var dataID = $(this).attr('tableData');
$.ajax({
url : 'DataCtrlServlet',
type: 'Post',
data : dataID,
success : function(responseText) {
$('#submissionSuccessContainer').text(responseText);
}
});
return false;
});
}
Romve return false; and $(document).ready ,also you need to change the data format to pass the parameter correctly
function saveData(){
var dataID = $(this).attr('tableData');
$.ajax({
url : 'DataCtrlServlet',
type: 'Post',
data : {
dataID:dataID
},
success : function(responseText) {
$('#submissionSuccessContainer').text(responseText);
}
});
}
I am showing the checkbox value checked or unchecked based on the db value.but when user try to change it like unchecked it and update the value. i call the ajax i getting this error.
Thanx for help
Code
<div class="{{count($employees) !=0 ? 'sidebar-hide': 'sidebar-customize'}}">
<a>
{{ Form::checkbox('Employee','1',$user->employee) }}
<i class="fa fa-id-card"></i>
<span>Employee</span>
</a>
</div>
Below is the Ajax Function
$(document).ready(function(){
$('#customize').click(function(e){
e.preventDefault();
var customers=document.getElementById('customers').checked ? '1' :'0' ;
var accounts=document.getElementById('accounts').checked ? '1' :'0';
var Inventory=document.getElementById('InventoryItems').checked ? '1' :'0';
var Employee=document.getElementsByName('Employee').checked ? '1' :'0';
console.log(Employee);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url :"{{ url('user')}}",
type :'POST',
data :{
customer : customers,
accounts : accounts,
inventory: Inventory,
employee : Employee
},
dataType: 'JSON'
// ,
// success: function( data ) {
// $("#ajaxResponse").append(data.msg);
// console.log(data);
//}
});
});
});
Is the HTML created dynamically?
If so, then you need to bind the event to a parent element and use the jQuery.on() method instead of click()
$('#parentelement').on('click', 'div.sidebar-customize', function(e) {
//code
});
The second parameter of the method needs to target the element you're trying to use. From you HTML, I can't tell what that will end up being. Maybe implement an additional class or ID so the HTML can be targeted better.
its like i have to include the Id from the checkbox
{{ Form::checkbox('Employee', 'Employee', $user->employee, ['id' => 'employee']) }}
Ajax Code :
$(document).ready(function(){
$('#customize').click(function(e){
e.preventDefault();
var employee=document.getElementById('employee').checked ? '1' :'0' ;
console.log(employee);
});
});
Works prefectly fine as aspected
I use the code below to submit my form without reloading the page, but when data.a="a", or "b", etc. in the success part of AJAX, I still would like to submit the form as conventionally done by php without jQuery.
So in this case, the aim is to transmit the AJAX data ("data:myForm.serialize()+"&id_town="+id_town,") to the url specified in the "action" html attribute of the form.
Do you have any idea ?
Html code:
<form id="inscription_form_home" action="index.php?module=membres&action=inscription" method="post" >
...
</form>
jQuery code:
$("#inscription_form_home").submit(function() {
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
// Transmit the data part to the form url
}else{
alert("Inscription OK.");
}
}
});
return false;
});
As allready been said, you can do another ajax call inside the
Edition after comments, :
Try this...
<form id="inscription_form_home" action="index.php?module=membres&action=inscription"
method="post" >
...
<button id="mButton">Submot<button>
</form>
$(document).ready(function() {$("#mButton").bind('click', mysubmit($));});
function mysubmit()
{
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
//do your new call here, or you can also submit the form
}else{
alert("Inscription OK.");
}
}
});
return false;
}
You can make like this :
$(location).attr('href',YOUR URL);