How to find the closest image src path in jQuery - javascript

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');

Related

Load php files in parent files also stored data from form

I want to load a php code in a page called index (parent page). The problem occurs when you press the filter button because the page does not load correctly (it also loads the parent page) and it does not show me the selected data from the form that I will want to query in the database.
The index page have the code:
<div class="row">
<div class="col-12">
<div class="card">
<div class="row mt-3">
<div class="col-md-1"></div>
<div class="col-md-4">
<select name="class" id="class_id" class="form-control select2" data-toggle = "select2" required>
<option value=""><?php echo get_phrase('select_a_class');?></option>
<?php
$classes = $this->db->get('classes')->result_array();
foreach($classes as $row):
?>
<option value="<?php echo $row['id'];?>"
<?php if ($class_id == $row['id']) echo 'selected';?>>
<?php echo $row['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
<div class="col-md-4">
<select name="exam" id="exam_id" class="form-control select2" data-toggle = "select2" required>
<option value=""><?php echo get_phrase('select_a_exam');?></option>
<?php
$exams = $this->db->get_where('exams' , array('session' => active_session()))->result_array();
foreach($exams as $row):
?>
<option value="<?php echo $row['id'];?>"
<?php if ($exam_id == $row['id']) echo 'selected';?>>
<?php echo $row['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-block btn-secondary" onclick="filter()" ><?php echo get_phrase('filter'); ?></button>
</div>
</div>
<div class="card-body tabulation_content">
<div class="empty_box">
<img class="mb-3" width="150px" src="<?php echo base_url('assets/backend/images/empty_box.png'); ?>" />
<br>
<span class=""><?php echo get_phrase('no_data_found'); ?></span>
</div>
</div>
</div>
</div>
</div>
The list page that i want to load
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<td ><?php echo $exam_id?></td>
<td ><?php echo $class_id?></td>
<td >333</td>
</tr>
</thead>
</table>
</div>
</div>
The JavaScript filter
<script>
$('document').ready(function(){
initSelect2(['#class_id', '#exam_id']);
});
function filter(){
var exam = $('#exam_id').val();
var class_id = $('#class_id').val();
if(class_id != "" && exam != "" ){
$.ajax({
type: 'POST',
url: '<?php echo route('tubulation/list/') ?>',
data: {class_id : class_id, exam : exam},
success: function(response){
$('.tabulation_content').html(response);
}
});
}else{
toastr.error('<?php echo get_phrase('please_select_in_all_fields !'); ?>');
}
}
</script>
[You can see the result here on this picture]

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);

How to input if radio button is true or false into Firebase database?

I have managed to push all text box input into Firebase but when I use the same method for the radio button I get:
"Uncaught Error: Reference.push failed: first argument contains undefined in property 'Tires.runflat'"
And I can't figure out how any variable is undefined so I am very confused about this although I am sure it is something simple.
html:
<body>
<div class="container">
<div class="content" style="background-color: white;">
<div id="heading">
<h1>Add A Tire<h1>
</div>
<form id="tires">
<div id="1" class="form-sections">
<div class="input-div">
<label for="width" class="label">Width</label>
<select name="width" id="width" type="select" class="input">
<option value="">---</option>
<?php foreach ($tireWidths as $width) {?>
<option value="<?php echo $width;?>"><?php echo $width;?></option>
<?php } ?>
</select></div>
<div class="easy-div">
<div>
<?php foreach ($width100s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width200s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width300s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#1-->
<div id="2" class="form-sections">
<div class="input-div">
<label for="aspect" class="label">Aspect Ratio</label>
<select class="input" name="aspect" id="aspect">
<option value="">---</option>
<?php foreach ($aspects as $aspect) {?>
<option value="<?php echo $aspect;?>"><?php echo $aspect;?></option>
<?php }?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($aspectsTop as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
<div>
<?php foreach ($aspectsBottom as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#2-->
<div id="3" class="form-sections">
<div class="input-div">
<label class="label" for="rim">Rim Diameter</label>
<select id="rim" name="rim" class="input">
<option value="">---</option>
<?php foreach ($rimDiameter as $rim){ ?>
<option value="<?php echo $rim;?>"><?php echo $rim;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($rimDiaTop as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
<div>
<?php foreach ($rimDiaBottom as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#3-->
<div id="4" class="form-sections">
<div class="input-div">
<label class="label" for="manufacturer">Manufacturer</label>
<select class="input" name="manufacturer" id="manufacturer">
<option value="">---</option>
<?php foreach ($manufacturers as $m) { ?>
<option value="<?php echo $m;?>"><?php echo $m;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div id="manu-group-one">
<?php foreach ($manufacturersOne as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-two">
<?php foreach ($manufacturersTwo as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-three">
<?php foreach ($manufacturersThree as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-four">
<?php foreach ($manufacturersFour as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-five">
<?php foreach ($manufacturersFive as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-six">
<?php foreach ($manufacturersSix as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#4-->
<div id="5" class="form-sections">
<div id="5a" class="inner-B"><div class="input-div"><label class="label" for="model">Model</label>
<select id="model" name="model" class="input">
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="5B" class="inner-A"><label class="label" for="weight">Shipping Weight</label><input type="text" name="weight" id="weight" class="input"></div><!--closing B -->
</div> <!-- closing div#5-->
<div id="6" class="form-sections">
<div id="6A" class="inner-C">
<div class="input-div">
<label class="label" for="trim">Trim</label>
<select name="trim" id="trim" class="input" >
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="6B" class="inner-D">
<label class="label" for="cost">Tire Cost</label>
<input name="cost" id="cost" class="input">
</div><!--closing B -->
<div id="6C" class="inner-E">PICTURES
<div class="pix">
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
</div>
</div><!--closing C -->
</div> <!-- closing div#6-->
<div id="7" class="form-sections">
<div id="7A" class="inner-D">
<div class="label">Run Flat?</div>
<div class="input"><input type="radio" id="runflat" name="runflat" value="yes"> Yes <input type="radio" name="runflat" value="no"> No </div>
</div><!--closing A -->
<div id="7B" class="inner-F">
<div class="label">Tread Depth</div>
<div class="input">
<input type="text" name="tread" id="tread" ><br><br>
<?php for($i=1; $i<11; $i++){ ?>
<z data-role="button" class="treadDepthVal"> <?php echo $i;?></z>
<?php } ?>
<?php for($i=11; $i<21; $i++){ ?>
<z data-role="button" class="treadDepthVal" data-val="<?php echo $i; ?>"> <?php echo $i;?></z>
<?php } ?> <br><z data-role="button" class="treadDepthVal" data-val=".25">.25 </z>
<z data-role="button" class="treadDepthVal" data-val=".5">.5</z>
<z data-role="button" class="treadDepthVal" data-val=".75">.75</z>
</div>
</div><!--closing B -->
<div id="7C" class="inner-F"><div class="label">DOT Date</div><div class="input"><input type="text" name="dotdate" id="dotdate" required><br>
<?php for($i=0; $i <10; $i++){ ?>
<z data-role="button" class="dotDateVal" data-val="<?php echo $i; ?>"><?php echo $i;?></z>
<?php } ?>
</div></div><!--closing C -->
<div id="7D" class="inner-F"><label class="label" for="patches">Number of Patches</label>
<div class="input">
<input type="text" name="patches" id="patches" required><br>
<?php for($i=0;$i<5;$i++){?>
<z data-role="button" class="patchVal" data-val="<?php echo $i; ?>" maxlength="4"><?php echo $i;?></z>
<?php
}?></div></div> <!--closing D-->
</div> <!-- closing div#7-->
<div id="8" class="form-sections">
<div id="8A" class="inner-G"><div class="label">Retail Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input" required>
</div>
<div id="8B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99 </div></div>
<div id="8C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="8D" class="inner-G">Not Applicable</div>
<div id="8E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="8F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutRetail;?></div></div>
<div id="8G" class="inner-G"><div class="label">Tire NOT listed on Cheapest Used Tires</div><div class="input"><input type="checkbox"
name="notListed" id="notListed"></div></div>
</div> <!-- closing div#8-->
<div id="9" class="form-sections">
<div id="9A" class="inner-G"><div class="label">Wholesale Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input" required></div>
<div id="9B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99</div></div>
<div id="9C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="9D" class="inner-G"><div class="label">Buyer&apos;s Bucks</div><div class="input">- $3.00</div></div>
<div id="9E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="9F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutWS;?></div></div>
<div id="9G" class="inner-G"><div class="label">Wholesale ONLY</div><div class="input"><input type="checkbox" name="notListed" id="notListed"></div></div>
</div><!--closing div#9-->
<input type="submit" id="submit" value="Add This Tire">
</form>
</div>
</div> <!-- closing container -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="/Emily-Projects/auth/tire/new-add-a-tire.js"></script>
javascript:
var config = {
apiKey: "AIzaSyAjzWcrR4nvdb4BtP1kMeBPx_-lGeYVkAg",
authDomain: "cutdb-41c5d.firebaseapp.com",
databaseURL: "https://cutdb-41c5d.firebaseio.com",
projectId: "cutdb-41c5d",
storageBucket: "cutdb-41c5d.appspot.com",
messagingSenderId: "768551466581"
};
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
//Add a Tire to Firebase
//vars for elements/inputs
var width = document.getElementById("width");
var aspect = document.getElementById("aspect");
var rim = document.getElementById("rim");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var weight = document.getElementById("weight");
var trim = document.getElementById("trim");
var cost = document.getElementById("cost");
var runflat = document.getElementById("runFlat")
var tread = document.getElementById("tread");
var dotdate = document.getElementById("dotdate");
var patches = document.getElementById("patches");
var retailPrice = document.getElementById("retailPrice");
var wholesalePrice = document.getElementById("wholesalePrice");
var notListed = document.getElementById("notListed");
var wholesaleOnly = document.getElementById("wholesaleOnly");
//RYDER PLEASE
//insert the pictures into the DB
//make a variable that accesses the pictures input
//insert the radio button value into the DB (input name: runflat)
//make a variable that accesses the radio button
//make the "tread depth" decimal buttons (.25, .5, and .75) append to the
number chosen from whole number buttons (1-20) to all insert into single
cell of the table and show in the input#tread
//make a radio button required
//figure out how to append the four inputs of the DOT DATE together to make
one 4-digit number and show in the input#dotdate
//checkbox inputs for notListed, wholesaleOnly
//easy buttons
//classes : width-sm, aspectVal, rimVal, manVal, modelVal, trimVal, treadDepthVal, dotDateVal, patchVal
$('.width-sm').click(function(){
$(width).val($(this).data('val')).trigger('change');
})
$('.aspectVal').click(function(){
$(aspect).val($(this).data('val')).trigger('change');
})
$('.rimVal').click(function(){
$(rim).val($(this).data('val')).trigger('change');
})
$('.manVal').click(function(){
$(manufacturer).val($(this).data('val')).trigger('change');
})
$('.modelVal').click(function(){
$(model).val($(this).data('val')).trigger('change');
})
$('.trimVal').click(function(){
$(trim).val($(this).data('val')).trigger('change');
})
//MAKE WORK
$('.patchVal').click(function(){
$(patches).val($(this).data('val')).trigger('change');
})
//APPEND THESE???
$('.treadDepthVal').click(function(){
$(tread).val($(this).data('val')).trigger('change');
})
$('.dotDateVal').click(function(){
$(dotdate).val($(this).data('val')).trigger('change');
})
//btns
var submitBtn = document.getElementById("submit");
//Function: submitClick();
var form = document.getElementById("tires");
$(form).on('submit', event => {
event.preventDefault();
window.alert("works");
const w = $(width).val();
const a = $(aspect).val();
const r = $(rim).val();
const m = $(manufacturer).val();
const mo = $(model).val();
const sw = $(weight).val();
const t = $(trim).val();
const c = $(cost).val();
const rf = $(runflat).val();
const td = $(tread).val();
const d = $(dotdate).val();
const p = $(patches).val();
const rp = $(retailPrice).val();
const wp = $(wholesalePrice).val();
firebase.database().ref('/Tires').push({
"width": w,
"aspect": a,
"rim": r,
"manufacturer": m,
"model": mo,
"weight": sw,
"trim": t,
"cost": c,
"runflat": rf,
"tread": td,
"dotdate": d,
"patches": p,
"retailprice": rp,
//"wp": wp
});
});
//picture code
var j = 0;
function previewFiles() {
if (j < 9) {
j++;
alert(j);
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
} else {
alert("I want to get in here");
document.getElementById("browse").disabled = true;
}
}
} else {
// No user is signed in.
alert("User is not Signed In");
}
});
The line:
var runflat = document.getElementById("runFlat")
should be changed to:
var runflat = document.getElementById("runflat")
This is because IDs in JavaScript are case-sensitive.
On a side note, I don't think the line const rf = $(runflat).val(); will work. It will simply set rf to "on" every time. The more correct way to do it would be something like:
const rf = $("input[id='runflat']:checked").val();
This will set rf to "on" if the radio button is checked and to undefined if it is not. If you want to change these values you can use the Elvis operator:
const rf = $("input[id='runflat']:checked").val() ? "yes" : "no";
Now rf will be set to "yes" if the radio button is checked and to "no" if it is not.

dynamically changing id and name for replicated inputs on form

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>'
}

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