bootstrap modal dynamic data from database - javascript

I want open model and get model content dynamic but when i call ajax file and get response data then model not open and i cant access json response data in php code . When I put my model in ajx file and get html response then response success but model can't open.please help me to fix issue.
<script>
function test(id) {
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>index.php/Appointment/get_model",
data: "id=" + id,
cache: false,
success: function(data) {
$("#model_test").html(data);
$("#myModal2").modal('show');
//displayRecords();
}
});
}
</script>
This one is my ajax file get_model.php:
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
$query = $this->db->query("select * from appointment where id='" . $id . "'");
$result = $query->row();
print_r($result);
die;
//echo(json_encode($result));
}
?>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="col-lg-12">
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Doctor Name:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php
$result->name;
?>" placeholder="Doctor Name" required>
</div>
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Contact No:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" value="<?php
$result->contact_no;
?>" class="form-control input-lg" name="email" id="email_id" placeholder="Patient Name" required>
</div>
</div>
</div>
And this one is my html code i want to open model here with dynamic content:
<div id="model_test">
</div>
<?php
foreach($result as $row)
{
<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>
}

you have a problem in the div closing tags, kindly check that all div tags are closed properly, try the below code
<div id="myModal2" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="col-lg-12">
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Doctor Name:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php $result->name; ?>"
placeholder="Doctor Name" required >
</div>
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Contact No:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" value="<?php $result->contact_no; ?>" class="form-control input-lg" name="email" id="email_id"
placeholder="Patient Name" required >
</div>
</div>
</div>
and this one is my html code i want to open model here with dynamic content
<div id="model_test">
</div>
</div>
<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>

You did not use MVC programming pattern!
You use database code into a view?!
Please make a Controller with the function:
function get_model(){
$this->load->model('get_model');
$value = $this->get_model->your_db_data_retrieve_model_function(data);
$data = json_encode($value);
$this->output
->set_content_type('application/json')
->set_output($data);
}
also a model (retrieve data from database) is needed:
function retrieve_data($id) {
. ....
return $data;
}
remember to use a controller to get the data from $_GET using
$this->input->get('your_variable_name')
passing it to model (the ID).
Consider to read the principle of MVC (model-view-controller) pattern.

Related

Displaying php echo $row data into bootstrap modal form

I currently have the following datatable to display my list of contacts from the database. Each row, I have also insert a "Edit" & "Delete" button and have the data-id="<?=$row['id']?>" passed for the jQuery to handle when the button is clicked. When the button is clicked, through ajax, I will get the data from getcontact.php and set it to the respective input in the modal form, however the data does not seem to be displaying in the form values. May I know where did I go wrong?
tables.php
<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
<th>Gender</th>
<th>Date Registered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?=$row['id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['company']?></td>
<td><?=$row['position']?></td>
<td><?=$row['phone']?></td>
<td><?=$row['email']?></td>
<td><?=$row['gender']?></td>
<td><?=$row['dateregistered']?></td>
<td>
<!-- Edit Button trigger modal -->
<button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
Edit
</button>
</td>
<td>
<!-- Delete Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
Delete
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Modal (in the same page as tables.php)
<!-- Edit Contact Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel">
<div class="modal-dialog" 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 Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="editForm" role="form">
<div class="form-group animated fadeIn">
<label for="nameInput" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="companyInput" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="posInput" class="col-sm-2 control-label">Position</label>
<div class="col-sm-10">
<input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="emailInput" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="genderInput" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editContact" type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
jQuery
$("#editButton").click(function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$.ajax({
url: 'getcontact.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json',
success: function(response){
$("#nameInput").val(result[0]);
$("#companyInput").val(result[1]);
$("#posInput").val(result[2]);
$("#contactInput").val(result[3]);
$("#emailInput").val(result[4]);
$("#genderInput").val(result[5]);
}
});
});
getcontact.php
<?php
include("dbconnect.php");
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
$rows = array();
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
echo json_encode($rows);
?>
1 - you are sending a encoded json from your php file and use it directly from you javascript code which is invalid so to speak,
2 - you are sending the data object to php using ajax wrongly, it should be as follows instead data: {id: uid},
3 - you are declare the wrong data-id , it should be as follows: var uid = $(this).attr('data-id');
you need to decode your json response as follows:
var uid = $(this).attr('data-id');
$.ajax({
url: 'getcontact.php',
method: 'POST',
data: {id: uid},
success: function(response){
var result = JSON && JSON.parse(response) || $.parseJSON(response);
...
// rest of your code
...
Update
and you have an issue in this part:
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
to add the whole array you need to do as follows:
while($row = mysqli_fetch_array($result)){
$rows[] = $row;
}

Load data by "id" for edit form using javascript in codeigniter

I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<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>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php
Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.

keeping bootstrap modal active

hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>
Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>

Ajax callback only applying to top div in list of jquery form groups

Hello smarter people,
So as the title conveys, i'm having some difficulties, and I've wasted a good 8 hours trying to figure it out :)
I posted a Question earlier, to which I got no answers. I was having difficulties with my ajax, and it's interaction with a form. This form is in an admin panel, and is for dynamically creating and editing navigation links on the front end of my (hopefully) soon-too-be site.
My problem specifically is: I am unable to, via ajax, have the text-content of the anchor tag (which causes the form to dropdown), to immediately reflect on screen...
http://i1379.photobucket.com/albums/ah126/conchairtoe/3_zpsb897a6a4.png
As you can see, the ajax has run, no errors, yet the label (anchor tag for enacting drop-down form) remains "test", when I typed "testing!!!!!!" in.
Everything behind the scenes worked, as the database successfully updates the corresponding data, and so does the anchor tag text once i reload the page, but that ain't very ajaxy now is it!
Here's the Javascript for when the form is submitted.
// NAV ITEM FORM - UPDATE / SUBMIT
$(".nav-form").submit(function(event) {
var navData = $(this).serializeArray(); // The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.
var navLabel = $('input[name=label]').val();
var navID = $('input[name=id]').val();
$.ajax({
url: "ajax/navigation.php",
type: "POST",
data: navData
}).done(function(){
$("#label_"+navID).html(navLabel);
}); // END $.ajax
alert("navID = "+navID+" navLabel = "+navLabel);
event.preventDefault(); // will prevent form from submitting
});//END nav-form
Please note the .done callback.
I've narrowed the problem down!
The ajax works ONLY on whichever of the sortable anchors is in position 1 (the top of the list) - for when I change the "Home Page", or, again, which ever one I happen to move to the top of the list, the label updates immediately as per the ajax.
As you can see in the code, I have those alerts to verify this:
http://i1379.photobucket.com/albums/ah126/conchairtoe/final_zps7a7ddc68.png
Here is the code for the DOM environment
Navigation
<div class="row">
<div class="col-md-3">
<ul id="sort-nav" class="list-group-item">
<!--EXISTING NAV-ITEMS-->
<?php
$query = "SELECT * FROM navigation ORDER BY position ASC";
$result = mysqli_query($dbc, $query);
while ($list = mysqli_fetch_assoc($result)) { ?>
<li id="list_<?php echo $list['id']; ?>" class="list-group-item">
<a id="label_<?php echo $list['id']; ?>" data-toggle="collapse" data-target="#form_<?php echo $list['id']; ?>">
<?php echo $list['label']; ?> <i class="fa fa-chevron-down"></i>
</a>
<div id="form_<?php echo $list['id']; ?>" class="collapse">
<!--FORM-->
<form class="form-horizontal nav-form" role="form" action="index.php?page=navigation&id=<?php echo $list['id']; ?>" method="post">
<!-- ID -->
<div class="form-group">
<label class="col-sm-2 control-label" for="id">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" value="<?php echo $list['id'];?>" name="id" id="id" placeholder="ID - name" />
</div>
</div>
<!-- LABEL -->
<div class="form-group">
<label class="col-sm-2 control-label" for="label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" value="<?php echo $list['label'];?>" name="label" id="label" placeholder="Label" />
</div>
</div>
<!--URL -->
<div class="form-group">
<label class="col-sm-2 control-label" for="value">URL</label>
<div class="col-sm-10">
<input class="form-control input-sm" type="text" value="<?php echo $list['url'];?>" name="url" id="url" placeholder="URL"></input>
</div>
</div>
<!--POSITION -->
<div class="form-group">
<label class="col-sm-2 control-label" for="value">Position</label>
<div class="col-sm-10">
<input class="form-control input-sm" type="text" value="<?php echo $list['position'];?>" name="position" id="position" placeholder="Position"></input>
</div>
</div>
<!-- STATUS -->
<div class="form-group">
<label class="col-sm-2 control-label" for="status">Status</label>
<div class="col-sm-10">
<input class="form-control input-sm" type="text" value="<?php echo $list['status'];?>" name="status" id="status" placeholder=""></input>
</div>
</div>
<!--Button and Hidden Input-->
<button type="submit" class="btn-btn-default">Save</button>
<input type="hidden" name="submitted" value="1" />
<input type="hidden" name="opened_id" value="<?php echo $list['id']; ?>" />
<span class="pull-right">
<a id="del_<?php echo $list['id']; ?>" class="btn btn-danger nav-item-delete" href="#" style="margin-bottom: 2px;" title="delete nav item"><i class="fa fa-trash"/></i></a>
</span>
</form> <!--END form-->
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="col-md-9">
<div id="callback"><?php if(isset($message)) { echo $message; } ?></div>
</div> <!-- END col-md-12 -->
So yea, I truly apologize for my ignorance. Bare in mind that I barely could grasp css just 2 months ago or so.
THANK YOU SO MUCH FOR YOUR HELP IF YOU CAN PROVIDE IT.
Because you are not looking at the current form for the navID. The code $('input[name=id]') is using the first element it finds. You need to look at the form, use find().
var form = $(this);
var navData = form.serializeArray();
var navLabel = form.find('input[name=label]').val();
var navID = form.find('input[name=id]').val();

PHP array wrong structure

I have a form that collects user data and when the user clicks save it uses ajax to pass the data to a php script that executes an insert statement into a database. When I debug through the scripts and look at the variables coming in from the ajax request the structure of the php array has the wrong structure for the last 4 variables in which the value is added on to the variable name instead of like the first 3 variables.
Does any one have any advice as to why this is happening? and how I can fix it?
units.php
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" id="AddModal">Add Unit Code </h3>
</div> <!--modal-header-->
<div class="modal-body">
<form id="add-form" class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!--<legend>Form Name</legend>-->
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="addUnitId">Unit Id</label>
<div class="col-md-2">
<input name="addUnitId" class="form-control input-sm" id="addUnitId" required="" type="text" maxlength="6" placeholder="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addDivId" >Div Id</label>
<div class="col-md-2">
<select name="addDivId" class="form-control" id="addDivId">
<option value=""></option>
<?php
// Populate the drop down select box from the database
$query1=mysql_query("select * from divisions where div_id <> '' ");
while($row=mysql_fetch_assoc($query1)){
$str = $row['div_id']
?>
<option value="<?php echo str_pad($str,4,'37', STR_PAD_LEFT); ?>">
<?php
echo str_pad($str,4,'37', STR_PAD_LEFT);
echo "&nbsp " ;
echo $row['long_desc'] ?>
</option>
<?php
} // close while loop
?>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addTitleOrg">Title Org</label>
<div class="col-md-4">
<select name="addTitleOrg" class="form-control" id="addTitleOrg">
<option value=""></option>
<?php
// Populate the drop down select box from the database
$query2=mysql_query("select l1l5, ltitl, stitl from tl2l5 where status='A' ");
while($row=mysql_fetch_assoc($query2)){
?>
<option value="<?php echo $row['l1l5']; ?>">
<?php
echo $row['l1l5'];
echo "&nbsp " ;
echo $row['ltitl'] ?>
</option>
<?php
} // close while loop
?>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="addShortDesc">Short Desc</label>
<div class="col-md-2">
<input name="addShortDesc" class="form-control input-sm" id="addShortDesc" disabled="disabled" type="text" placeholder="">
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-4 control-label" for="addLongDesc">Long Desc</label>
<div class="col-md-4">
<input name="addLongDesc" class="form-control input-sm" id="addLongDesc" disabled="disabled" type="text" placeholder="" >
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-4 control-label" for="addUnitDesc">Comments</label>
<div class="col-md-4">
<input name="addUnitDesc" class="form-control input-sm" id="addUnitDesc" maxlength="50">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addEnabled">Enabled</label>
<div class="col-md-2">
<select name="addEnabled" class="form-control" id="addEnabled">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</div>
</fieldset>
</form>
</div> <!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="saveAdd" name="saveAdd" class="btn btn-primary">Add</button>
</div> <!--modal-footer-->
</div> <!--modal-content-->
</div> <!--modal-dialog-->
</div> <!--modal-fade -->
JavaScript file
$('#saveAdd').on('click', function() {
var data ={
unit_id : $('#addUnitId').val(),
div_id : $('#addDivId').val(),
title_org : $('#addTitleOrg').val(),
short_desc : $('#addShortDesc').val(),
long_desc : $('#addLongDesc').val(),
unit_desc : $('#addUnitDesc').val(),
avail_ind : $('#addEnabled').val()
};
alert(data);
// alert(unit_id + " " + div_id + " " + title_org + " " + short_desc + " " + long_desc + " " + unit_desc + " " + avail_ind);
$.ajax({
type: "POST",
url: "test.php?cmd=add",
data: data
});
});
PHP file
require_once ('config/config.php');
$conn = new PDO('mysql:host=' . DBHOST . '; dbname=' . DBNAME ,DBUSER,DBPASS);
$unit_id = $_REQUEST['unit_id'];
$div_id = $_REQUEST['div_id'];
$title_org = $_REQUEST['title_org'];
$short_desc = $_REQUEST['short_desc'];
$long_desc = $_REQUEST['long_desc'];
$unit_desc = $_REQUEST['unit_desc'];
$avail_ind = $_REQUEST['avail_ind'];
// PREPARE INSERT STATEMENT
$stmt = $conn->prepare("INSERT INTO units
(unit_id, div_id, title_org, short_desc, long_desc, unit_desc, avail_ind)
VALUES ($unit_id','$div_id','$title_org','$short_desc','$long_desc','$unit_desc','$avail_ind')
WHERE NOT EXISTS (SELECT * FROM units WHERE unit_id = '$unit_id')");
UPDATE:
#Sam when I changed the $_REQUEST to $_POST the array was empty, array(0)
When I use the $_GET and debug through the scripts it still gives me the improper structure of the PHP array
Try this:
var vdata=[];
$.each(data,function(k,v){
var str=k+'='+v;
vdata.push(str);});
}
vdata=vdata.join("&");
and in your ajax-post:
data: vdata;

Categories