Develop Reference

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]

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

ajax removing everything after space

In my form select field I use ajax to list my options, but when submitting to the controller everything after space will be removed.
<div class="col-md-9">
<form class="" action="<?php echo base_url(); ?>Sms/add" method="post">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Compose New Message</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<input class="form-control" value="<?php echo set_value('title'); ?>" name="title" placeholder="Subject: 20 characters" maxlength="20">
</div>
<div class="form-group">
<textarea id="compose-textarea" name="message" class="form-control" style="height: 150px" placeholder=" Enter your message here: 150 characters" maxlength="150"><?php echo set_value('message'); ?></textarea>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck" value="company"> Send To Company's Database</label>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" value="ecofarmer"> Send To Ecofarmer Database</label>
</div>
<div id="ifYes" style="display:none" class="form-group">
<select class="form-control" name="database_name">
<option value="">Choose target</option>
<?php foreach ($databases as $item): ?>
<option value="<?php echo $item->db_id; ?>"><?php echo $item->db_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="ifNo" style="display:none">
<div class="form-group">
<select class="form-control" name="province" id="province">
<option value="">Choose Province</option>
<?php foreach ($provinces as $item): ?>
<option value="<?php echo $item->province_id; ?>"><?php echo $item->province_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<select class="form-control" name="district" id="district" disabled="disabled">
<option value="">Choose District</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="ward" id="ward" disabled="disabled">
<option value="">Choose Ward</option>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="pull-right">
<button type="submit" name="draft" class="btn btn-default" value="true"><i class="fa fa-pencil"></i> Draft</button>
<button type="submit" name="submit" class="btn btn-primary" value="true"><i class="fa fa-envelope-o"></i> Send</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
</div>
<!-- /.box-footer -->
</div>
<!-- /. box -->
</form>
Below is my JavaScript that I use for radio input and select options
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'inline';
}
else document.getElementById('ifYes').style.display = 'none';
if (document.getElementById('noCheck').checked) {
document.getElementById('ifNo').style.display = 'inline';
}
else document.getElementById('ifNo').style.display = 'none';
}
$('#province').change(function() {
var province = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_district'); ?>",
data:{pID:province},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("district").disabled = false;
var $el = $("#district");
$el.empty();
$el.append($("<option>Choose District</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.district_id+">"+value.district_name+"</option>";
$(div_data).appendTo('#district');
console.log(value.district_name);
});
}
});
});
$('#district').change(function() {
var district = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_ward'); ?>",
data:{dID:district},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("ward").disabled = false;
var $il = $("#ward");
$il.empty();
$il.append($("<option>Choose A Ward</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
$(div_data).appendTo('#ward');
console.log(value.ward_number);
});
}
});
});
Now when I'm submitting the value of the selection ward is being removed of everything after the space. How can I prevent that from happening?

The problem was on quotes
I changed the code below
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
To this
var div_data = '<option value="' + value.ward_number + '">' + value.ward_number + '</option>';

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

location.reload not getting reloaded

when i browse an image i want to show the image at the same time on my web page.for that i had used this code but the image is not showing and when i refresh the page the image is showing and i think my location.reload() function is not working that's why its not working
this is my script
<script type="text/javascript">
$(document).ready(function (){
//alert();
$('#modal-close').click();
$("#file").change(function() { $('#upload-image').submit(); });
$('#upload-image').on('submit',(function(e){
e.preventDefault();
//alert()
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(result)
{
$('#uploaded-img').html(result);
window.location.reload(true);
}
});
}));
});
this is my view
<div class="col-md-4" style="padding:0px;">
<div class="add-vehcle-image" >
<form id="uploaded-img">
<!-- added imges contain here -->
<?php if($this->session->userdata('image')){
foreach ($this->session->userdata('image') as $row)
{?>
<div class="col-md-12 col-xs-12 col-sm-12 upload-img">
<img class='img-responsive img-thumbnail' alt='Image' src="<?php echo base_url();?>uploads/thumb/<?php echo $row; ?>">
<div image="<?php echo $row;?>" class="close-btn" data-toggle="modal" data-target="#confirm" >
<span data-toggle="tooltip" data-placement="bottom" title='Delete' class="fa fa-close">
</span>
<i class="fa fa-times"></i>
</div>
</div>
<?php } } ?>
</form>
</div>
<div class="col-md-12" style="margin-top: 24px;">
<div class="add-vehcle-image">
<form enctype="multipart/form-data" method="POST" action="<?php echo base_url();?>admin_control/upload_image" id="upload-image">
<div class="form-group upload-image">
<input type="file" data-toggle="tooltip" data-placement="bottom" title="Upload Image" name="file" id="file" >
</div>
<input name="id" type="hidden" value="<?php echo $result->id; ?>"
id='product_id'>
<input name="table" type="hidden" value="results" id="table">
</form>
</div>
</div>
</div>