I am working on "sort tables" in ajax jquery with php,My sorting
function working properly but need to hide/show "sorting images", Right now one sided (desc)
sorting is working because unable to replace/change sorting image and status,
I just want whenever i click on "upper" icon then its status(asc) should pass and "down" image should display and if i click on "down" icon then status should pass and "up" icon should display,
Here is my code
<table border='1' width='100%' style='border-collapse: collapse;' id='postsList'>
<thead>
<tr>
<th>S.no</th>
<th class="column_sort" id="name" data-order="desc" href="#">Title
<img id="ASC" datas-order="desc" src="<?php echo base_url();?>/assets/img/UpArrow.png">
<img id="DESC" datas-order="asc" src="<?php echo base_url();?>/assets/img/DownArrow.png" style="display:none;">
</th>
<th class="column_sort" id="symbol" data-order="desc" href="#">Symbol
<img id="ASC" datas-order="desc" src="<?php echo base_url();?>/assets/img/UpArrow.png">
<img id="DESC" datas-order="asc" src="<?php echo base_url();?>/assets/img/DownArrow.png" style="display:none;">
</th>
</tr>
</thead>
<tbody></tbody>
</table>
Here is my php script code,Where i am wrong ?
<script>
$(document).ready(function(){
$(document).on('click', '.column_sort', function(){
var column_name = $(this).attr("id");
var order = $(this).data("order");
var arrow = '';
var PageNumber= $("#pagination").find("strong").html();
if(order == 'desc')
{
arrow = ' <span class="glyphicon glyphicon-arrow-down"></span>';
}
else
{
arrow = ' <span class="glyphicon glyphicon-arrow-up"></span>';
}
$.ajax({
url:'<?=base_url()?>/Main/fetch_details/',
method:"POST",
data:{column_name:column_name, order:order ,PageNumber:PageNumber},
success:function(data)
{
$("#postsList tr:not(:first)").remove();
$("#postsList2").show();
$("#postsList2").html(data);
$('#'+column_name+'').replace('<img src="<?=base_url()?>/assets/img/DownArrow.png"/>');
return false;
}
})
});
});
</script>
Toggle:
$("#postsList .column_sort").on("click", "img" ,function(e) {
$(this).sibling().toggle()
$(this).toggle()
})
or have just one image
$("#postsList").on("click","[data-order]",function(e) {
this.src = this.dataset.order === "desc" ? "/assets/img/UpArrow.png" : "/assets/img/DownArrow.png"
})
Related
I have a form with three input fields named sl no ,stationerytype and stationeryqty There is a symbol + and - to append or delete these three field on click. I am trying the sl no field to generate Sl no automatically when i click the plus symbol and if I click - it will automatically adjust the sl no. but My sl no field remains blank .my code is
<table class="table table-bordered" id="tb" >
<tr class="tr-header">
<th class= "col-md-1" align="centre">Sl.No.</th>
<th class= "col-md-6" align="centre">STATIONARY TYPE</th>
<th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
<th class= "col-md-1"><span class="glyphicon glyphicon-plus"></span></th>
</tr>
<tr>
<?php
for($i=1;$i<=1;$i++)
{
?>
<td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>" ></td>
<td><input type="text" style="text-decoration: none" name="stationerytype" ></td>
<td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
<?php }?>
</table>
<button type="submit" name="add" class="btn btn-info" align="middle" >ADD </button>
<script>
var max = 4;
var count = 1;
$(function(){
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
count++;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
</div>
Thanks for any suggestion :-)
in your addMore function after erasing data from the newly created row just add one more line to set the serial number in first td.
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
debugger;
data.find("input").val('');
//set the count value in first td
data.find("input")[0].value = ++count;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
working javascript fiddle example
Just try to make it simple.
I'm trying to show data in my data table when I click a dropdown value
I'm using ajax to get the data from my controller
everything works fine except the results isn't showing in my view even the status code shows 200 ok
here's my Model
function tampil_renja(){
$this->db->distinct();
$this->db->select
(
'lkp_program.progskpd_id AS prog_id,
CONCAT(msr_mstrurusan.uru_kode, '.', lkp_program.progskpd_kode) AS prog_kode,
lkp_program.progskpd_prog_uraian as prog_uraian');
$this->db->from('msr_mstrurusan');
$this->db->join('lkp_program', 'msr_mstrurusan.uru_id = lkp_program.progskpd_ursid');
$this->db->join('lkp_kegiatan', 'lkp_program.progskpd_id = lkp_kegiatan.kegskpd_prog_id');
$this->db->join('mnv_keg_renja', 'lkp_kegiatan.kegskpd_id = mnv_keg_renja.tar_keg_id');
$this->db->where('mnv_keg_renja.tar_keg_id is NOT NULL', NULL, FALSE);
$this->db->order_by("lkp_program.progskpd_id", "asc");
return $this->db->get();
}
here's my ajax code within the view
<div class="container-fluid">
<header>
<h3 class="mb-2">Renja</h3>
</header>
<div class="card-body">
<div class="table-responsive" style="margin-bottom: 1px;">
<?php
if (count($skpd) > 0) {
?>
<label class="col-sm-1 control-label">OPD</label>
<div class="col-sm-5">
<select id="skpd" name="skpd" class="form-control input-sm">
<option value="0">-- Pilih Perangkat Daerah--</option>
<?php
foreach ($skpd as $pd) {
echo "<option value='" . $pd->uk_kowil . "#" . $pd->uk_id . "'>" . strtoupper($pd->uk_nama) . "</option>";
}
?>
</select>
</div>
<?php
}
else {
?>
<input type='hidden' name='skpd' id='skpd' value='<?php
?>' />
<?php
}
?>
<div id="listskpd" class="col-sm-1">
<i id="rldspin" style="margin-top:5px"></i>
</div>
<div id="jml_angg" class="text-right" style="padding-top: 8px;font-size: 13px;margin-right: 15px;">
</div>
</div>
<table id="list_target" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th rowspan="3" class="text-center text-middle" style="width:1%;">No</th>
<th rowspan="3" class="text-center text-middle" style="width:4%;">Kode Rekening</th>
<th rowspan="3" class="text-center text-middle" style="width:27%;">Program/Kegiatan</th>
<th rowspan="3" class="text-center text-middle" style="width:20%;">Indikator Kinerja program (outcome)/ kegiatan (output) </th>
<th colspan="7" class="text-center text-middle" style="width:30%;">Target Renja [berdasarkan DPA] SKPD pada Tahun</th>
</tr>
<tr>
<th rowspan="2" class="text-center text-middle" style=""> Satuan</th>
<th colspan="2" class="text-center text-middle" style="">Target Triwulan 1</th>
<th colspan="2" class="text-center text-middle" style="">Target Triwulan 2</th>
<th colspan="2" class="text-center text-middle" style="">Target Triwulan 3</th>
<th colspan="2" class="text-center text-middle" style="">Target Triwulan 4</th>
<th rowspan="2" class="text-center text-middle" style="">Target Anggaran</th>
</tr>
<tr>
<th class="text-center text-middle" style="">Kin</th>
<th class="text-center text-middle" style="">Keu</th>
<th class="text-center text-middle" style="">Kin</th>
<th class="text-center text-middle" style="">Keu</th>
<th class="text-center text-middle" style="">Kin</th>
<th class="text-center text-middle" style="">Keu</th>
<th class="text-center text-middle" style="">Kin</th>
<th class="text-center text-middle" style="">Keu</th>
</tr>
</thead>
<tbody id="datatarget">
</tbody>
</table>
</div>
</div>
</article>
<script type="text/javascript" language="javascript" src="<?php echo base_url().'assets/vendor/jquery/jquery.js'?>"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url().'assets/vendor/datatables/jquery.dataTables.js'?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#skpd').change(function(){
var arrval = $(this).val().split("#");
var kowil = arrval[0];
var idpd = arrval[1];
if(idpd != 0){;
tampil_data_renja(kowil, idpd);
} else {
$('#datatarget').DataTable.Destroy();
$('#datatarget').DataTable.Draw();
$('#datatarget').DataTable.Destroy();
}
});
function tampil_data_renja(kowil, idpd){
$.ajax({
type : 'ajax',
url : '<?php echo base_url()?>renja/tampil_renja/',
async : false,
dataType : 'json',
success : function(data){
var html = '';
var i;
alert(data.length);
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+(i+1).toString()+'</td>'+
'<td>'+data[i].prog_kode+'</td>'+
'<td>'+data[i].prog_uraian+'</td>'+
'</tr>';
}
$('#datatarget').html(html);
},
error: function(){
alert('Could not load the data');
}
});
}
and this is the controller
function tampil_renja(){
echo json_encode( $this->m_data->tampil_renja()->result() );
}
JSON result in the network tab of chrome dev tools
[{"prog_id":"1","prog_kode":"6.01.0118","prog_uraian":"Program Koordinasi, pembinaan dan penyelenggaraan pemerintahan, ketentraman dan ketertiban umum, perekonomian, kesejahteraan sosial dan pembangunan"},{"prog_id":"2","prog_kode":"6.01.0118","prog_uraian":"Program Koordinasi, pembinaan dan penyelenggaraan pemerintahan, ketentraman dan ketertiban umum, perekonomian, kesejahteraan sosial dan pembangunan"}]
any help and guide would be appreciated
sorry for my bad english by the way
Please try the following code:
Changes made are:
commented datatype in the AJAX
parse response of success function as JSON.
$.ajax({
type : 'get', // edit 1
url : '<?php echo base_url()?>renja/tampil_renja/',
async : false,
//dataType : 'json', //change over here
success : function(data){
data = JSON.parse(data); //change over here
var html = '';
var i;
alert(data.length);
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+(i+1).toString()+'</td>'+
// '<td>'+data[i].prog_id+'</td>'+
'<td>'+data[i].prog_kode+'</td>'+
'<td>'+data[i].prog_uraian+'</td>'+
'</tr>';
}
$('#datatarget').html(html);
},
error: function(){
alert('Could not load the data');
}
})
You have to redraw the datatable after the element is updated on ajax call success :
//fungsi tampil barang
function tampil_data_renja(kowil, idpd){
// var requrl = '<?php echo base_url()?>renja/tampil_renja/'+kowil+'/'+idpd;
$.ajax({
type : 'ajax',
// url : '<?php echo base_url()?>renja/tampil_renja/'+kowil+'/'+idpd,
url : '<?php echo base_url()?>renja/tampil_renja/',
async : false,
dataType : 'json',
success : function(data){
var html = '';
var i;
// console.log(data.length);
alert(data.length);
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+(i+1).toString()+'</td>'+
// '<td>'+data[i].prog_id+'</td>'+
'<td>'+data[i].prog_kode+'</td>'+
'<td>'+data[i].prog_uraian+'</td>'+
'</tr>';
}
$('#datatarget').html(html);
$('#list_target').DataTable.Draw(); // redraw the datatable
},
error: function(){
alert('Could not load the data');
}
});
// return alert(kowil);
}
I'm trying to get all checked checkbox values and parse them to my php functin using AJAX.
I use foreach to try and get each id of the checked checkbox's.
My problem is that when I try and update the database, it doesn't return '1' which I echo upon success.
When I take my foreach code out, it works.
My delete button is :
<form class="form -dark" id="form-inline" method="POST">
<div class="btn-group">
<button type="button" onclick="deleteSelectedTokens()" class="btn -dark" style="margin-left: 5px;" title="Delete all selected tokens"><i class="fa fa-trash"> </i></a>
</div>
</form>
My checkbox html/php code is :
<table class="table -dark -striped">
<thead>
<tr>
<th style="text-align: center;"><input type="checkbox" id="selectall"/></th>
<th style="text-align: center;">Token</th>
<th style="text-align: center;">Date/Time Generated</th>
<th style="text-align: center;">Status</th>
<th style="text-align: center;">Durbaility</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$username = $_SESSION['username'];
$token_result = mysqli_query($con, "SELECT id, token, used, time_generated, durability FROM tokens WHERE user_id = '$username' ORDER BY used");
if(mysqli_num_rows($token_result) > 0) {
while($token_row = mysqli_fetch_array($token_result)) {
$result = array($token_row['durability']); $sub_struct_month = ($result[0] / 30) ; $sub_struct_month = floor($sub_struct_month); $sub_struct_days = ($result[0] % 30); $sub_struct = "<i>".$sub_struct_month."</i> month(s) <i>".$sub_struct_days."</i> day(s)";
echo '
<tr style="text-align: center;">
<td>
<center><input type="checkbox" id="checkedTokens" class="checkbox" value='.($token_row['id']).'></center>
</td>
<td>
'.$token_row['token'].'
</td>
<td>
'.($token_row['time_generated']).'
</td>
<td>
'.($token_row['used'] == "0" ? "<span class='label label-primary'><i class='fa fa-check'></i> Valid </span>" : "<span class='label label-primary'><i class='fa fa-fa fa-times'></i> Used </span>").'
</td>
<td>
'.$sub_struct.'
</td>
';
} }else{ ?>
<tr>
<td colspan="12" style="padding: 30px;">
<div class="alert -dark">
<div class="alert-icon _text-danger">
<i class="fa fa-exclamation-circle"></i>
</div>
No tokens in your account
</div>
</td>
</tr>
<?php } ?>
</tr>
</tbody>
Notice I need to use foreach to get each check checkbox value so I can remove the selected ones when I press the delete button.
My AJAX send to PHP function is :
<script>
function deleteSelectedTokens() {
var selectedTokens = document.getElementById("checkedTokens").value;
$.ajax({
type: "POST",
url: "includes/form_submit.php",
data: {
deleteSelectedTkns: true,
checked_id: selectedTokens
},
success: function(msg){
if(msg == 1) {
update_myDays_success();
} else {
general_error_forms();
}
},
});
return false;
}
</script>
I think the problem is the Javascript... when I get the value of the checkboxes and post them, i think it's only getting 1 value inside the checkedTokens id.
My php receive code (this is not the problem) :
$username = $_SESSION['username'];
$selectedTokens = mysqli_real_escape_string($con, $_POST['checked_id']);
foreach($selectedTokens as $id) {
$doUpdateDelete = 'DELETE FROM tokens WHERE id = "'.$id.'" AND user_id = "'.$username.'"';
$result = $con->query($doUpdateDelete) or die("Error");
if($result)
{
echo '1';
}
else
{
echo 'Failed';
}
}
My console.log has not errors. Like I said, i think it's the javascript code for getting the value of my checkbox's not getting all the values.
You can send json of checked items:
<script>
var selectedTokens = [];
$('#checkedTokens:checked').each(function(key, value){
selectedTokens.push($(value).val());
});
$.ajax({
type: "POST",
url: "includes/form_submit.php",
data: {
deleteSelectedTkns: true,
checked_id: JSON.stringify(selectedTokens)
},
success: function(msg){
if(msg == 1) {
update_myDays_success();
} else {
general_error_forms();
}
},
});
</script>
And your php code mysqli_real_escape_string give only string we should convert json to get array:
$selectedTokens = json_decode($_POST['checked_id']);
foreach($selectedTokens as $id) {
$doUpdateDelete = 'DELETE FROM tokens WHERE id = "'.$id.'" AND user_id = "'.$username.'"';
$result = $con->query($doUpdateDelete) or die("Error");
if($result)
{
echo '1';
}
else
{
echo 'Failed';
}
}
In html it is not allowed to assign the same id to multiple tags. (As already mentioned in the comments.)
If you place your checkboxes on a <form id="some_id">, and give every checkbox a unique name and id, you can use the function $('#some_id').serialize() to get the data of the form and post it to the server.
I'm trying to remove row from my dynamic table. I've success to .append new row from JavaScript.
JavaScript
$(document).ready(function() {
// table #pos add-row
$(".add-row").keypress(function(e) {
if (e.which == 13) {
var barcode = $("#barcode").val();
$.ajax({
type: "post",
url: "production/ajax/load.php",
dataType: "json",
data: {
barcode: $("#barcode").val()
},
success: function(data) {
$("#pos tbody").append(data['content']);
}
});
}
});
// Find and remove selected table rows
$(".delete-row").click(function(){
alert('Success');
$("#pos tbody tr").remove();
});
})
load.php
<?php
if (isset($_POST['barcode'])) {
require '../controller/connection/connection-management.php';
$barcode = $_POST['barcode'];
$status = false;
$sql = "SELECT code, title, wri_name, pub_name, year, main_category.main_category, category.category, call_number, pusat_penerbit, mrican, paingan, selling_price, discount FROM product, writer, publisher, main_category, category WHERE product.writer = writer.writer AND product.publisher = publisher.publisher AND product.main_category = main_category.main_category AND product.category = category.category AND code = '{$barcode}' ORDER BY title";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) == 1) {
while($row = mysqli_fetch_assoc($result)) {
$barcode = $row['code'];
$title = $row['title'];
$sellingPrice = number_format($row['selling_price'], 0, ',', '.');
$quantity = 1;
$discount = $row['discount'];
$total = number_format((($row['selling_price'] - ($row['selling_price'] * ($discount / 100))) * $quantity), 0, ',', '.');
$append = "<tr class='pointer'>
<td align='right'><a href='javascript:;' class='delete-row'><i class='fa fa-trash'></i></a></td>
<td><small>{$barcode}</small></td>
<td><div style='text-align: justify'><strong>{$title}</strong></div></td>
<td align='right'>{$sellingPrice}</td>
<td align='center'><input id='quantity' type='text' class='form-control' style='text-align:center' value='1'></td>
<td align='center'><input type='text' class='form-control' style='text-align:center' value='{$discount}'></div></td>
<td align='right'>{$total}</td></td>
</tr>";
}
$status = true;
}
$data = array(
"status" => $status,
"content" => $append
);
echo json_encode($data);
}
?>
pos.php it's html table
<div class="x_title">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="delete-row btn btn-primary"><i class="fa fa-pencil-square-o"></i></button>
</span>
<input name="barcode" id="barcode" type="text" class="add-row form-control" placeholder="Enter item name or scan barcode">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Receive</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Receive</li>
<li>Return</li>
<li>Purchase Order</li>
<li>Transfer</li>
<li>Store Account Payment</li>
</ul>
</div>
</div>
</div>
<div class="x_content">
<div class="table-responsive">
<table name="pos" id="pos" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th style="text-align:center" class="column-title col-sm-7" colspan="3">Item Name </th>
<th style="text-align:right" class="column-title col-sm-1">Cost </th>
<th style="text-align:center" class="column-title col-sm-2">Qty. </th>
<th style="text-align:center" class="column-title col-sm-1">Disc % </th>
<th class="column-title col-sm-1" style="text-align:right">Total </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
So when I add new row in the table, everything works fine like this picture:
But when I click trash icon with class='delete-row', that's is not working. So I think, when I append data to table tbody it's not read class or id from the new row.
Please someone help. I can't find any similar questions like mine. I just want to know, how to remove table row when I click trash icon from JavaScript.
You have two issues here (which is why I have not voted to close as a duplicate). Firstly you need to use a delegated event handler on the .delete-row element as it is appended to the DOM after load. Your current code does nothing as you attempt to attach the event handler before the element exists.
Secondly, you need to use DOM traversal to remove only the parent tr of the clicked button. At the moment your code would remove all rows. Try this:
$('#pos').on('click', '.delete-row', function() {
$(this).closest('tr').remove();
});
Did you tried delegate?
$(document).delegate('.delete-row', 'click', function(){
//your remove code here
});
You can also use on (for jquery versions 1.7.1+)
$(document).on('click', '.delete-row', function(){
//your remove code here
});
I am developing a program in which I use datatables, which loads dynamically with data using query and adding two buttons. It works very fine.
When I click first button an image is opened in modal. when I click same button, Image opens twice. This procedure continues as no of times I clicked on same button no of times images opens back to back.
My php code is like this:
<div class="container-fluid">
<div class="col-lg-12" style="margin-top:30px; ">
<div class="panel panel-primary">
<div class="panel-heading clickable">
<h3 class="panel-title">District Wise Sorting List TP Scheme Details</h3>
</div>
<div class="panel-body" style="overflow-x:scroll">
<table class="table table-bordered" id="tps_det">
<thead>
<tr class="success">
<th>Sr ID</th>
<th>Name</th>
<th>District</th>
<th>City</th>
<th>Button</th>
<th>Redirect</th>
</tr>
</thead>
<?php do { ?>
<tr>
<td>
<?php echo $row_Recordset1[ 'id']; ?>
</td>
<td>
<?php echo $row_Recordset1[ 'name']; ?>
</td>
<td>
<?php echo $row_Recordset1[ 'district']. "</br>" ; ?>
</td>
<td>
<?php echo $row_Recordset1[ 'city']. "</br>" ; ?>
</td>
<td>
<?php if( $row_Recordset1[ 'buttonoff']=='yes' ) { echo '<button type="button" id="'.$row_Recordset1[ 'name']. '" name="btn_'.$row_Recordset1[ 'name'].
'" onClick="funct(this);" ><img src="../data/green_circle.png" style="text-align:center;width:25px;height=25px;" /></button>'; } if( $row_Recordset1[ 'buttonoff']=='no' ) { echo '<button type="button" id="no_off" name="btn_'.$row_Recordset1[ 'name']. '" ><img src="../data/red_circle.png" style="text-align:center;width:25px;height=25px;" /></button>'; } ?>
</td>
<td>
<button type="button" id="sub" name="redirect" onClick="funct(this);">Redirect</button>
</td>
</tr>
<?php //$i++; } while ($row_Recordset1=p g_fetch_assoc($Recordset1)); ?>
</table>
</div>
</div>
</div>
</div>
in javascript procedure, I first check image is present at given source, if it presents then approproate image opens in modal and image is not present then default image is loads in modal.
My problem is that, when I click same button Image should opens only once.
How I do this.
My javascript code is like this
theTable = $('#dtble').dataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": false,
"info": true,
"autoWidth": true
});
function funct(value) {
var id1 = $(value).attr('id');
var idname = $(value).attr('name');
$('#dtble tbody').on('click', 'button', function() {
var data = theTable.api().row($(this).parents('tr')).data();
var name = data[1];
var id = data[0];
if (id1 == 'sub' && idname == 'redirect') {
$.ajax({
type: "POST",
url: "../select/get_id.php",
data: 'name=' + name,
success: function(data1) {
//alert(data1);
window.location = '../index_new.php?var=' + data1 + '&name=' + name;
}
});
}
if (idname == "btn_" + name && id1 == id) {
var image_url = "../photo/" + name + ".JPG";
$.get(image_url)
.done(function() {
BootstrapDialog.show({
title: 'Name:- ' + name,
message: '<img class="image_nm" id="image_nm" src="../photo/' + name + '.JPG" height=800 width=500 style="margin-left:30px;"> '
});
}).fail(function() {
BootstrapDialog.show({
title: 'Name:- ' + name,
message: '<img class="image_nm" id="image_nm" src="../photo/default.png" height=800 width=500 style="margin-left:30px;"> '
});
});
}
});
}