If condition not working inside ajax while appending table rows - php

I want to display pdf icon only when the field (WO_doc) is not empty. I don't know what I am doing wrong while writing the if statement. Please help.
<script type="text/javascript">
$( "select[name='PEF_id']").change(function () {
var Pefid = $(this).val();
if(Pefid) {
$.ajax({
url: "<?php echo site_url('Admin/showwo');?>",
dataType: 'Json',
data: {'PEF_id': Pefid},
success: function(response){
$(".displayNone").removeClass("displayNone").addClass("displayHidden");
$.each(response.wo,function(key, value) {
$('.wodata').append('<tr>\
<td>'+value['WO_no']+'</td>\
<td>'+value['WO_date']+'</td>\
<td>'+value['Agency_name']+'</td>\
<td>'+value['WO_amount']+'</td>\
<?php if("?>'+value['WO_doc']+'<?php" != null) { ?>\ ***this if condition is not working***
<td></i></td> <?php } else { ?> <td></td> <?php } ?>\
<td><button type="submit" name="submit" class="btn btn-success">Update</button></td>\
<td><button type="submit" name="submit" value="'+value['WO_no']+'" class="button-del btn btn-danger">Close this WO</button></td>\
</tr>');
});
}
});
}
});
</script>

Related

form submission with delay

i am trying to submit form after 10 seconds with form value. I am not able to include setTimeout with submit function.
setTimeout(function() {
$('#FrmID').submit();
}, 10000);
$(document).ready(function() {
$("#submit").click(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
<input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
<button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>
You can create a function for submit, then call it after click on success:
$(document).ready(function() {
function submitForm() {
setTimeout(function() {
$('#FrmID').submit();
}, 10000);
}
$("#submit").click(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
submitForm();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
<input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
<button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>
In Action:
$(document).ready(function() {
function submitForm() {
i = 1;
setInterval(function() {
console.log(i++);
}, 1000);
setTimeout(function() {
$('#FrmID').submit();
alert("Student Successfully Added");
}, 10000);
}
$("#submit").click(function(e) {
e.preventDefault();
submitForm();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
<input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
<button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>
And if you want to submit form automatically without press any key to submit you can try this. You should move your code inside the setTimeout function:
$(document).ready(function() {
setTimeout(function() {
$('#FrmID').submit(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
}
});
});
}, 10000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
<input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
<button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>
Or you can try delay()
$(document).ready(function() {
$('#FrmID').delay(10000).submit(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
}
});
});
});
The problem with your code is that you've not bound the submit handler to the form. Instead, you're binding it to the click event of the submit button.
You need to bind the handler code to the submit event of the form instead:
setTimeout(function() {
$('#FrmID').submit();
}, 10000);
$(document).ready(function() {
$("#FrmID").submit(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
<input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
<button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>
You can use following code.
$(document).ready(function() {
$("#submit").click(function() {
setTimeout(function() {
var grp_id = $("#grp_id").val();
var datastr = 'grp_id=' + grp_id;
$.ajax({
type: 'POST',
url: 'start_calculate.php',
data: datastr,
success: function() {
//$("#msg").html("Student Successfully Added");
//$("#msg").html("response");
}
});
}, 10000);
});
});
On click of submit just execute your code after delay.

post input name array of while loop

there is array in while loop please check with code below
<?php
$addItemSql = "SELECT * from tbl_invoice_services where col_cust_id='$getID' ORDER BY col_service_id";
$addItemResult = mysqli_query($db, $addItemSql);
while ($addItemRow = mysqli_fetch_assoc($addItemResult)) {
?>
<tr>
<td>
<input type="hidden" id="col_service_product1" name="col_service_product1[]" value="<?php echo $addItemRow['col_service_product']; ?>">
</td>
</tr>
<?php} ?>
and want to post those array value to php
ajax code
$('.saveInvoice').on('click', function (ev) {
$.ajax({
url: "saveInvoce.php",
type: "POST",
data: {
col_service_product1:$('#col_service_product1').val()
},
success: function (data) { }
});
});
try this demo code
file1
<?php
$i=0;
while ($i<5) {
?>
<tr>
<td>
<input type="hidden" id="col_service_product1" name="col_service_product1" value="<?php echo $i; ?>">
</td>
</tr>
<?php $i++; } ?>
<button value="Save Invoice" class="saveInvoice">Save Invoice</button>
<script type="text/javascript" src="../library/q.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.saveInvoice').click(function () {
var arr=[];
var data=document.getElementsByName("col_service_product1");
for(var i=0;i<data.length;i++){
arr[i]=data[i].value;
}
$.ajax({
url: "saveInvoce.php",
type: "post",
data: {col_service_product1:arr},
success: function (data) {
alert(data);
}
});
});
});
</script>
file2
<?php
$data=$_POST['col_service_product1'];
//code for save data in table
foreach($data as $value){
echo $value; //query here
}

How to post data (form) without page refresh PHP, jQuery, Ajax

Please help me how to submit form (comments) without page refresh for
HTML markup:
<form id="commentf" method="post">
<img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
<textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
<button type="submit" id="comq"name="compost" class="butn2">post comment</button>
</form>
PHP code (pnf.php):
if(isset($_POST["compost"]))
{
$comment=$_POST['comments'];
{
$reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND qid= '".$qid."' ");
$row_lat_lng= mysqli_fetch_array($reslt_user);
$stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
qid= '".$qid."' ");
}
if($stmt)
{
echo "hello world";
}
}
jQuery and Ajax:
$(document).ready(function()
{
$("#comq").click(function() {
var comment=$("#comment").val();
$.ajax({
type: "POST",
url:"pnf.php",
data: {
"done":1,
"comments":comment
},
success: function(data){
}
})
});
});
I have tried many times and don't know what mistake I made, Ajax and jQuery are not working, please anyone help - thanks in advance
You have made couple of mistakes.
First:: You should put button type="button" in your HTML form code
Second:: You have made a syntax error. $("#comment").vol(); should be replaced with $("#comment").val(); in your jQuery AJAX
As you mentioned that you have to send request without refreshing page I modified your JS-code with preventing default submitting form:
$(document).ready(function () {
$("#commentf").submit(function (e) {
e.preventDefault();
var comment = $("#comment").val();
$.ajax({
type: "POST",
url: "pnf.php",
data: {
"done": 1,
"comments": comment
},
success: function (data) {
}
})
});
});
Javascript
$('form').on('submit', function(event){
event.preventDefault();
event.stopPropagination();
var dataSet = {
comment: $('#comment').val();
}
$.ajax({
url: "link.to.your.api/action=compost",
data: dataSet,
method: 'post',
success: function(data){
console.log('request in success');
console.log(data);
},
error: function(jqXHR) {
console.error('request in error');
console.log(jqXHR.responseText');
}
});
});
PHP
$action = filter_input(INPUT_GET, 'action');
swicht($action){
case 'compost':
$comment = filter_input(INPUT_POST, 'comment');
{
$reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND qid= '".$qid."' ");
$row_lat_lng= mysqli_fetch_array($reslt_user);
$stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
qid= '".$qid."' ");
}
if(!$stmt)
{
http_response_code(400);
echo 'internal error';
}
echo 'your data will be saved';
break;
default:
http_response_code(404);
echo 'unknown action';
}
you have to prevent the submit on the form (look in javascript).
after that you send the request to the server and wait for success or error.
in php try to do it with a switch case. and try to not touch super globals directly, use filter_input function.
hope this helps
Modified JQuery Code...
$( document ).ready(function() {
console.log( "ready!" );
$("#comq").click(function() {
var comment=$("#comment").val();
console.log('comment : '+comment);
$.ajax({
type: "POST",
url:"pnf.php",
data: {
"done":1,
"comments":comment
},
success: function(data){
}
})
});
});
HTML Code
<form id="commentf" method="post">
<textarea class="textinput" id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
<input type="button" id="comq" name="compost" class="butn2" value="Post Comment">
</form> </div>
<form id="commentf" method="post">
<img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
<textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
<button type="button" id="comq"name="compost" class="butn2">post comment</button>
</form>
script
$(document).ready(function()
{
$("#comq").click(function() {
var comment=$("#comment").val();
$.ajax({
type: "POST",
url:"pnf.php",
data: {
"done":1,
"comments":comment
},
success: function(data){
}
})
});
});
PHP code (pnf.php):
comment=$_POST['comments'];
$reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND qid= '".$qid."' ");
$row_lat_lng= mysqli_fetch_array($reslt_user);
$stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
qid= '".$qid."' ");
if($stmt)
{
echo "hello world";
}
if you are using jquery make sure to include jquery libraries before your script file.
latest jquery cdn minified version
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
example
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="yourjsfile.js" type="text/javascript"></script>

not able to pass data to controller using Ajax with jquery ,CodeIgniter (PHP framework)

passing data to controller using AJAX
this is script i have written to pass data to controller but data is not passed to the controller
this is the input data i want to pass
<div class="form-group">
<table class="table table-striped b-t b-light text-sm">
<thead>
<tr>
<th>ID</th>
<th>Question</th>
<th>answer</th>
</tr>
</thead>
<tbody>
<?php foreach ($quet as $row) { ?>
<tr>
<td ><?php echo $row['id']; ?></td>
<td>
<?php echo $row['question']; ?>
</td>
<td><input type='text' name='name' required="required" class="form-control" placeholder='Enter Your Answer'></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" id ="next" type="button" >Next</button>
and the script
<script>
$(document).ready(function($){
$("#next").click(function(){
var array = $("name").val()
$.ajax({
type: "POST",
datatype:"json",
url: BASE_URL+"/student/add",
data: 'data='+array,
contentType:'application/json',
processData: false,
error: function(response) {console.log('ERROR '+Object.keys(response)); },
success: function(response) {
console.log(response)
}});
return false;
});
});
</script>
and the student controller
function add(){
if($this->student_model->add($this->input->post()))
{
$response['success'] = TRUE;
}
else
{
$response['success'] = FALSE;
}
echo json_encode($response);
}
Try this. Your data may be in wrong format
data: {'data':array}
EDIT
<input type='text' name='answer' id='answer' required="required" class="form-control" placeholder='Enter Your Answer' />
<script>
$(document).ready(function($){
$("#next").click(function(){
var array = $("#answer").val() // see the change name to id, see the html also
$.ajax({
type: "POST",
url: BASE_URL+"/student/add",
data:{'data':array},
error: function(response) {console.log('ERROR '+Object.keys(response)); },
success: function(response) {
console.log(response)
}});
});
});
</script>
Also check the array is received properly in you JS
<script>
$(document).ready(function($){
$("#next").click(function(){
var array = $("#id").val()
$.ajax({
type: "POST",
datatype:"json",
url: BASE_URL+"/student/add",
data: {
'data':array
},
contentType:'application/json',
processData: false,
error: function(response) {console.log('ERROR '+Object.keys(response)); },
success: function(response) {
console.log(response)
}});
return false;
});
});
</script>
In your controller you should change $this->input->post() to$this->input->post('data')
From your mentioned code, you need to check these points :
1) As you are using contentType:'application/json', so use the data format as data: {'data':array}
2) Finally check whether the url url: BASE_URL+"/student/add", is accessible or not.
Hope this helps :)
You need to change following in your code.
In the Script
<script>
$(document).ready(function($){
$("#next").click(function(){
var array = $("input[name]").val();
$.ajax({
type: "POST",
url: BASE_URL+"/student/add",
data: {'data':array},
error: function(response) {console.log('ERROR '+Object.keys(response)); },
success: function(response) {
console.log(response)
},
datatype:"json"
});
return false;
});
});
</script>
In the Student Controller
function add(){
if($this->student_model->add($this->input->post('data')))
{
$response['success'] = TRUE;
}
else
{
$response['success'] = FALSE;
}
echo json_encode($response);
}
I hope this help.

Ajax is getting called only for first button

<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button id="enable" value="1" class="btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button id="disable" value="0" class="btn" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$("#enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$("#disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});
I am passing button id in jquery, but ajax is getting called only for first button. For second and others it is not getting called, can anyone help me out in this?
Thanks
You have an id of enable and disable in a foreach. If the loop ever executes more than once you will then have multiple buttons with the same id. IDs have to be unique! Rather use something else to identify the click:
I suggest adding an enable class to the enable button and a disable class to the disable button, then catch the events like this:
$('.enable').click(function() {
// code in here
});
$('.disable').click(function() {
// code in here
});
Don't bind the click event(s) for multiple items by id! Ids have to be unique idetifiers.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="enable btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});
You are using id what is not correct when several elements in your case buttons have the same id.When you use foreach loop you create multiple buttons with the same particular id. ID means that something is unique, and only one element can have that specyfic id. I assume you should make a class for this buttons and change your script code with having this in mind. Here what I suggest. Hope it helps.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="btn btn-success active enable" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?php endforeach; ?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});

Categories