I have created button renderer in JQXgrid, when the button clicked, it passing data into controller, and controller send into model, then return with result from data from mysql.
This is my view code-part button renderer:
var button_renderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var kode_keramik = $('#jqxgrid').jqxGrid('getcelltext', row, "kode_keramik");
button = '<a href="#modal_details" class="btn btn-xs btn-success view_details" id="'+ kode_keramik +'" >Proceed</a>';
return button;
};
This is my view code-part passing data to controller :
$(document).on('click', ".view_details", function() {
//alert("aaa");
var url = "<?php echo base_url().'getGlazeMM/ajax_get_item_list'?>";
kode_keramik = this.id;
$.post(url, {kode_keramik: kode_keramik} ,function(data) {
$('.modal-body').empty();
$('.modal-body').append(data);
$('#modal_details').modal();
});
});
This is my controller :
public function ajax_get_item_list(){
$data['post'] = $_POST;
$kode_keramik = $_POST['kode_keramik'];
//$buyer = $_POST['buyer'];
$this->load->model('get_glaze');
$data['item_list'] = $this->get_glaze->action_ajax_get_item_list( $data['post'] );
if ($data['item_list']){
echo "<table class='table table-bordered'>
<tr>
<th>Inspect Date</th>
<th>Item Code</th>
<th>Type</th>
<th>Hasil KW1</th>
<th>Total Inspek</th>
<th>Aktual Yield</th>
<th>Buyer</th>
</tr>";
foreach ($data['item_list'] as $key => $value) {
echo "<tr>";
echo "<td>".$value['inspect_date']."</td>";
echo "<td>".$value['item_code']."</td>";
echo "<td>".$value['sell_type']."</td>";
echo "<td>".$value['hasil_kw1']."</td>";
echo "<td>".$value['total_inspek']."</td>";
echo "<td>".$value['aktual_yield']." %</td>";
echo "<td>".$kode_keramik."</td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "Data tidak ditemukan";
}
}
The big question is how to passing multiple data from view_details" id="'+ kode_keramik +'" + SECOND VALUE on
var button_renderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var kode_keramik = $('#jqxgrid').jqxGrid('getcelltext', row, "kode_keramik");
button = '<a href="#modal_details" class="btn btn-xs btn-success view_details" id="'+ kode_keramik +'" >Proceed</a>';
return button;
};
into :
var url = "<?php echo base_url().'getGlazeMM/ajax_get_item_list'?>";
kode_keramik = this.id;
***SECOND VALUE;***
$.post(url, {kode_keramik: kode_keramik, ***SECOND VALUE***} ,function(data) {
Until Controller :
public function ajax_get_item_list(){
$data['post'] = $_POST;
$kode_keramik = $_POST['kode_keramik'];
$***SECOND VALUE*** = $_POST['***SECOND VALUE***'];
You can format your data as one JSON object, and put it inside custom html attribute.
Example
Please be careful with single quote and double quotes escaping.
var button_renderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var kode_keramik = $('#jqxgrid').jqxGrid('getcelltext', row, "kode_keramik");
button = "<a href='#modal_details' class='btn btn-xs btn-success view_details' data-custom='{\"kode_keramik\": \"" + kode_keramik + "\", \"second\": \"value\"}'>Proceed</a>";
return button;
};
Retrieving our object with jQuery
$(document).on('click', ".view_details", function() {
//alert("aaa");
var url = "<?php echo base_url().'getGlazeMM/ajax_get_item_list'?>";
var obj = $(this).data('custom'); // get object using jQuery
$.post(url, obj ,function(data) {
$('.modal-body').empty();
$('.modal-body').append(data);
$('#modal_details').modal();
});
});
It will parse the object automatically.
Related
I'm trying to make a shopping cart using laravel 7 and ajax. When i press add product, it save the product into the cart in the database. If the product is already in the cart, it will just add 1 to the quantity. If not, it will create a new order item in the cart. Then, it will return an output variable with html content through json response. Then i append the html data using javascript. The problem is when i add a product and the product isn't in the cart so it created a new order item. The json response doesn't seem to load the latest order item in the html. But when i add that same product the second time, it managed to append the html. Does the foreach didn't get the latest data from database?
This is the function in the controller
public function addItem($product_id, Request $request){
$order_id = auth()->user()->waitingOrder->first()->id;
$order = Order::find($order_id);
$bingo = false;
foreach ($order->orderItems as $key => $order_item) {
if ($product_id == $order_item->product_id) {
$order_item->quantity = $order_item->quantity + 1;
$order_item->save();
$bingo = true;
break;
}
}
if ($bingo == false) {
$new_item = new OrderItem();
$new_item->order_id = $order_id;
$new_item->product_id = $product_id;
$new_item->save();
}
$output = "";
foreach ($order->orderItems as $item) {
$output .= '<tr>'.
'<td align="left" width="15%">'.
'<img style="height: 80px; width: 80px;" src="'. asset('img/products/' . $item->product->image) .'">'.
'</td>'.
'<td align="center" width="20%">'.
$item->product->name .
'</td>'.
'<td>'.
rupiah($item->product->price) .
'</td>'.
'<td width="14%">'.
'<input type="number" class="form-control" name="quantity" value="'. $item->quantity .'" min="1" max="'. $item->product->stock .'">'.
'</td>'.
'<td>'.
rupiah($item->product->price * $item->quantity) .
'</td>'.
'<td>'.
'<a href="'. route('kasir.remove.item', $item->product->id ) .'" class="remove-btn">'.
'<span class="icon_close"></span>'.
'</a>'.
'</td>'.
'</tr>';
}
return response($output);
}
This is the javascript code
$(document).on('click', '.add-btn', function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
success:function(data){
$('#orderItems').html(data);
}
});
});
function order(){
var customer_name = $('#customer_name').val();
var link = $('#order-btn').attr('href');
if (link != '#') {
$.ajax({
type: 'POST',
url: link,
data: {name:customer_name},
success:function(data){
$('#order_id').val(data.order_id);
$('#customer_name').prop('disabled', true);
$('#order-btn').attr('href', '#');
$('#cart-total').html("")
$('#cart-total').html(data.output)
}
});
}
}
When clicking add row button, new row will add to the specific table. So I need to add a select option with php option values.
How to pass this php values to jQuery?
Jquery function
I need to show select option inside the rowData.push('');
$('.dt-add').each(function () {
var whichtable = $(this).parents('form').attr('data-id');
$(this).on('click', function(evt){
//Create some data and insert it
var rowData = [];
var table = $('#teammembertable' + whichtable).DataTable();
// rowData.push('');
rowData.push('<select class="form-control addstafftype" id="addstafftype" name="addstafftype"><option value="">Select</option><option value="Leader">Leader</option><option value="Technician">Technician</option></select');
rowData.push('<button type="button" data-id='+ whichtable +' class="btn-xs dt-delete dt-deletes"><i style="font-size:10px" class="fa"></i></button>');
table.row.add(rowData).draw( false );
});
});
PHP CODE
$dataadd_team_memb = array(
'team_id' => $id,
'Staff_id' => $this->input->post('getaddstaffname'),
'Staff_type' => $this->input->post('getaddstafftype'),
'status' => "active"
);
$insert_id = 0;
if ($this->db->insert("team_members", $data)) {
$insert_id = $this->db->insert_id();
}
$('.dt-add').each(function () {
var whichtable = $(this).parents('form').attr('data-id');
$(this).on('click', function(evt){
var rowData = [];
var table = $('#teammembertable' + whichtable).DataTable();
rowData.push('<select class="form-control addstafftype" id="addstafftype" name="addstafftype">'+
'<option value="">Select</option>'+
'<?php foreach($selectallstaff as $staffname){ ?>'+
'<option value="<?php $staffname["Staff_id"]; ?>"><?php $staffname["Staff_name"]; ?></option>'+
'<?php } ?>'+
'</select');
rowData.push('<button type="button" data-id='+ whichtable +' class="btn-xs dt-delete dt-deletes"><i style="font-size:10px" class="fa"></i></button>');
table.row.add(rowData).draw( false );
});
});
I am new in codeigniter, i have been trying to display data from database as ul list in form of buttons. It was easily done using php but i want to display the same using ajax to reduce the loading time. i tried some methods but cannot able to display the data. I really need help on this, help will be appreciated. Thanks in advance.
Controller:
function user()
{
$this->data['list'] = $this->mobiles_model->get_status();
$this->_render_page('user', $this->data);
}
model:
function get_status()
{
$sql = "select * from(SELECT * FROM my_user_view ) as t group by imei ORDER BY dattim ASC ";
$query = $this->db->query($sql, array($uid,$value));
$result = $query->result();
return $result;
}
view:
<ul class="sidebar-menu" id="nav-accordion">
<?php
for ($i = 0; $i < count($deptlist); ++$i)
{
$time = $deptlist[$i]->dattim;
$sdate=date("d-m-Y H:i:s",strtotime($deptlist[$i]->dattim));
$dateFromDatabase = strtotime($time);
$dateFiveMinuteAgo = strtotime("-5 minutes");
if ($dateFromDatabase >= $dateFiveMinuteAgo)
{
?>
<li>
<button value="<?php echo $deptlist[$i]->imei ?>" class="btn-success"><?php echo $deptlist[$i]->user;?>
</button>
</li>
<?php }
else
{
?>
<li>
<button value="<?php echo $deptlist[$i]->imei ?>"class="btn-danger"><?php echo $deptlist[$i]->user; ?>
</button>
</li>
<?php }
}?>
</ul>
The data displayed using php but i want to display the same using ajax.
thanks again.
working example
to output the view part
public function index(){
if($this->session->userdata('is_logged_in')){
$this->load->view('../template/header');
$this->load->view('manufacturer');
$this->load->view('../template/footer');
} else {
redirect('main/restricted');
}
}
my controller name is manufacturer / method is manufacturer_list
public function manufacturer_list()
{
$result = array('data' => array());
$data = $this->manufacturer_model->fetchManufacturerData();
foreach ($data as $key => $value) {
//i assigned $buttons variable to hold my edit and delete btn to pass in my array.
$buttons = '
<button class="btn btn-primary" onclick="editData('.$value->id.')" data-toggle="modal" data-target="#myModal">Edit</button>
<button class="btn btn-danger" onclick="deleteData('.$value->id.')" data-toggle="modal" data-target="#deleteModal">Delete</button>
';
$result['data'][$key] = array(
$value->id,
$value->brand,
$buttons
);
}
echo json_encode($result);
}
my ajax
showRecords();
function showRecords(){
$.ajax({
url: 'manufacturer/manufacturer_list', //controller/method
type: 'POST',
dataType: 'json',
success: function(data){
var html = '';
for(i=0; i<data.length; i++){
html += '<tr align="center">'+
'<td>'+data[i].id+'</td>'+
'<td>'+data[i].brand+'</td>'+
'<td>'+'<button class="btn btn-primary edit-data" data="'+data[i].id+'">Edit</button>'+' '+
'<button class="btn btn-danger delete-data" data="'+data[i].id+'">Delete</button>'+'</td>'+
'</tr>';
}
$("#showdata").html(html); //pass the data to your tbody
},
error: function(){
alert('Could not load the data');
}
});
}
html view part is like this (manufacturer.php from index method in controller)
<table>
<thead>
<tr>
<th>ID</th>
<th>Manufacturer</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="showdata">
</tbody>
</table>
hope you get the idea
I have one page on html, named view_closing.php. In this view, There is one table that integrated with one pagination. My goal is, how can I make the table is move to another record without refreshing all the page.So, it still on one address, that is :http://localhost/tresnamuda/control_closing/
I googling for a while, and then I decide to make two view, one view to all page, and one view to just the table that will be requested by ajax.
This is the main page :
<div class="row-fluid sortable" id="isi">
<div class="box span12">
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Data Request</h2>
<div class="box-icon">
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<div class="box-content" id="things_table">
<?php $this->load->view('view_closing_table'); ?>
</div>
</div>
and this is the file 2 named view_closing table
<table class="table table-bordered table-striped table-condensed" id="table1">
<thead>
<tr>
<th>No. </th>
<th>No Request</th>
<th>Keluhan</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($data_request as $data) {
?>
<tr>
<td class="center"><?php echo $no++ . ". "; ?> </td>
<td class="sorting1" id='no_request' data-id-reseh="<?php echo $data['id_request']; ?>"><?php echo $data['kode_kantor'] . '/' . $data['kode_departement'] . '/' . date('m', strtotime($data['bulan'])) . '/' . $data['id_request']; ?></td>
<td class="center" id="description"><?php echo $data['keluhan']; ?></td>
<!-- update -->
<td class="center"><?php echo $data['status_request']; ?> </span></td>
<!-- Action-action -->
<td class="center" width="10px">
<a class="btn btn-success" >
<i class="halflings-icon white print" id="print"></i>
Print
</a>
</td>
</tr>
<?php } ?>
</tbody>
To make pagination call using ajax, I create one function using to call all the page and one antoher function to just call the view_table. This is the main pagination on my controller :
public function index() {
$this->show();
}
public function show() {
if ($this->session->userdata('logged_in') != "logging") {
redirect('control_auth');
} else {
$nama = $this->session->userdata('nama');
$start_row = $this->uri->segment(3);
$per_page = 3;
if (trim($start_row) == '') {
$start_row = 0;
};
$total_rows = $this->model_request->countPerUser($this->session->userdata('nama'));
$this->load->library('pagination');
$config['base_url'] = base_url() . 'control_closing/ajax_get_things_table'; //call using ajax
$config['total_rows'] = $total_rows;
$config['per_page'] = $per_page;
$config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>';
$config['full_tag_close'] = '</ul></div><!--pagination-->';
$config['first_link'] = TRUE;
$config['last_link'] = TRUE;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = 'Prev';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = 'Next';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="'.base_url().'control_closing/ajax_get_things_table/">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
$data['pengguna'] = $this->model_user->get_username($this->session->userdata('username'));
$data['data_request'] = $this->model_request->selectRequestPerUser($nama, $per_page, $start_row);
$this->load->view('view_closing', $data); // Load all page
}
}
Now, I create another function to calling just the table that refreshing bassed on pagintaion.
The code is like this :
public function ajax_get_things_table() {
if ($this->session->userdata('logged_in') != "logging") {
redirect('control_auth');
} else {
$nama = $this->session->userdata('nama');
$start_row = $this->uri->segment(3);
$per_page = 3;
if (trim($start_row) == '') {
$start_row = 0;
};
$total_rows = $this->model_request->countPerUser($this->session->userdata('nama'));
$this->load->library('pagination');
$config['base_url'] = base_url() . 'control_closing/ajax_get_things_table/';
$config['total_rows'] = $total_rows;
$config['per_page'] = $per_page;
$config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>';
$config['full_tag_close'] = '</ul></div><!--pagination-->';
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = 'Prev';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = 'Next';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="'.base_url().'control_closing/ajax_get_things_table/">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
$data['nama'] = $this->session->userdata('nama');
$data['level'] = $this->session->userdata('level');
$data['pengguna'] = $this->model_user->get_username($this->session->userdata('username'));
$data['data_request'] = $this->model_request->selectRequestPerUser($nama, $per_page, $start_row);
$_html = $this->load->view('view_closing_table', $data, TRUE); //Just laod the table
echo $_html;
}
}
I manipulated the pagination on CI using Jquery. The code is written in one view named view_closing like this :
$('.pagination ul li a').live("click", function() {
var this_url = $(this).attr("href");
$.post(this_url, {}, function(data) {
$('#things_table').html(data);
});
return false;
});
And, thank God, it success. like this :
Now, The new problem is rise : in Action field that named "belum selesai" is not working after pagination is work.
I know, because ajax calling http://localhost/tresnamuda/control_closing/ajax_get_things_table/4. But in link button is href ="#" . So link is not working coz the adress now is :http://localhost/tresnamuda/control_closing/ajax_get_things_table/4/#. But the link on jquery looked like this :
$(".linkStatus").click(function() {
var $row = $(this).closest("tr"); // Find row
var text = $row.find("#no_request").text(); // Find text
var status = $row.find("#status").text(); // Find text
var idText = text.substring(10);
var c = confirm("Apakah anda akan menutup request ini ? ");
if (c === true) {
$.ajax({
url: '<?php echo base_url() . 'control_closing/closingRequest/' ?>',
type: 'POST',
data: {id: idText},
success: function(obj) {
if (obj === "true") {
$('#isi').unblock();
location.reload();
}
}
});
} else if (c === false) {
$('#isi').unblock();
}
});
The link just working if the address is : http://localhost/tresnamuda/control_closing/
The problem is you're using Ajax to load the page content, then trying to attach an event to it, but you're event is trying to attach before the content is loaded. When the page gets to $(".linkStatus").click(function() { it scans the page for all elements with a class of linkstatus, but because your content hasn't loaded yet (the Ajax is still loading it) there's no element with that class name, so no events are set up.
What you need to do is either attach the event to something that already exists, like document, or attach the event after the page has loaded.
Either of these examples should solve your issue:
Attach the event to an existing element
You need to change
$(".linkStatus").click(function() {
to
$(document).on('click', '.linkStatus', function() {
Attach the event after the Ajax has run
First you need to wrap your event handler in a function, so you can call it.
function Start() {
$(".linkStatus").click(function() {
//... Code to run when linkStatus is clicked.
});
}
And then in the ajax success function where you're loading the table, at the end of the function add a call to Start() to attach your event.
I posted this code minutes 15 mins ago and I did get help for the preventDefault issue , but now I'm not getting my alerts to work , yet firebug doesn't show any error related to this code .. May i ask where I'm going wrong ,
<?php
header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header ("Expires: Sat 26 Jul 1997 05:00:00 GMT"); // Date in the past
require_once ("../_includes/functions.php");
?>
<link rel="stylesheet" title="Style CSS" href="../_reports/report_assets/cwcalendar.css" type="text/css" media="all" />
<script src="../_js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../_js/timer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../_reports/report_assets/calendar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#select').click(function(event){
$(':checkbox').prop("checked", true);
event.preventDefault();
});
$('#deselect').click(function(event){
$(':checkbox').prop("checked", false);
event.preventDefault();
});
$('#add').click(function() {
var field = '<input class="project_fields" type="text" size ="30" name = field_settings[] /> ';
var checkbox = '<input class ="checkbox" type ="checkbox" name ="check_field[]" /> ';
var delete_link = '<a class ="delete_link" style="text-decoration:none;" href="#"> Delete field </a> <br /><br />';
var input = field + checkbox + delete_link;
$('#input_fields').append(input);
});
$('#project_fields_submit').click(function(event) {
event.preventDefault();
var array_fields = new Array();
$('.checkbox').each(function() {
if($(this) .is(':checked')) {
array_fields.push('1');
alert('checked!!!');
}
else {
array_fields.push('0');
alert('not checked !!!')
}
});
$('#checkboxes').val(array_fields);
});
$('#edit_fields_submit').click(function(event) {
event.preventDefault();
var edit_fields = new Array();
$('.edit_check').each(function() {
if($(this) .is(':checked')) {
alert('checked !!!'); // doesn't alert anything after filling out the fields , though it used to
edit_fields.push('1');
}
else {
edit_fields.push('0');
alert('not checked !!!');
}
});
$('#edit_checkboxes').val(edit_fields);
alert($('#edit_checkboxes').val()); // doesn't work
});
var nextRowID = 0;
$('#add_edit').click(function() {
var id = ++nextRowID;
var new_field = '<input class ="class'+id+'" type="text" size ="40" name = edit_field_value[] value =""> ';
var new_checkbox = '<input class ="class'+id+'" type ="checkbox" name ="check_field[]" > ';
var delete_edit = '<a id ="'+id+'" class ="new_delete_edit" style="text-decoration:none;" href="#" > Delete field </a><br><br>';
var new_input = new_field + new_checkbox;
$('#new_input_fields').append(new_input);
$('#new_input_fields').append(delete_edit);
});
$('a.delete_edit').click(function(event) {
event.preventDefault();
var ID = $(this).attr('id');
var delete_field_id = 'edit_field'+ID;
var field_data = $('#'+ delete_field_id).val();
var project_id = $('#edit_project_id').val();
var string = {field : field_data, pid : project_id };
$.ajax({
type: "POST",
url: "_ajax/delete_field.php",
data: string,
success: function(data){
$('#'+ID).remove();
$('#'+delete_field_id).remove();
$('#new_check'+ID).remove();
}
});
});
$('.new_delete_edit').live('click', function(event) {
event.preventDefault();
var id = $(this).attr('id');
$('.class'+id).hide();
$('#'+id).hide();
});
});
</script>
<?php
if (isset($_GET['pid']) && isset($_GET['user_id'])) {
$id = $_GET['user_id'];
$pid = $_GET['pid'];
$show_id = $_GET['show_id'];
"
$query_settings ="SELECT project_settings FROM projects WHERE project_id ='$pid'";
$result_settings = mysql_query($query_settings);
$row_settings = mysql_fetch_array($result_settings,MYSQL_ASSOC);
if($row_settings['project_settings'] == NULL) {
echo "<h2> Project Settings </h2>";
echo "<br><br>";
echo " <b> Add fields </b>";
echo " ";
echo "<img id ='add' src='_assets/add.png' /><br><br><br>";
echo '<form action ="" method="post">';
echo'<input type="hidden" name="pid" value="'.$pid.'">';
echo "<input id ='checkboxes' type ='hidden' name ='checkboxes' value ='' >";
echo "<div id='input_fields'> </div>";
echo '<input id ="project_fields_submit" type ="submit" name ="project_fields_submit" class="button" value ="Save Settings" /><br><br>';
echo '</form>';
echo "<br><br><br><br><p></p>";
}
else {
echo "<h2> This Project Settings </h2>";
echo "<br><br><br><br>";
echo "<b> Add fields</b> <img id ='add_edit' src='_assets/add.png' /><br><br><br>";
$fields_data = unserialize($row_settings['project_settings']);
$i = 0;
echo '<form action ="" method="post">';
echo'<input id ="edit_project_id" type="hidden" name="edit_project_id" value="'.$pid.'">';
echo "<div id='new_input_fields'> </div>";
echo "<input id ='edit_checkboxes' type ='hidden' name ='edit_checkbox' value ='' >";
foreach ($fields_data as $key => $value) {
if($value =="1") {
echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size ='40' name = edit_field_value[] value ='".$key."' /> ";
echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' checked /> ";
echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";
} else {
echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size='40' name = edit_field_value[] value ='".$key."' /> ";
echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' /> ";
echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";
}
$i++;
}
echo '<input id ="edit_fields_submit" type ="submit" name ="edit_fields_submit" class="button" value ="Save Settings" /><br><br>';
echo '</form>';
}
echo '</div>';
echo '<div id="project-setting-results"></div><div class="clear"></div>';
echo '</div><!-- end fragment-6 -->';
}
?>
I suggest changing your design. Using <form> codes and posting isn't always the best way of sending your data to another (or the same) page for PHP processing. Instead, switch over to using AJAX code to submit your form.
For one thing, this will allow you to get away from the e.preventDefault kludges. A number of things will iron themselves out if you use the AJAX approach (instead of submitting a form). I can see that you're already using AJAX in your code, but if you're still uncomfortable with it you can check out these other answers:
Form not posting correctly
Place PHP results inside HTML Page
Update data in a DIV
Change your #edit_fields_submit input field from type="submit" to type="button" and use javascript/AJAX to:
Get all the values you would normally submit as a <form>;
Use AJAX to submit them to a PHP file for processing
In the success: function of the AJAX code block, use javascript to send the user over to whatever page you want them to see next
Example:
$('#edit_fields_submit').click(function(event) {
var edit_fields = new Array();
$('.edit_check').each(function() {
if($(this) .is(':checked')) {
alert('checked !!!'); // doesn't alert anything after filling out the fields , though it used to
edit_fields.push('1');
}
else {
edit_fields.push('0');
alert('not checked !!!');
}
});
$('#edit_checkboxes').val(edit_fields);
alert($('#edit_checkboxes').val()); // doesn't work
var field_data = //you know how to get these values
var project_id = //etc
var string = {field : field_data, pid : project_id };
$.ajax({
type: "POST",
url: "_ajax/myprocessor.php",
dataType: "json",
data: string,
success: function(data){
document.location.href='yournewpage.php';
}
});
});