There are 2 drop down list:
Project
Plot Details
My Question is: Once Project is selected then Plot Details Get Populated properly but, when Plot Details of Dropdown is get select then Chrome hangs up.
To continue, I have to refresh the page. I want the Plot Details(drop down) value to call another ajax call.
javascript
$(document).ready(function() {
$('.get_member_name').live('change', function() {
alert('hello')
var project = $('#project').val();
var plot_details = $('#plot_details').val();
var base_url = $('#base_url').val();
if (project && plot_details) {
$.ajax({
type: "POST",
url: base_url + "admin/get_member_name",
data: {'category': category},
dataType: "html",
success: function(result) {
alert(result)
}
})
}
});
})
HTML
<div class="form-group">
<label class="col-md-3 control-label" for="inputSuccess">
Plot Details :
</label>
<div class="col-sm-9">
<select class="form-control get_member_name" name="plot_details" required="required" id="plot_details">
<option value="" id="opp12">Select Plot</option>
</select>
</div>
</div>
PHP
public function get_plot_details() {
if ($this->session->userdata('role_id') == 1) {
$data['record'] = $this->db->get_where('plot_details', array('project_id' => $this->input->post('project')))->result();
print_r($this->load->view('admin/ajax_data', $data, TRUE));
} else {
redirect('home/login');
}
}
View Page
if (isset($record) && $record != NULL && $record != "") {
foreach ($record as $m) {
echo '<option value="' . $m->id . '"> ' . $m->plot_number . ' Area ' . $m->total_area . '</option>';
}
}
I could see you have used 'project' in your php to fetch the records from DB. But in your ajax you are passing the request data 'category'. Might be this one is causing issue. So instead of
$.ajax({
type: "POST",
url: base_url + "admin/get_member_name",
data: {'category': category},
dataType: "html",
success: function(result) {
alert(result)
}
})
use
$.ajax({
type: "POST",
url: base_url + "admin/get_member_name",
data: {'project': project},
dataType: "html",
success: function(result) {
alert(result)
}
})
Related
When I click the submit on button, the appended elements are not submitted. I already tried to change append() to appendTo() and html(). Please help.
$('select[name="bidang"]').on('change', function(e) {
e.preventDefault();
var id_bidang = $(this).val();
// AJAX request
$.ajax({
url: '<?php echo base_url()?>form_jurnal/getSubBidang',
method: 'GET',
data: {
id_bidang: id_bidang
},
dataType: "json",
success: function(response) {
$('select[id="sub_bidang"]').empty();
$.each(response, function(key, value) {
$('select[id="sub_bidang"]')
.append('<option value="' + value.id_subbidang + '
selected ">'+ value.nama_subbidang +'</option>');
});
}
});
});
<label>Sub Bidang :</label>
<select id="sub_bidang" name="sub_bidang">
<option>--Pilih Sub Bidang--</option>
</select>
I am trying to display users list in input field with jquery auto-complete function. I facing issue in displaying name and selection update value to field.
My PHP Code:
include '../_db.php';
// get what user typed in autocomplete input
$name = trim($_GET['name']);
$param = "%{$name}%";
$query = $conn->prepare('SELECT emp_number, emp_firstname, emp_lastname FROM `hs_hr_employee` WHERE emp_firstname LIKE ? OR emp_lastname LIKE ? ');
$query->bind_param('ss', $param,$param);
$query->execute();
$query->bind_result($emp_number,$emp_firstname,$emp_lastname);
$a_json = array();
$a_json_row = array();
while( $query->fetch() )
{
$a_json_row["emp_number"] = $emp_number;
$a_json_row["fname"] = $emp_firstname;
$a_json_row["lname"] = $emp_lastname;
array_push($a_json, $a_json_row);
}
$json = json_encode($a_json);
print $json;
$query->close();
My JS Code
$(function()
{
$( "#search-emp" ).autocomplete(
{
source: function (request, response)
{
var form_data = {
ajax : '1',
name : $("#search-emp").val(),
actioncall : 'search-emp'
};
$.ajax({
type: "POST",
url: "_ajax.php",
data: form_data,
success: function(response)
{
$.each( response, function( key, value )
{
//alert( key + ": " + value );
console.log('element at index ' + key + ' is ' + JSON.parse(value));
});
//console.log(response);
},
dataType: 'json'
});
}
}, {minLength: 3 });
});
Getting Response
[{"emp_number":1,"fname":"Arslan","lname":"Hassan"},{"emp_number":2,"fname":"Muneeb","lname":"Janjua"
},{"emp_number":3,"fname":"hr","lname":"user"}]
My HTML code
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Employee Name: </label>
<input id="search-emp" type="text" class="form-control" placeholder="*">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Date Range: </label>
<input type="text" class="form-control" id="dp-from" placeholder="From">
<input type="text" class="form-control" id="dp-to" placeholder="To">
</div>
<button type="submit" class="btn btn-primary">Genrate Report</button>
</form>
The problem it's because jQuery auto-complete wants to have 2 fields named label and value. The content from label will be displayed in the auto-complete.
Because your server return other name for the keys you have 2 options:
Change the server to return a json like:
[{"emp_number":1,"fname":"Arslan","lname":"Hassan", "label":"Arslan Hassan", "value": "Arslan Hassan"},....]
Or on the success callback from ajax create an array with this fields (label and value) and pass this array to response() callback.
You can find more informations here: http://api.jqueryui.com/autocomplete/#option-source
In your AJAX request,
$.ajax({
type: "POST",
url: "_ajax.php",
data: form_data,
success: function(response)
{
$.each( response, function( key, value )
{
//alert( key + ": " + value );
console.log('element at index ' + key + ' is ' + JSON.parse(value));
});
//console.log(response);
},
dataType: 'json'
});
specify the contentType to get the correct response.
contentType: "application/json",
I have done the code like this in view page and controller done in codeigniter
While pressing enter key multiple times data saving to the table. Can anybody help to solve this problem
View Page
<form>
<div class="cmt-box">
<textarea class="form-control" name="txtArea" id="txtArea<?php echo $row->id;?>" onkeypress="onTestChange(1)" rows="1"></textarea>
</div></form>
script
function onTestChange(id) {
$("#txtArea"+id).keypress(function(e) {
if(e.which == 13) {
dataString=document.getElementById("txtArea"+id).value;
$.ajax({
type: "POST",
url: "<?php echo site_url('show/insertcomment'); ?>",
data: { comment :dataString, id:id},
success: function(data){
location.reload();
}
});
}
});
}
$(".class_txtarea").keypress(function(e) {
if(e.which == 13) {
dataString=document.getElementById(this).value;
$.ajax({
type: "POST",
url: "<?php echo site_url('show/insertcomment'); ?>",
data: { comment :dataString, id:id},
success: function(data){
location.reload();
}
});
}
});
HTML:
<div class="cmt-box">
<textarea class="form-control mytext" name="txtArea" id="txtArea<?php echo $row->id;?>" rows="1"></textarea>
</div>
Jquery:
$(document).ready(function(){
$('.mytext').keyup(function (evt) {
evt = evt || window.event;
if (evt.keyCode == 13) { /* pressed enter key */
$.ajax({
type: "POST",
url: "<?php echo site_url('show/insertcomment'); ?>",
data: { comment :dataString, id:id},
success: function(data){
location.reload();
}
});
}
});
});
i want to populate two fields when some one fill up card no.
<input type="text" id="name" name="name" class="form-control" Value="<?php echo $grow['name']; ?>">
<input type="text" id="address" name="address" class="form-control" Value="<?php echo $grow['address']; ?>">
but this code populate field one by one. can any one suggest be better code for populating two fields from database. Thank you
jquery
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k=$(this).val();
var q="name";
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q='+q,
cache: false,
success: function(data)
{
if(data){
$("#name").val(data);
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
$("#address").val(data);
}
}
});
}else
$("#name").val("");
$("#address").val("");
}
});
});
});
</script>
getresult.php
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select * from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
echo $row[$q];
?>
Try to extract both name and address from database and json them
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select address,name from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
$result = array(
'name'=>$row['name'],
'address'=>$row['address']);
echo json_encode($result);
After that parse them via jquery
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
var parsedData = jQuery.parseJSON(data);
$("#name").val(parsedData.name);
$("#address").val(parsedData.address);
}
}
});
Javascript Code:
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k = $(this).val();
var q = "name";
$.ajax({
type: 'POST',
url: "getresult.php",
data: 'k='+k,
cache: false,
success: function(data)
{
var jsonArr = $.parseJSON(data);
if(typeof response =='object')
{
$("#name").val(jsonArr.name);
$("#address").val(jsonArr.address);
}
else
{
$("#name").val("");
$("#address").val("");
}
}
});
});
});
</script>
PHP Code:
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k = $_POST['k'];
$sql = mysql_query("select * from inward where krishi='$k'");
$row = mysql_fetch_assoc($sql);
echo json_encode(array('name' => $row['name'], 'address' => $row['address']);
?>
I am successfully able to save the input value using ajax post but it is not loading the next page.
Client Side code:
<script type="text/javascript">
function notifyEmail() {
var form_data = {
'email':$('#inviteEmail').val()
};
alert($('#inviteEmail').val());
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});
}
</script>
<input type='text' id='inviteEmail' placeholder='Enter email'/>
<a href='#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a>
Controller Code:
function email_invites()
{
$this->load->model('emailInvites');
if($query = $this->emailInvites->saveEmailInvite())
{
$this->load->view('emailInvites');
}
}
What I do is the following which could help you
<script type="text/javascript">
function notifyEmail() {
var form_data = {
'email':$('#inviteEmail').val()
};
alert($('#inviteEmail').val());
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
dataType:'json',
success: function(msg) {
if(msg.response)
//load the content in the body or wherever you want
jQuery('body').load("<?php echo site_url('main/email_invites/show'); ?>");
else
console.log("Opps, Something wrong happend");
return true;
}
});
}
</script>
<input type='text' id='inviteEmail' placeholder='Enter email'/>
<a href='#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a>
In the controller
function email_invites($action = 'process')
{
if($action == 'process')
{
$this->load->model('emailInvites');
$query['response'] = $this->emailInvites->saveEmailInvite();
echo json_encode($query);
}
else
{
$this->load->view('emailInvites');
}
}
You do not need to echo the url, just use it in ajax call like this,
$.ajax({
url: 'main/email_invites',
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});
If site_url method returns the required url, then the ajax call needs to be,
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});