I changed my web hosting server recently. After that, I realized that some parts of my jQuery code are not working. Dropdown menu not change. I checked that the old server code still now working perfectly but not on my live server.
My old server link:http://pixcelcoder.in/care-foundation/auth-admin-panel/admin-dashboard/care-class-main-chapter-list.php
New sever link:https://careonlineschool.org/care-foundation/auth-admin-panel/admin-dashboard/care-class-main-chapter-list
<?php include('header.php')?>
<!-- Main Content -->
<div class="hk-pg-wrapper">
<!-- Container -->
<div class="container mt-xl-50 mt-sm-30 mt-15">
<!-- Title -->
<div class="hk-pg-header align-items-top">
<!-- /Title -->
</div>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Add Main Chapter
</button>
<!-- Table Contain -->
<div class="container">
<br><br>
<h2>Main Chapter List </h2>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th>Class</th>
<th>Subject Name</th>
<th>Main Chapter</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
$notice_query="select * FROM care_class_main_chapter";
$notice_result = mysqli_query($con,$notice_query);
while($row = mysqli_fetch_assoc($notice_result))
{
?>
<tr>
<td>
<?php
$class_name_query="select * FROM care_class INNER JOIN care_class_main_chapter ON care_class.care_class_id=care_class_main_chapter.care_class_id WHERE care_class_main_chapter.care_class_id = $row[care_class_id]";
$class_name_result = mysqli_query($con,$class_name_query);
$class_name_row=mysqli_fetch_array($class_name_result);
echo $class_name_row['care_class_number'];
?>
</td>
<td>
<?php
$subject_name_query="select * FROM care_subject INNER JOIN care_class_main_chapter ON care_subject.care_subject_id=care_class_main_chapter.care_subject_id WHERE care_class_main_chapter.care_subject_id = $row[care_subject_id]";
$subject_name_result = mysqli_query($con,$subject_name_query);
$subject_name_row=mysqli_fetch_array($subject_name_result);
echo $subject_name_row['care_subject_name'];
?>
</td>
<td><?php echo $row['care_class_main_chapter_name']; ?></td>
<td>Edit</td>
<td>Delete</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- End Table Contain -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Main Chapter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-group" action="" method="POST">
<div class="row">
<!-- Section for Include Class -->
<div class="col-6">
<label for="Text">Class</label>
<select name="care_class_id" id="care_class_id" required>
<option value="">Select Class</option>
</select>
</div>
<!-- End Section for Include class -->
<!-- Section for Include Subject -->
<div class="col-6">
<label for="Text">Subject</label>
<select name="care_subject_id" id="care_subject_id"required>
<option value="">Select Subject</option>
</select>
</div>
<!-- End Section for Include Subject -->
</div>
<br>
<label for="class">Main Chapter</label>
<input type="text" class="form-control" placeholder="Enter Subject" name="care_class_main_chapter_name" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="main-chapter-add-button">Submit</button>
</form>
<?php
if(isset($_POST['main-chapter-add-button']))
{
$care_class_id=$_POST['care_class_id'];
$care_subject_id=$_POST['care_subject_id'];
$care_class_main_chapter_name=$_POST['care_class_main_chapter_name'];
$query="INSERT INTO `care_class_main_chapter` (`care_class_id`,`care_subject_id`,`care_class_main_chapter_name`) VALUES ('$care_class_id','$care_subject_id','$care_class_main_chapter_name')";
if(mysqli_query($con,$query))
{
echo '<script>swal("Main Chapter Added Sucessfully", "Please proceed", "success").then((value) => {
window.location.href="care-class-main-chapter-list.php"; });
</script>';
}
else
{
echo '<script>swal("Something Wrong", "Please proceed", "error").then((value) => {
window.location.href="care-class-main-chapter-list.php"; });
</script>';
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function loadData(type,subject_id){
$.ajax({
url : "care-class-main-chapter-list-ajax.php",
type : "POST",
data:{type:type,subject:subject_id},
success : function(data){
if(type=="subject"){
$("#care_subject_id").html(data);
}
else{
$("#care_class_id").append(data);
}
}
});
}
loadData();
$("#care_class_id").on("change",function(){
var cls =$("#care_class_id").val();
loadData("subject",cls);
})
});
</script>
<!-- /Container -->
<?php include('footer.php')?>
<?php include('../../database_configuration/dbconfig.php')?>
<?php
if($_POST['type']=="")
{
$class_sql="SELECT * FROM care_class";
$class_query=mysqli_query($con,$class_sql);
$str="";
while ($row=mysqli_fetch_assoc($class_query))
{
$str.="<option value='{$row['care_class_id']}'>{$row['care_class_number']}</option>";
}
}
else if($_POST['type']=="subject")
{
$class_sql="SELECT * FROM care_subject WHERE care_class_id={$_POST['subject']} ";
$class_query=mysqli_query($con,$class_sql);
$str="";
while ($row=mysqli_fetch_assoc($class_query))
{
$str.="<option value='{$row['care_subject_id']}'>{$row['care_subject_name']}</option>";
}
}
echo $str;
?>
Related
my view page
<!-- BEGIN PAGE -->
<div id="main-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN THEME CUSTOMIZER-->
<div id="theme-change" class="hidden-phone">
<i class="icon-cogs"></i>
</div>
<!-- END THEME CUSTOMIZER-->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
contactus
<small> List </small>
</h3>
<ul class="breadcrumb">
<li>
<i class="icon-home"></i><span class="divider"> </span>
</li>
<li>
Dashboard<span class="divider"> </span>
</li>
<li>
contactus <span class="divider-last"> </span>
</li>
</ul>
<br /><br />
<div id="msg">
<?php
if($this->session->tempdata('success'))
{
?>
<div class="alert alert-success hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('success');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
if($this->session->tempdata('error'))
{
?>
<div class="alert alert-danger hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('error');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
?>
</div>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div id="page" class="dashboard">
<div class="row-fluid">
<div class="span12">
<!-- BEGIN RECENT ORDERS PORTLET-->
<div class="widget">
<div class="widget-title">
<h4><i class="icon-reorder"></i> Contactus-List </h4>
<button class="btn btn-success" style="float:right"><i class="icon-plus icon-white"></i> EXCEL </button>
</div>
<div class="widget-body">
<!-- BEGIN Table-->
<table class="table table-striped table-advance table-hover" id="sample_1">
<thead>
<tr>
<th><i class="icon_profile"></i> S.No. </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Date & Time </th>
<th><i class="icon_profile"></i> Name </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Email </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Mobile Number </th>
<th><i class="icon_mobile"></i> Message</th>
<th><i class="icon_cogs"></i> Action</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($contactus as $e)
{
?>
<tr>
<td><?php echo $i++;?></td>
<td><?php echo $e->date_and_time;?></td>
<td><?php echo $e->name;?></td>
<td><?php echo $e->email;?></td>
<td><?php echo $e->mobile_no;?></td>
<td>
<?php
$string = strip_tags($e->message);
$stringCut = substr($string, 0, 15);
echo $stringCut."...";?> click to read more
</td>
<td><div class="btn-group">
<!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<!-- <button class="btn btn-primary"><i class="icon-eye-open"></i></button>
<button class="btn btn-primary view" onclick="view_contact(this.value)" id="user_id" user_id="<?php echo $e->id;?>"><i class="icon-eye-open"></i></button>-->
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
<a onclick="return confirm('Are you want to delete ')" href="<?php echo base_url('admin/contactus_cont/delete_contactus')."/".$e->id;?>"> <button class="btn btn-danger"><i class="icon-trash icon-white"></i></button></a>
</div></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- END RECENT ORDERS PORTLET-->
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
</div>
<!-- END CONTAINER -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
//alert(id);
$.ajax({
url : "<?php echo base_url('admin/contactus_cont/get_Full_data') ?>",
method:"POST",
data:{id:id},
success:function(data){
alert(data);
//console.log(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
i want to view detail about each contact by AJAX & JQUERY
in this i am getting all contact data in list from database. But the problem is to show data in pop-up in datail.
like when i click on
it should display pop-up window with all detail by using particular ID close option
my controller function :-
public function get_Full_data()
{
$id = $this->input->post("id");
//echo $id; exit;
$data['fullData'] = $this->contactus_model->view($id);
$this->load->view('admin/datainModal',$data);
}
my model function :-
public function view($id)
{
$res = $this->db->get_where("contactus",array('id'=>$id));
return $res->row();
}
view page datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
console.log(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>
View Code:
<tr>
<td>
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
</td>
</tr>
Bootstrap Modal Code:-
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQUERY AJAX Code:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url : "<?php echo base_url('ControllerName/get_Full_data') ?>",
type:"POST",
data:{id:id},
success:function(data){
//alert(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Controller Code:-
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ControllerName extends CI_Controller {
public function get_Full_data(){
$id = $this->input->post("id");
$this->load->YourModelName();
$data['fullData'] = $this->YourModelName->getDatainModal($id);
$this->load->view('datainModal',$data);
}
}
?>
Modal Code:-
<?php
class YourModelName extends CI_Model {
function getDatainModal($id){
return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row();
}
}
?>
Create in View datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>
I have a jquery modal button, where I want to display information from my database.
I have a field in the database where I want everything to be identified by it is called "number"
The modal button is displayed in a table which is already being looped from a SQL query displaying all entries
while ($row = getarray($res)){
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?
$row["number"])">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.
Please try to use following code , there are so many typo mistakes you have in your code.
<?php while ($row = getarray($res)){ ?>
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
$row["number"]) ?>">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Here. I have codeigniter update code, it also worked but the problem is when i click the Edit button did not parsing After space data.
(After space Words did not fetch in update model).
How can I solve this problem.
vvIncome.php view
$(document).on('click','.btn_edit', function(e) {
$("#edit").val($(this).attr('edit_id'));
$("#in_dis").val($(this).attr("in_dis"));
$("#in_amnt").val($(this).attr('in_amnt'));
$("#confirm-edit").modal({show:'true'});
});
$(document).on('click', '#btn-ys', function() {
var income_id = $('#edit').val();
var in_dis = $('#in_dis').val();
var in_amnt = $('#in_amnt').val();
var result{"income_id":income_id,"in_dis":in_dis,"in_amnt":in_amnt};
$.ajax({
data:result,
type: "POST",
url:'<?php echo base_url(); ?>admin/income/editincome/'+income_id,
success: function(data){
$("#confirm-edit").modal('hide');
viewData();
}
});
});
View PHP Code
<div class="modal fade bs-example-modal-md" id="confirm-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT CATEGORY</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<input type="text"class="form-control" id="in_dis" placeholder="description">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="number" class="form-control" id="in_amnt" placeholder="amount">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="edit" placeholder="income_id">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-ys" class="btn btn-success">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</div>
`
Income_resut.php
<thead>
<tr>
<th ><center>DESCRIPTION</center></th>
<th ><center>AMOUNT</center></th>
<th ><center>EDIT</center></th>
<th ><center>DELETE</center></th>
</tr>
</thead>
<?php foreach ($incm as $in_key) { ?>
<tr>
<td><center><?php echo $in_key->description;?></center></td>
<td><center><?php echo $in_key->amount;?></center></td>
<td>
<center><button type="button" title="edit" data-toggle="modal" edit_id=<?php echo $in_key->income_id;?> in_dis=<?php echo $in_key->description;?> in_amnt=<?php echo $in_key->amount;?> class="btn btn-info btn_edit"><i class="fa fa-pencil"></i></button></center>
</td>
<td>
<center><button type="button" title="delete" data-toggle="modal" del_id=<?php echo $in_key->income_id;?> class="btn btn-danger btn-delete"><i class="fa fa-trash-o"></i></button></center>
</td>
<?php } ?>
</table>
`
income.php Controller
public function editincome($income_id)
{
$udata['income_id'] = $this->input->POST('income_id');
$udata['description'] = $this->input->POST('in_dis');
$udata['amount'] = $this->input->POST('in_amnt');
$update = $this->income_model>update_income_details($udata,$income_id);
}
Income_Model.php Model
public function update_income_details($udata,$income_id)
{
$this->db->from('income', $udata);
$this->db->where('income_id',$income_id );
return $this->db->update('income',$udata);
}
This on view table
enter image description here
This is edit model
enter image description here
Try changing to this,
for eg, in_dis=<?php echo $in_key->description;?> to data-in_dis="<?php echo rawurlencode($in_key->description); ?>"
then
$("#in_dis").val($(this).attr("in_dis")); to $("#in_dis").val(decodeURIComponent($(this).data("in_dis")));
Use .data() instead of .attr()
Let me know if it works for you.
Hey im still a beginner in php and im doing a detail model and i want to get the id from POST but i get this problem Notice: Undefined index: id in E:\xampp\htdocs\Site\includes\detailmodal.php on line 3
this is the function :
<script>
function details(id)
{
var data = { "id" : id };
jQuery.ajax({
url : <?= BASEURL; ?>+'includes/detailmodal.php',
method : 'POST',
data : data,
success : function(data){
$('body').append(data);
$('#details-modal').modal('toggle');
},
error : function(){
alert("something went wrong")
}
});
}
</script>
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
this is index.php :
<?php include_once 'core/init.php' ?>
<?php include 'includes/head.php' ?>
<?php include 'includes/navigation.php' ?>
<?php include 'includes/header.php' ?>
<?php include 'includes/detailmodal.php' ?>
<?php include 'includes/footer.php' ?>
<?php
$sql='SELECT * FROM products';
$featured=$db->query($sql);
?>
<!-- Body -->
<!-- Products -->
<div class="container-fluid">
<div class="col-md-2">
left side
</div>
<div class="col-md-8">
<div class="row">
<h1 class="text-center" style="color:blue; font-family: 'Orbitron', sans- serif; font-size:24px;">Products</h1><br>
<?php while ($products = mysqli_fetch_assoc($featured)): ?>
<div class="col-md-3">
<h1 class="text-center" style="color:blue; font-family: 'Orbitron', sans-serif; font-size:16px;"><?= $products["title"]?></h1>
<center> <img src="<?= $products["image"]?>" class="image-thumb" alt="Procuct1"/></center>
<p class="list-price text-danger text-center">List Price : <s><?= $products["list_price"]?></s> </p>
<p class="price text-center">Our Price : <?= $products["price"]?> </p>
<center> <button type="button" class="btn btn-sm btn-success" name="submit" onclick="details(<?php echo $products['id'];?>)">Details</button> </center>
</div>
<?php endwhile;?>
</div>
</div>
<div class="col-md-2">
right side
</div>
</div>
<!-- Modal -->
this is detailmodal.php :
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/site/core/init.php';
$id = $_POST["id"];
$id = (int)$id;
$sql = "SELECT * FROM products WHERE id = '$id'";
$result = $db->query($sql);
$products = mysqli_fetch_assoc($result);
?>
<?php ob_start(); ?>
<div class="modal fade details-1" id="details-modal" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" name="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center" style="color:blue; font-family: 'Orbitron', sans-serif; font-size:40px;"><?php echo $products['title']; ?></h4>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block">
<img src="<?php echo $products['image'];?>" alt="product1" class="details img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<div class="center-block">
<h4 class="text-center" style="color:White; font-family: 'Orbitron', sans-serif; font-size:25px;">Details</h4><br><br>
<p style="color:black; font-family: 'Orbitron', sans-serif; font-size:25px;">
<?php echo $products['description'];?>
</p>
<form action="add-to-cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label id="quantitylbl" for="quantity">Quantity</label>
<input type="text" name="quantity" class="form-control" id="quantity" value="1" required>
</div>
<br>
<p>
available : 3
</div>
<div class="form-group">
<label id="sizelbl" for="size">Size</label>
<select name="size" id="size" class="form-control">
<option value="20">20</option>
<option value="22">22</option>
<option value="25">25</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" name="button">Close</button>
<button type="submit" class="btn btn-warning" name="button"><span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<?php echo ob_get_clean(); ?>
in the ajax request change the line
method : "GET"
to
method : "POST"
Also in your php file add this line after the require
if($_SERVER['REQUEST_METHOD'] == 'POST'){
and close it in the end of the code
Change the method in JQuery to POST
JQuery.ajax({
[...]
method: 'POST'
[...]
On my codeigniter project I have created a model were when user can delete a page but before he or she does it pops up with a warning bootstrap modal.
For some reason I can not get my data-id to get picked up by my script.
So what happens when I click on yes to delete it sends me to http://localhost/codeigniter/cms-1/admin/catalog/information/delete/ but should pick up data-id and ad it after delete example http://localhost/codeigniter/cms-1/admin/catalog/information/delete/2
Question: Why does the script not detect and grab my data-id and add it to url when click yes on modal?
I think this part here not working correct
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)\d*/, '$1' + id));
script
<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)\d*/, '$1' + id));
$('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$('#modal-from-dom').data('id', id).modal('show');
});
</script>
View where data-id is data-id="<?php echo $information['information_id'];?>"
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<h1 class="panel-title" style="padding-top: 7.5px;"><?php echo $heading_title;?></h1>
</div>
<div class="pull-right">
Add Information Page
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>Information Title</td>
<td class="text-right">Delete</td>
<td class="text-right">Action</td>
</tr>
</thead>
<tbody>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<tr>
<td><?php echo $information['title'];?></td>
<td class="text-right">
Delete <?php echo $information['title'];?>
</td>
<td class="text-right">
Edit <?php echo $information['title'];?>
</td>
</tr>
<?php }?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="4">No Results</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
</div>
</div><!-- .panel .panel-default -->
Modal
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<div class="modal fade" id="modal-from-dom">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track url, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p id="debug-url"></p>
</div>
<div class="modal-footer">
Yes
No
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php }?>
<?php }?>
Full View
<?php echo $header;?>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<h1 class="panel-title" style="padding-top: 7.5px;"><?php echo $heading_title;?></h1>
</div>
<div class="pull-right">
Add Information Page
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>Information Title</td>
<td class="text-right">Delete</td>
<td class="text-right">Action</td>
</tr>
</thead>
<tbody>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<tr>
<td><?php echo $information['title'];?></td>
<td class="text-right">
Delete <?php echo $information['title'];?>
</td>
<td class="text-right">
Edit <?php echo $information['title'];?>
</td>
</tr>
<?php }?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="4">No Results</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="panel-footer">
</div>
</div><!-- .panel .panel-default -->
</div>
</div>
<?php if ($informations) {?>
<?php foreach ($informations as $information) {?>
<div class="modal fade" id="modal-from-dom">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track url, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p id="debug-url"></p>
</div>
<div class="modal-footer">
Yes
No
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php }?>
<?php }?>
<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)\d*/, '$1' + id));
$('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$('#modal-from-dom').data('id', id).modal('show');
});
</script>
</div>
<?php echo $footer;?>
EDIT: Try this:
<script type="text/javascript">
$('#modal-from-dom').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)\d*/, '$1' + id));
$('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});
$('.confirm-delete').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
$('#modal-from-dom').data('id', id).modal('show');
});
</script>
Use var id = $(this).attr('data-id'); only on the .confirm-delete element.