dynamically changing id and name for replicated inputs on form - javascript

New:
the changing the id and name works, but what if there are more inputs? the codepen only has one, but the real project would have several ie component_date, component_owner, how do I set these input unique as well?
I have this form that has a portion of it that replicates. The part that replicates has several inputs that need to be unique. Currently when replicated the name and id change, I would like to keep the existing name and
id and just add on a incremented number. Currently the inputs that are replicable change. so that initially, name="component_name" and id ="input-name when replicated the new inputs have name componentName_0 componentID_0. I want the initial input to have _0 and then each replicated one have the next increment. so component 2 would have name="component_1 id="input-name_1 and so on.
Essentially I want to use the original component id and name but just add an incremented number to each. in addition it would be nice to have the inital have a number(0?) already affixed to it. currently when replicated the name and id change from what they are initially
here is a simplified codepen to show what I mean:
https://codepen.io/anon_guy/pen/VMZWWW?editors=1010
HTML:
<div class="wrapper">
<div class="panel panel-default" id="add-components">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_add_component; ?></h3>
</div>
<div class="panel-body" id="addon">
<div class="tab-content">
<div class="tab-pane active" id="tab-general">
<?php foreach ($languages as $language) { ?>
<div class="tab-pane" id="language<?php echo $language['language_id']; ?>">
<div class="form-group required">
<div class= "row">
<div class="col-sm-8 col-sm-push-1 form-group required" >
<label for="input-name<?php echo $language['language_id']; ?>"><?php echo $entry_name; ?></label>
<input type="text" name="component_name" placeholder="<?php echo $entry_name; ?>" id="input-name<?php echo $language['language_id']; ?>" class="form-control" value="<?php echo $component_name; ?>" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-2 col-sm-push-1 form-group required">
<div class="campaign-group form-group">
<div class="dropdown">
<button class="btn btn-primary pull-left dropdown-toggle" type="button" id="button-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_type;?><span class="caret"></span></button>
<ul class="campaign-form-type dropdown-menu">
<li class="campaign-dropdown-list">Direct Mail</li>
<li class="campaign-dropdown-list">Email</li>
<li class="campaign-dropdown-list">Event</li>
<li class="campaign-dropdown-list">Text Message</li>
<li class="campaign-dropdown-list">Letter</li>
<li class="campaign-dropdown-list">Postcard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-beginning"><?php echo $entry_campaign_start_date; ?></label>
<div class="input-group date required">
<input type="text" name="component_date" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-component_date" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_date_starting; ?></label>
<?php } ?>
</div>
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" ><?php echo $entry_owner; ?></label>
<select name="component_owner" id="component_owner">
<?php foreach ($users as $user) { ?>
<option value="<?php echo $user['username']; ?>"><?php echo $user['username']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<!--label class="control-label" for="input-code"><?php echo $entry_code; ?></label-->
<div class="input-code required">
<input type="text" name="campaign_code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-campaign_code" class="form-control" readonly />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
</div>
JS:
<script type="text/javascript">
let cloneList = [];
var i = 0;
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
clonedNode.id = i++;
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
</script>


It looks like you figured it out. appendChild was misspelled in your CodePen, I believe. As for the initial component having id 0, you could change the name and ID of the component to componentID_0 in your HTML, and then set var i = 1.


Use a loop on php, keep track of the counter, and concatenate the counter with the name or id.
E.g
for($i=0; $i<5; $i++){
echo '<div id="myID_"' . $i . 'andSoOn>'
}

Related

JQuery repeating fields messes with Bootstrap layout on removing rows

I have a form with a series of fields I want to make repeating. I have operational code however when I click on any remove button other than the first my code re-arranges the fields in the row like so:
My code is shown below, I think I'm going wrong with the :first selectors????
<div class="row">
<div class="col-12">
<div id="repeatingTides" class="row">
<div class="col-md-2 col-lg-4 tidePort">
<div class="form-group ">
<label for="tidePort">Tide Port</label>
<input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['tidePort']; ?>"/>
<span class="invalid-feedback"><?php echo $data['formData']['tidePort_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideHW">
<label for="hwTime">HW Time & Height</label>
<div class="input-group ">
<input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>"/>
<input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>"/>
<span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideLW">
<label for="lwTime">LW Time & Height</label>
<div class="input-group ">
<input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>"/>
<input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>"/>
<div class="input-group-append">
<button class="btn btn-ym-success btn-add-tide" type="button"><i class="fas fa-plus text-white"></i></button>
</div>
<span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var controlFormTides = $('#repeatingTides:first');
controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
.removeClass('btn-ym-success').addClass('btn-ym-danger')
.html('<i class="fas fa-minus text-white"></i>');
});
$(document).on('click', '.btn-add-tide', function(e)
{
e.preventDefault();
var controlFormTides = $('#repeatingTides:first'),
currentTideLW = $(this).parents('.tideLW:first'),
currentTidePort = $('.tidePort:first'),
currentTideHW = $('.tideHW:first'),
newTidePortEntry = $(currentTidePort.clone()).appendTo(controlFormTides);
newTideHWEntry = $(currentTideHW.clone()).appendTo(controlFormTides);
newTideLWEntry = $(currentTideLW.clone()).appendTo(controlFormTides);
controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
.removeClass('btn-ym-success').addClass('btn-ym-danger')
.html('<i class="fas fa-minus text-white"></i>');
}).on('click', '.btn-remove-tide', function(e)
{
e.preventDefault();
$('.tideHW:first').remove();
$('.tidePort:first').remove();
$(this).parents('.tideLW:first').remove();
return false;
});
</script>
</div>
</div>

In your current you were adding all divs separately instead you can put all 3 divs i.e : tidePort ,tideHW..etc in some outer div and simply use .clone() to clone that entire div and make change to same cloned div . Then, append this cloned div using $("#repeatingTides").append(controlFormTides) .
Now, to remove the divs you can simply use $(this).parents('.outer').remove(); this will remove entire div which was added.
Demo Code :
$(document).on('click', '.btn-add-tide', function(e) {
e.preventDefault();
//get first div insde repeatingtildes
var controlFormTides = $('#repeatingTides .outer:first').clone(true);
$(controlFormTides).find('button.btn')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide btn-ym-danger')
.html('<i class="fa fa-minus"></i>');//add remove class
$("#repeatingTides").append(controlFormTides)
}).on('click', '.btn-remove-tide', function(e) {
e.preventDefault();
$(this).parents('.outer').remove();//remove closest class .outer
return false;
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-12">
<div id="repeatingTides">
<!--added this div-->
<div class="outer row">
<div class="col-md-2 col-lg-4 tidePort">
<div class="form-group ">
<label for="tidePort">Tide Port</label>
<input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="1" />
<span class="invalid-feedback"></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideHW">
<label for="hwTime">HW Time & Height</label>
<div class="input-group ">
<input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>" />
<input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>" />
<span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideLW">
<label for="lwTime">LW Time & Height</label>
<div class="input-group ">
<input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>" />
<input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>" />
<div class="input-group-append">
<button class="btn btn-ym-success btn-add-tide" type="button"><i class="fa fa-plus "></i></button>
</div>
<span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
</div>
</div>
</div>
</div>

Jquery on click can't show the data from database

Please help, I have trouble in this Jquery onclick at my form, Why my data from database can't show ? example, I choose a category "jantung", that should be show data dokter where category is jantung, but if I use onchange at the form it's work.
This is a html where I click the category (if click this category will show the modal)
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link" data-toggle="modal" href="#poliklinikModal1" onclick="hmm('<?=$row->id_poli?>')">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
<br>
<br>
</div>
<?php endforeach; ?>
And This
<script>
function hmm(idnya) {
$(document).ready(function(){
document.getElementById('poli').value=idnya;
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
</script>
The Modal
<?php echo form_open('hal_user/add/')?>
<div class="form-group">
<label>Nama</label>
<input type="hidden" name="id_pasien" class="form-control" readonly="" value="<?=$this->session->userdata('id_pasien') ;?>">
<input type="text" name="nama_pasien" class="form-control" readonly="" value="<?php echo $this->session->userdata('nama_pasien') ; ?>">
</div>
<div class="form-group">
<label>Poli</label>
<select name="id_poli" id="poli" class="form-control">
<option value="">Select Poli</option>
<?php foreach ($poli as $p): ?>
<option value="<?php echo $p->id_poli;?>"><?php echo $p->nama_poli;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Dokter</label>
<select name="id_dokter" id="dokter" class="form-control" disabled="">
<option value="">Select Dokter</option>
</select>
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" name="tanggal" placeholder="Pilih Tanggal">
</div>
<div class="form-group">
<label>Waktu</label>
<a class="btn btn-primary form-control" data-toggle="collapse" href="#waktuanak" role="button" aria-expanded="false" aria-controls="collapseExample">
Pilih Waktu
</a>
<div class="collapse" id="waktuanak">
<div class="card card-body">
<div class="btn-group-toggle" data-toggle="buttons">
<?php foreach ($waktu as $row) :?>
<label class="btn btn-outline-primary">
<input type="radio" name="id_waktu" autocomplete="off" value="<?php echo $row->id_waktu; ?>"><?php echo $row->waktu;?>
</label>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-wd">Simpan</button>
Batal
</div>
<?php echo form_close(); ?>

Try this
On your view file no need to call function and try to use data-attr and add a class hmm on
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link hmm" data-toggle="modal" href="#poliklinikModal1" data-attr="<?=$row->id_poli?>">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
</div>
<?php endforeach; ?>
On your jquery try this
<script>
$(document).ready(function(){
$('.hmm').on('click',function(){
var idnya = $(this).attr('data-attr');
$('#poli').val(idnya );
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
Updated
$("#poli option[value='" + idnya+ "']").prop("selected", true);

Codeigniter - JSON Categories

I want to show Package Categories with JSON. I have 2 Tables. First one is Package Table, second one is packageService. First table is Package Table. I get all data from Package Table. Each Package has own features(services). I show this features Package below on Package View. I want to get all features(services) from packageServices. But I want to get this features by packageServiceId from packageService table with JSON such as [1][2] etc. In Package Table has a column as packageService equal packageServiceId on packageService Table. How can I write data from post form on Edit Page to Package Table with JSON?
Controller of Package:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Package extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('service_model');
}
public function index()
{
$this->lang->load('content', $this->session->userdata('userLang'));
//$viewData['packs'] = $this->db->get("package")->result();
$this->db->order_by('packageId','DESC');
$viewData['packs_P'] = $this->db->get_where('package',array('packageNameEn'=> 'Platinum'),1)->result();
$this->db->order_by('packageId','DESC');
$viewData['packs_S'] = $this->db->get_where('package',array('packageNameEn'=> 'Silver'),1)->result();
$this->db->order_by('packageId','DESC');
$viewData['packs_G'] = $this->db->get_where('package',array('packageNameEn'=> 'Gold'),1)->result();
$this->db->order_by('packageId','DESC');
$package_n = $this->input->post('packageNameEn');
$viewData['packs'] = $this->db->get_where('package',array('packageNameEn'=> $package_n),1)->result();
$this->load->view('package', $viewData);
}
public function edit($packageId)
{
$this->lang->load('content', $this->session->userdata('userLang'));
$viewData['packages'] = $this->db->where("packageId", $packageId)->get("package")->result();
$viewData['packs'] = $this->db->get("package")->result();
$this->load->view('package_edit', $viewData);
}
public function update($packageId) {
$this->lang->load('content', $this->session->userdata('people_lang'));
$data = array (
"packageEditUser" => $this->input->post("packageEditUser"),
"packageRev" => $packageId,
"packageNameEn" => $this->input->post("packageNameEn"),
"packagePrice" => $this->input->post("packagePrice"),
"packagePriceCut" => $this->input->post("packagePriceCut"),
"packageActive" => $this->input->post("packageActive"),
"packageEditDate" => date('Y-m-d H:i:s'),
);
$update = $this->db->insert("package", $data);
$viewData['services'] = $this->service_model->update_services($packageId);
$this->load->view('package',$viewData);
if($update) {
redirect(base_url("package"));
}else {
echo "Hata!";
}
}
public function add()
{
$this->lang->load('content', $this->session->userdata('userLang'));
$viewData['packages'] = $this->db->get("package")->result();
$this->load->view('package_add', $viewData);
}
public function insert() {
$this->lang->load('content', $this->session->userdata('people_lang'));
$this->load->view('package');
$data = array (
"packageAddUser" => $this->input->post("packageAddUser"),
"packageNameEn" => $this->input->post("packageNameEn"),
"packagePrice" => $this->input->post("packagePrice"),
"packagePriceCut" => $this->input->post("packagePriceCut"),
"packageActive" => $this->input->post("packageActive"),
"packageAddDate" => date('Y-m-d H:i:s'),
"packageEditDate" => date('Y-m-d H:i:s'),
"packageRev" => '0'
);
$insert = $this->db->insert("package", $data);
if($insert) {
redirect(base_url("package"));
}else {
echo "Hata!";
}
}
}
?>
Package View:
<section id="main-content">
<section class="wrapper site-min-height">
<!-- page start-->
<div class="row">
<!--price start-->
<div class="text-center feature-head">
<h1> PACKAGES </h1>
<p>Choose Your Special Package Plan. </p>
</div>
<?php foreach($packs_S as $get) { ?>
<div class="col-lg-3 col-sm-3">
<div class="pricing-table <?php if ($get->packageNameEn == 'Platinum') { echo 'most-popular'; } ?>">
<div class="pricing-head">
<h1> <?php echo $get->packageNameEn; ?> </h1>
<h5><del>€ <?php echo $get->packagePrice ?></del></h5>
<h2><span class="note">€</span><?php echo $get->packagePriceCut ?> </h2>
</div>
//json data will write here:
<ul class="list-unstyled">
<li>8 hours coverage</li>
<li>500 digital images</li>
<li>100 A3 Hard Copy</li>
<li>Bridal portrait with 11X14</li>
<li>Engagement portrait with 11X14</li>
<li>Income Tax included</li>
</ul>
//json data will write here/
<div class="price-actions">
<a class="btn" href="javascript:;">Get Now</a>
<a class="btn" href="<?php echo base_url("package/edit/$get->packageId"); ?>">Edit</a>
</div>
</div>
</div>
<?php } ?>
<?php foreach($packs_G as $get) { ?>
<div class="col-lg-3 col-sm-3">
<div class="pricing-table <?php if ($get->packageNameEn == 'Platinum') { echo 'most-popular'; } ?>">
<div class="pricing-head">
<h1> <?php echo $get->packageNameEn; ?> </h1>
<h5><del>€ <?php echo $get->packagePrice ?></del></h5>
<h2><span class="note">€</span><?php echo $get->packagePriceCut ?> </h2>
</div>
<ul class="list-unstyled">
<li>8 hours coverage</li>
<li>500 digital images</li>
<li>100 A3 Hard Copy</li>
<li>Bridal portrait with 11X14</li>
<li>Engagement portrait with 11X14</li>
<li>Income Tax included</li>
</ul>
<div class="price-actions">
<a class="btn" href="javascript:;">Get Now</a>
<a class="btn" href="<?php echo base_url("package/edit/$get->packageId"); ?>">Edit</a>
</div>
</div>
</div>
<?php } ?>
<?php foreach($packs_P as $get) { ?>
<div class="col-lg-3 col-sm-3">
<div class="pricing-table <?php if ($get->packageNameEn == 'Platinum') { echo 'most-popular'; } ?>">
<div class="pricing-head">
<h1> <?php echo $get->packageNameEn; ?> </h1>
<h5><del>€ <?php echo $get->packagePrice ?></del></h5>
<h2><span class="note">€</span><?php echo $get->packagePriceCut ?> </h2>
</div>
<ul class="list-unstyled">
<li>8 hours coverage</li>
<li>500 digital images</li>
<li>100 A3 Hard Copy</li>
<li>Bridal portrait with 11X14</li>
<li>Engagement portrait with 11X14</li>
<li>Income Tax included</li>
</ul>
<div class="price-actions">
<a class="btn" href="javascript:;">Get Now</a>
<a class="btn" href="<?php echo base_url("package/edit/$get->packageId"); ?>">Edit</a>
</div>
</div>
</div>
<?php } ?>
<?php foreach($packs as $get) { ?>
<div class="col-lg-3 col-sm-3">
<div class="pricing-table <?php if ($get->packageNameEn == 'Platinum') { echo 'most-popular'; } ?>">
<div class="pricing-head">
<h1> <?php echo $get->packageNameEn; ?> </h1>
<h5><del>€ <?php echo $get->packagePrice ?></del></h5>
<h2><span class="note">€</span><?php echo $get->packagePriceCut ?> </h2>
</div>
<ul class="list-unstyled">
<li>8 hours coverage</li>
<li>500 digital images</li>
<li>100 A3 Hard Copy</li>
<li>Bridal portrait with 11X14</li>
<li>Engagement portrait with 11X14</li>
<li>Income Tax included</li>
</ul>
<div class="price-actions">
<a class="btn" href="javascript:;">Get Now</a>
<a class="btn" href="<?php echo base_url("package/edit/$get->packageId"); ?>">Edit</a>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
Package Edit View:
<form class="cmxform form-horizontal tasi-form" id="signupForm" enctype="multipart/form-data" method="post" action="<?php echo base_url("package/update/$get->packageId"); ?>">
<?php } ?>
<!-- Hidden Classes -->
<div class="form-group" hidden>
<label class="col-sm-2 col-sm-2 control-label">The User Who Edit</label>
<div class="col-sm-10">
<input type="text" name="packageEditUser" class="form-control" value="<?php echo $this->session->userdata('people_id'); ?>" readonly>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-2 col-sm-2 control-label">Rev Id</label>
<div class="col-sm-10">
<?php foreach($packages as $get) { ?>
<input type="text" name="packageRev" class="form-control" value="<?php echo $get->packageId; ?>" readonly>
<?php } ?>
</div>
</div>
<!-- / Hidden Classes -->
<div class="form-group ">
<label for="username" class="control-label col-lg-2">Package Name: </label>
<div class="col-lg-10">
<?php foreach($packages as $get) { ?>
<input class=" form-control" type="text" value="<?php echo $get->packageNameEn; ?>" readonly />
<?php } ?>
</div>
</div>
<!-- Basic select -->
<div class="form-group">
<label class="control-label col-lg-3">Package Name <span class="text-danger">*</span></label>
<div class="col-lg-9">
<?php foreach($packages as $get) { ?>
<input type="text" name="packageNameEn" class="form-control" placeholder="Package Name" value="<?php echo $get->packageNameEn; ?>">
<?php }?>
</div>
</div>
<!-- /basic select -->
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Services:</label>
<div class="col-lg-6">
<div class="checkboxes">
<label class="label_check" for="checkbox-01">
<input name="sample-checkbox-01" id="checkbox-01" value="1" type="checkbox" /> I agree to the terms & conditions.
</label>
<label class="label_check" for="checkbox-02">
<input name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox" /> Please send me regular updates. </label>
<label class="label_check" for="checkbox-03">
<input name="sample-checkbox-02" id="checkbox-03" value="1" type="checkbox" /> This is nice checkbox.</label>
<label class="label_check" for="checkbox-04">
<input name="sample-checkbox-04" id="checkbox-04" value="1" type="checkbox" /> I agree to the terms & conditions.
</label>
<label class="label_check" for="checkbox-05">
<input name="sample-checkbox-05" id="checkbox-05" value="1" type="checkbox" /> Please send me regular updates. </label>
<label class="label_check" for="checkbox-06">
<input name="sample-checkbox-06" id="checkbox-06" value="1" type="checkbox" /> This is nice checkbox.</label>
<label class="label_check" for="checkbox-07">
<input name="sample-checkbox-07" id="checkbox-07" value="1" type="checkbox" /> I agree to the terms & conditions.
</label>
<label class="label_check" for="checkbox-08">
<input name="sample-checkbox-08" id="checkbox-08" value="1" type="checkbox" /> Please send me regular updates. </label>
<label class="label_check" for="checkbox-09">
<input name="sample-checkbox-09" id="checkbox-09" value="1" type="checkbox" /> This is nice checkbox.</label>
<label class="label_check" for="checkbox-10">
<input name="sample-checkbox-10" id="checkbox-10" value="1" type="checkbox" /> This is nice checkbox.</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<h5>Package Price:</h5>
<div class="input-group m-bot15">
<span class="input-group-addon"><i class="fas fa-euro"></i></span>
<?php foreach($packages as $get) { ?>
<input type="text" name="packagePrice" data-mask="€ 999.99" class="form-control" value="<?php echo $get->packagePrice; ?>">
<?php }?>
</div>
</div>
<div class="col-lg-6">
<h5>Discounted Price:</h5>
<div class="input-group m-bot15">
<span class="input-group-addon"><i class="fas fa-euro"></i></span>
<?php foreach($packages as $get) { ?>
<input type="text" name="packagePriceCut" data-mask="€ 999.99" class="form-control" value="<?php echo $get->packagePriceCut; ?>">
<?php }?>
</div>
</div>
</div>
<!-- Basic select -->
<div class="form-group">
<label class="control-label col-lg-3">Status <span class="text-danger">*</span></label>
<div class="col-lg-9">
<select name="packageActive" class="form-control">
<?php foreach($packages as $get) { ?>
<option value="<?php echo $get->packageActive; ?>" readonly><?php if($get->packageActive == 1) {echo 'Active';} else {echo 'Deactive';} ?></option>
<?php }?>
<option value="1">Active</option>
<option value="2">Deactive</option>
</select>
</div>
</div>
<!-- /basic select -->
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-success" type="submit">Edit Package</button>
<button class="btn btn-default" type="reset">Reset</button>
</div>
</div>
</form>

In codeingitor, you can get table data in form of JSON like this example
In model
function function_table_name(){
$query = $this->db->get('table_name');
return $query->result();
}
In Controller
public function employees()
{
$data = array();
$data = $this->model_name->function_table_name();
echo json_encode($data);
// echo '<pre>';
// print_r($data);
}
If you want to load this in view you can do like this.
Controller.php
$data = array();
$data['myJson'] = json_decode(file_get_contents('some_url'));
$this->load->view('my_view',$data);
view.php
<?php
//Access them like so
print_r($myJson);
// Rest of your code here to play with json
?>
</html>

How to find the closest image src path in jQuery

I want to get the path of the image. I have used the closest and find methods but the log shows undefined. How can I get the path? I am using $(this) keyword because I want to get the path of selected option.
<section class="regular slider">
<?php
foreach($todays_offers as $offer){
?>
<div class="product-container col-xs-12" >
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail" href="#" >
>
<img src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" ></a>
</div>
</div>
<div class="half">
<div class="product-right">
<div class="product-brand ">
<?php echo ucfirst($brand); ?>
</div>
<div class="product-name " style="height: 40px;
overflow: hidden;line-height:17px;">
<?php echo $product_name ?>
</div>
<?php
$sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";
$query1 = $this->db->query($sql);
$rowCount="SELECT * FROM materials where product_name='$product_name'";
$query2 = $this->db->query($rowCount);
if (!empty($query1)) {
if ($query2->num_rows() > 1) {
echo "<select name='netweight' class='netweight' >";
foreach ($query1->result() as $row) {
$net = $row->packing;
$retail = $row->retail_price;
$image = $row->image;
?>
<option id="<?php echo $row->id;?>" value="<?php echo $net;?>" data-retial="<?php echo $retail ?>" data-image='<?php echo base_url("images/$image") ?>''><?php echo $net .' - Rs.'. $retail ?>
</option>
<?php }
echo "</select>";
}
else
{
$net_weight=$offer->packing;
echo "<span>$net_weight</span>";
}
}
?>
<div class="price-box">
<span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo $our_price ?></span>
<?php
if($our_price<$price)
{ ?>
<span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo $price ?></span>
<?php } ?>
</div>
<div class="col-sm-6 col-xs-4 pad-0">
<div qa="qty" class="input-group"><span class="input-group-addon">Qty</span>
<input type="text" class="form-control quantity" value="1" maxlength="2" name="quantity" id="<?php echo $product_id ?>"></div>
</div>
<div class="col-sm-6 col-xs-6 pad-0">
<div class="product-button">
<?php if($pro_quantity>0){ ?>
<a class="btn btn-danger add_cart" type="button" title="Add to Cart" name="add_cart" style="font-size:12px;width:100%;" data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $our_price?>" data-productid="<?php echo $product_id ?>"
>ADD <span class="fa fa-shopping-basket"></span></a>
<?php }else{ echo "<span class='label label-danger'>Out of stock</span>";
}
?>
</div>
</div>
</div>
</div>
</div>
<?php }?>
</section>
</div>
JavaScript
<script>
$(document).ready(function(){
$(".netweight").change(function(){
var net = $("option:selected",this).val();
var id = $("option:selected",this).attr('id');
var retail = $("option:selected",this).attr('data-retial');
var image = $("option:selected",this).attr('data-image');
var path=$(this).closest('section.regular').find('img').attr('src');
console.log(path);
$(this).parent().find('.product-price').text(retail);
$(this).parent().find('a').attr('data-netweight',net);
$(this).parent().find('a').attr('data-price',retail);
$(this).parent().find('a').attr('data-productid',id);
});
</script>
Here is a sample image of select drop-down. If we choose the dro-down netweight, it fires the JavaScript event

.product-thumb is not a parent element(while traversing its ancestors in the DOM tree) of .netweight element. You need to traverse to closest .product-container and then find img tag in it:
$(".netweight").change(function(){
var path=$(this).closest('.product-container').find('img').attr('src');
console.log(path);
});
$(".netweight").change(function(){
var path=$(this).closest('section.regular').find('img').attr('src');
console.log(path);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='http://google.com/abc.png '>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
</select>
<div class="name"><?php echo name?> </div>
<div class="price"><?php echo price?> </div>
<div class="price"><?php echo brand?> </div>
</section>
</div>

Note:- According to closest() :-
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
But in your case .product-thumb is not an ancestor element of .netweight element.
You can do it with:-
$(this).closest('.block-inner').find('img').attr('src');
Demo example:-
$(document).ready(function(){
$(".netweight").change(function(){
var path=$(this).closest('.block-inner').find('img').attr('src');
console.log(path);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxofJbEzZjeldI2K5CsG4HjPH8BDlpWUNwVYhuDXUIAM0IMbQjTg'>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
</select>
<div class="name"><?php echo name?> </div>
<div class="price"><?php echo price?> </div>
<div class="price"><?php echo brand?> </div>
</section>
</div>

I think you should go back to the parent and then check the img :
$(".netweight").change(function(){
var path=$(this).parent().find('img').attr('src');
console.log(path);
});
Demo:
$(".netweight").change(function(){
var path=$(this).parent().find('img').attr('src');
console.log(path);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='WWW.SRCFOUND.COM'>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="<?php echo $value ?>" id="OPTION1">OPTION 1</option>
<option value="<?php echo $value ?>" id="OPTION2">OPTION 2</option>
</select>
<div class="name">NAME </div>
<div class="price">PRICE </div>
<div class="price">BRAND </div>
</section>
</div>

just replace following line
var path=$(this).closest('.slider').find('img').attr('src');

You can use something like this :
$(document).ready(function(){
$(".netweight").change(function(){
var path= $(this).next('a').find('img').attr('src');
console.log(path);
});

var path= $('.product-thumb').find('img').attr('src');

Show newly data using Ajax and jQuery

I am using Laravel, I have a following data view
<div class="content-inside-main">
<div class="content-inside" id="content-inside-feedback">
<div class="row header-content space-div">
<div class="col-lg-1"><h5>#</h5></div>
<div class="col-lg-1"><h5>Member Id</h5></div>
<div class="col-lg-4"><h5>Question</h5></div>
<div class="col-lg-4"><h5>Reply</h5></div>
<div class="col-lg-1"><h5>Replied by</h5></div>
<div class="col-lg-1"><h5>Options</h5></div>
</div>
<div>
<hr class="line-div"/>
</div>
<?php
$questions= \App\Question::all();
?>
<?php
foreach ($questions as $question):
$id = $question->id;
$member_id = $question->user_id;
$body = $question->message;
$status=$question->replied;
$reply=$question->reply;
$user_id=$question->replied_id;
$member=\App\Member::find($member_id);
$m_id=$member->id;
$m_name=$member->nick_name;
$m_reg_time=$member->reg_time;
$m_unreg_time=$member->unreg_time;
$m_status=$member->unreg;
$m_group_id=$member->group;
$group=\App\Group::find($m_group_id);
$m_group_name=$group->name;
if($id != NULL) {
?>
<div class="row content-messages" >
<input type="hidden" id="count" value="{{$id}}"/>
<div class="col-lg-1"><?php echo $id; ?></div>
<div class="col-lg-1"><?php echo $member_id; ?></div>
<div class="col-lg-4"><?php echo $body; ?></div>
<div class="col-lg-4">
<?php
if($status == 0){
?>
<div class="according-form-container" id="reply-feedback-form_<?php echo $id; ?>">
<a class="btn-link show-add-form-div" data-toggle="collapse" data-parent="#reply-feedback-form_<?php echo $id; ?>" href="#reply-feedback-form_content_<?php echo $id; ?>" >
Reply
</a>
<div id="reply-feedback-form_content_<?php echo $id; ?>" class="collapse collapse-add-form">
<form class="form" id="reply-feedback_<?php echo $id; ?>" enctype="multipart/form-data" method="post" action="addreply">
{{csrf_field()}}
<div class="control-group">
<label class="control-label" for="description">Message: </label>
<div class="controls">
<input type="hidden" name="id" id="id" value="{{$id}}"/>
<input type="hidden" name="member_id" id="member_id" value="{{$member_id}}"/>
<input type="hidden" name="user_id" id="user_id" value="{{Auth::id()}}"/>
<textarea name="description" id="feedback-message_<?php echo $id; ?>" class="input-block-level" required></textarea>
<br/><br/>
<button id="submitfeedback_<?php echo $id . '_' . $member_id; ?>" type="submit" class="btn feedback-reply-submit-btn">Send</button>
</div>
</div>
</form>
<div id='preview_feedback_<?php echo $id; ?>'>
</div>
</div>
</div>
<?php
} else {?>
<div class="col-lg-4">{{$reply}}</div>
<?php
}
?>
</div>
<div class="col-lg-1">
<?php
if($user_id != null){
$user_name= DB::table('admin')->where('id',$user_id)->value('name');
echo $user_name;
}else {
echo 'None';
}
?>
</div>
<div class="col-lg-1">
<button id="view_member" name="view_member" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#view_memeber"
>View
</button>
</div>
</div>
<hr class="line-div" />
<?php
}
endforeach;
?>
<div id="show"></div>
<div class="text-center navigation-paginator" id="paginator" >
</div>
</div>
I have another application.It fill question table anytime.I want to do If question table have new records,show them in this page without refreshing.
Like following screenshots:
before
after

You could send periodical ajax calls and then compare the results with the data you already have to add the new values. It could be something along this lines:
function query() {
$.ajax({
url: 'your/url',
success: function(data) {
var loadedValues = JSON.parse(data).values;
// Iterate only in the new values
for(i = existingValues.length; i < loadedValues.length; i++) {
$("#content-inside-feedback").append(/*HTML you want to add*/);
}
}
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() {
// First call, then it will be called periodically
setTimeout(query, 5000);
});

Categories

Resources