json data
Here see my result
I am creating an admin panel dashboard in PHP, I want to display dynamic data in my dashboard and data must be display based on dropdown list, I got data in ajax success but how to that data display in html
<div class="col-lg-3">
<form method="POST" class="appointment-form" id="appointment-form" enctype="multipart/form-data">
<select onchange='fetch_val(this.value)' name="meeting" id="meeting">
<option>--Select Meeting--</option>
<?php
$sql="SELECT * FROM meeting";
$res=$conn->query($sql);
while ($re=$res->fetch_object())
{
?>
<option value="<?php echo $re->meeting_no; ?>"><?php echo $re->meeting_no; ?></option>
<?php
}
?>
</select>
</form>
<div class="bage">
<h6 class="name">Register User</h6>
<div class="d-flex align-items-center justify-content-around">
<p class="m-0 name-valu">HERE I WANT TO DISPLAY THAT DATA</p>
</div>
</div>
</div>
HERE MY SCRIPT:
<script type="text/javascript">
function fetch_val(val){
$.ajax({
url:"load.php",
type:"POST",
data:{"meeting":val},
dataType:"JSON",
success:function(data){
$('#reference_given').val((data[0].reference_given));
$('#reference_taken').val((data[0].reference_taken));
}
});
}
</script>
use ajax response to display it using $.each() and pass a div with id or class. in success function use this
$.each(data, function(i, item) {
$text+= '<div>'+ data[i].reference_given +'</div><br>';
});
if(text != ""){
$("#display").append(text);
}
Hope this help
Related
I am using CodeIgniter. I have a view button on the view page. If someone clicks on it then a custom popup will open and It will ask for feedback and approve. Also, I set input type hidden in this popup. After filling the form user will click on submit button.
But I am not getting the value in the controller but I am getting the hidden input value.
View
<?php echo form_open('Employee_control/admin_action_leave','id="admin_action_leave"'); ?>
View
<div class="view_popup_profile" id="popup-2" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
<div class="profile_header_right">
<input type="hidden" name="roster_id_send" id="roster_id_send" value="2">
<select name="admin_approved_status" id="admin_approved_status">
<option value="" disabled selected>Status</option>
<option value="1">Approved</option>
<option value="0">Pending</option>
<option value="-1">Reject</option>
</select>
<?php echo form_error('admin_approved_status'); ?>
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-6 text_area_box">
<div class="admin_feedback">
<h3>Feedback</h3>
<textarea class="form_control" name="admin_feedback" id="admin_feedback"></textarea>
<?php echo form_error('admin_feedback'); ?>
<button type="submit" class="btn">Submit</button>
</div>
</div>
</div>
</div>
<div class="profile_footer">
Close
</div>
</div>
</div>
<?php echo form_close(); ?>
Controller
public function admin_feedback_leave(){
echo $admin_approved_status=$this->input->post('admin_approved_status');
echo $admin_feedback=$this->input->post('admin_feedback');
echo $roster_id_send=$this->input->post('roster_id_send');
}
I tried using ajax instated of form
Same issue I am getting. It's display only hiddle value
$("#admin_action_leave").validate({
// Specify the validation rules
rules: {
admin_approved_status:{
required:true
},
admin_feedback:{
required:true,
minlength:15,
maxlength:250
}
},
submitHandler: function(form) {
//form.submit();
//var a= document.getElementById("admin_approved_status").value;
//alert(a);
var admin_approved_status = $('#admin_approved_status').val();
var admin_feedback = $('#admin_feedback').val();
var roster_id_send = $('#roster_id_send').val();
// alert(admin_feedback);
//alert(roster_id_send);
//alert(admin_approved_status);
$.ajax({
url: baseUrl + "/Employee_control/admin_feedback_leave",
method: "POST",
data: {
admin_approved_status: admin_approved_status,
admin_feedback:admin_feedback,
roster_id_send:roster_id_send
},
success: function(data)
{
alert(data);
}
}); //AJAX
}
});
After implementing the code. I am just sharing the small part of the code.
My issue is I am not able to send the data to the controller. I tried two-way one using ajax and second using form submit. I am sharing the form submit code.
When I am adding the below code then it's not sending the data to the controller. If I remove the if and foreach condition then I am getting the output.
<?php $n=1; if(isset($admin_data_leave)){foreach ($admin_data_leave as $row) {?>
<!--some html code here-->
<?php $n++;}}else{echo "No data found";}?>
Whole code
<?php echo form_open('Employee_control/admin_feedback_leave', 'id="admin_action_leave"'); ?>
<table cellspacing="0" class="applied_leave_list_table">
<tbody>
<?php
$n = 1;
if (isset($admin_data_leave)) {
foreach ($admin_data_leave as $row) {
?>
<tr>
<td><?php echo $n; ?></td>
<td> View </td>
</tr>
<div class="view_popup_profile" id="popup-<?= $row->roster_id; ?>" style="display: none;">
<div class="profile_content">
<div class="profile_header_right">
<input type="hidden" name="roster_id_send" id="roster_id_send" value="<?php echo $row->roster_id; ?>">
</div>
</div>
<h3>Admin Feedback</h3>
<textarea class="form_control" name="admin_feedback" id="admin_feedback"></textarea>
<?php echo form_error('admin_feedback'); ?>
<button type="submit" class="btn">Submit</button>
</div>
<?php
$n++;
}
} else {
echo "No data found";
}
?>
</tbody>
</table>
<?php echo form_close(); ?>
Jquery validation
$('#admin_action_leave').each( function(){
var form = $(this);
form.validate({
rules: {
admin_approved_status:{
required:true
},
admin_feedback:{
required:true,
minlength:15,
maxlength:250
}
}
});
});
When I am adding the below code then it's not sending the data to the
controller. If I remove the if and foreach condition then I am getting
the output.
...which means, the content of the variable $admin_data_leave is not fulfilling the condition, ie. Either it is not set(not defined) or its not a traversible object or its empty.
Try putting the following code before the condition and look at the output...
echo "<pre>";
var_dump($_POST);
echo "</pre>";
die();
Bellow shown code does these things
when i select Scholership Programs from select list the div element with class="mystaff_hide mystaff_opt1" will be shown
and then i select Family Income now div with class="mystaff_hide mystaff_opt2" will be shown. Now both are there on my window.
Up to this the code works fine
What i want is after submission of my form i want both of them are must be there on my window
<div class="row">
<div class="col-md-6 col-sm-6 pull-left">
<div class="form-group">
<legend>Options to Search</legend>
<select class="form-control firstdropdown" name="sel_options" id="mystuff">
<option>Select Options</option>
<option value="opt1">Scholership Programs</option>
<option value="opt2">Family Income</option>
</select>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt1">
<div class="form-group">
<label for="LS_name">Scholarship</label>
<select class="form-control" name="LS_name[]" id="LS_name" multiple="multiple">
<option value="opt1">Scholership1</option>
<option value="opt2">Scholership2</option>
</select>
</div>
</div>
<div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt2">
<div class="form-group">
<label for="Family Income">Family Income</label>
<select multiple class="form-control" name="FamilyIncome[]" id="FamilyIncome">
<option value="opt1">Family Income1</option>
<option value="opt2">Family Income2</option>
</select>
</div>
</div>
This is my script
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
<script>
$( document ).ready(function() {
$('.mystaff_hide').addClass('collapse');
$('#mystuff').change(function(){
var selector = '.mystaff_' + $(this).val();
$(selector).collapse('show');
});
});
</script>
After lot of search i got this code which is shows only recent related selected option's div
<?php if(isset($_POST['sel_options']) &&
!empty(isset($_POST['sel_options']))){
?>
<script>
var selected_option = "<?php echo $_POST['sel_options']; ?>";
var selector = '.mystaff_' + selected_option;
//show only element connected to selected option
$(selector).collapse('show');
</script>
<?php } ?>
Take a look at localStorage or sessionstorage to store information about the state of webpage and read them after reload to restore the UI state
Example:
Localstorage
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Sessionstorage
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Or you may want to use AJAX
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
As you are using jquery, you may want to look at using Ajax in jquery.
// this is the id of the form
$("#idForm").submit(function(e) {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
i have a three dropdowns like country,state,city it's using ajax reuest.
then i add new dropdowns div using my buttion , myfirst dropdown div's data passed and displayed and it's work fine, but others div's dropdown data not passed and not display and ajax request can't send .
it's my ajax request
<script>
function getstatedetails(id)
{
//alert('this id value :'+id);
$.ajax({
type: "POST",
url: 'ajax_get_finish/'+id,
data: id='cat_id',
success: function(data){
// alert(data);
$('#old_state').html(data);
},
});
}
function getcitydetails(id)
{
$.ajax({
type: "POST",
url: 'ajax_get_size/'+id,
data: id='st_id',
success: function(data){
$('#old_city').html(data);
},
});
}
it's my angular js code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('shanidkvApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
and its my html
<div class="content-wrapper" ng-app="shanidkvApp">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Add Challan Details
<i class="fa fa-list"></i> challan Details List
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="row"> <div class="col-md-12 display_alert"></div></div>
<div class="row">
<div class="col-md-6">
<div class="box box-primary" ng-app="angularjs-starter" ng-controller="MainCtrl">
<div class="box-body table-responsive">
<form action="insert" method="post" data-parsley-validate novalidate enctype="multipart/form-data">
<div data-ng-repeat="choice in choices">
<div class="form-group">
<label for="form-address">Model Name</label>
<select name="country_details" class="form-control countries" id="country_details" onChange="getstatedetails(this.value)">
<option value="" selected="selected" >Select Model</option>
<?php foreach($groups as $count): ?>
<option value="<?php echo $count->model_id; ?>"><?php echo $count->model_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="form-address">Finish Name</label>
<select name="select_state" class="form-control countries" id="old_state" onChange="getcitydetails(this.value)">
<option selected="selected">Select Finish</option>
</select>
</div>
<div class="form-group">
<label for="form-address">Size</label>
<select name="selectcity" class="form-control countries" id="old_city" >
<option selected="selected">Select Size</option>
</select>
</div>
<div class="btn btn-primary" ng-show="$last" ng-click="removeChoice()">Remove</div>
</div>
<div class="btn btn-primary" ng-click="addNewChoice()">Add fields</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- /.content -->
data in ajax should be in object form
function getstatedetails(id)
{
//alert('this id value :'+id);
$.ajax({
type: "POST",
url: 'ajax_get_finish/'+id,
data: id='cat_id',
success: function(data){
// alert(data);
$('#old_state').html(data);
},
});
}
pls try
$.ajax({
...
data: { id: 'cat_id' }
})
Stop using JQuery and AngularJS together.
If you want your data, use AngularJS too.
For instance,
app.factory('requestFactory', function($q, $http) {
var ret = {
getStateDetails: getStateDetails,
getCityDetails: getCityDetails
};
return ret;
function getStateDetails(id) {
//Use of promises
var deffered = $q.defer();
$http.post('ajax_get_finish/' + id, {id: 'cat_id'})
.then(function(success) {
deferred.resolve(success.data);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
function getCityDetails(id) {
//Use of promises
var deffered = $q.defer();
$http.post('ajax_get_size/' + id, {id: 'st_id'})
.then(function(success) {
deferred.resolve(success.data);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
});
Then, load your data in your controller, and use the two-way binding to display it.
i need to put quantity for my products on my database. My products are displayed inside a foreach loop including the textbox for quantity. but only the first textbox is working. Can you please help me? Thanks a lot!
<div class="col-md-9 cartbox">
<?php foreach($result as $row): ?>
<div class="col-md-12 smallbox">
<div class="col-md-3 item_in_box">
<div class="cart_img_div">
<img class="img-responsive prodimage" src="<?php echo $row['prod_image']; ?>">
</div>
</div>
<div class="col-md-3 item_in_box">
<div class="cart_prod_name" data-name="<?php echo $row['prod_name']; ?>">
<?php echo strtoupper($row['prod_name']); ?>
</div>
</div>
<div class="col-md-3 item_in_box">
Quantity: <input type="text" class="cart_txtquantity"/><br>
<input type="button" class="btn btn-warning updateqty" value="Update"/>
</div>
<div class="col-md-3 item_in_box">
<div class="cart_prod_price">
<input type="hidden" class="hidden_price" value="<?php echo $row['price']; ?>"
<b> PHP:</b> <?php echo $row['total_amount']; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<script>
$(document).ready(function () {
$(".updateqty").click(function () {
$.ajax ({
url: "../controller/order/updatequantity.php",
method: "POST",
data: {
prod_name: $(".cart_prod_name").attr('data-name'),
quantity: $(".cart_txtquantity").val(),
price: $(".hidden_price").val()
},
success: function(result) {
alert(result);
},
error: {
function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
}
});
});
});
</script>
When you are selecting the values for the ajax, you are searching the entire document for the classes cart_prod_name, cart_txt_quantity, and hidden_price. If you look look at the ajax result carefully, you will see that it is always the data from the first <div class=smallbox"> in the request. This is because when you call .val() on a jQuery selection of more then one object, it returns the value of the first selected object (the value from the first row).
So, to fix this, you need a context (subset of nodes in the DOM) for the query to search for the specific classes.
For example
$(document).ready(function(){
$(".updateqty").click(function () {
var context = $(this).parents('.smallbox');
$.ajax ({
...
data: {
prod_name: $(".cart_prod_name", context).attr('data-name'),
quantity: $(".cart_txtquantity", context).val(),
price: $(".hidden_price", context).val()
},
...
});
});
});
I have a form that includes a dropdown box. This dropdown's options are filled dynamically, using PHP, from my database. When my form is submitted, the row containing the ticketId selected in the dropdown is removed from the database. What I would like is for, after the AJAX call is successful, have this list repopulate without the row that was just removed.
my form:
<form name="transferTicketForm" id="transferTicketForm">
<div class='form-group'>
<label for="ticket_number">Choose ticket:</label>
<select name="ticket_number" id="ticket_number" class="form-control">
<?php foreach ($assigned_tickets as $ticket): ?>
<option value="<?php echo($ticket->ticketId); ?>"><?php echo ($ticket->ticketId . " - " . $ticket->headline); ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="assignTo">Transfer to:</label>
<select name="assignTo" id="assignedTo" class="form-control">
<?php foreach($employees as $employee): ?>
<option value='<?php echo($employee->userId); ?>'><?php echo ($employee->firstName . " " . $employee->lastName);?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="transferComment">Comment:</label>
<textarea name="transferComment" id="transferComment" class="form-control"></textarea>
</div>
<div class="text-center">
<input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket">
</div>
</form>
my Ajax call:
$('#doTransferTicketButton').click(function(){
$.ajax({
type:'POST',
url:'<?php echo site_url();?>ticket_system/transfer_and_comment_ticket',
data:{
'assigned': $('#assignedTo').val(),
'comment': $('#transferComment').val(),
'ticketId': $('#ticket_number').val()
},
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#assigned').empty();
$('#transferTicketOptions').slideToggle();
}
});
});
Things I have tried:
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number').empty();
$('#transferTicketOptions').slideToggle();
}
and
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number')[0].reset();
$('#transferTicketOptions').slideToggle();
}
Neither of which work for what I'm trying to do.
Any help would be greatly appreciated. Thank you!
First make your AJAX-file echo the ticket ID when removed. This ID will be passed to the success function. And on successs run:
success: function(data){
$("#ticket_number option[value=data]").remove();
}
The code is not testet, but i think it would work.