Ajax issue with input, textarea blur - javascript

Have problem with submiting information via ajax.
Have for example 20 rows. Click on row and it opens all information about services.
$('tr').click(function() {
var servicesUpdateId = $(this).attr('data');
$("#"+servicesUpdateId).css({"display":"block", 'opacity':'0'}).animate({left: '0',opacity: '1',});
// save form class for ajax submit
localStorage.setItem("formId", servicesUpdateId);
});
Here html:
<tbody>
<?php
$allServices = Services::where('user_id', $mainUser->id);
foreach($allServices as $oneServices) {
?>
<tr class="services-table-hover" data="services_<?php echo $oneServices->id; ?>">
<td> <div class="services-color"></div> <img src="/assets/images/provider_img2.png" alt=""> </td>
<td class="title-name"> <?php echo $oneServices->name; ?> </td>
<td> <?php echo $oneServices->description; ?> </td>
<td> <?php echo $oneServices->duration; ?> mins </td>
<td> <?php echo $oneServices->currency; ?> <?php echo $oneServices->price; ?> </td>
<td style="line-height: 50px;"> <i class="icon-arrow-right"></i> </td>
</tr>
<?php } ?>
Then its div with info
<?php foreach($allServices as $onesServices) { ?>
<div id="services_<?php echo $onesServices->id; ?>">
<div class="portlet light minHeigh staff-hover">
<form action="" method="post" class="services_<?php echo $onesServices->id; ?>">
<div class="portlet-title tabbable-line">
<a class="goBackOne"><i class="icon-arrow-left"></i></a><h3 style="display: inline-block;"><?php echo $lang['SERVICES_LEFT_MENU_ALL']; ?></h3>
</div>
<div class="col-sm-7">
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="portlet_tab1">
<div class="form-body input-smaller">
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><img class="imgs" src="/assets/images/provider_img2.png" alt=""></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_name" style="margin-bottom:10px; font-size: 26px; font-weight: 600;" value="<?php echo $onesServices->name; ?>">
<textarea name="update_service_description" id="" cols="30" rows="10" class="form-control" style="margin-bottom:10px;" placeholder="Description"><?php echo $onesServices->description; ?></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_COST']; ?></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_price" value="<?php echo $onesServices->price; ?>">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_TIME']; ?></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_duration" value="<?php echo $onesServices->duration; ?>">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<?php
$servicesCat = $onesServices->service_categories_id;
$servicesCat = json_decode($servicesCat);
?>
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_LIST']; ?></label>
<div class="col-md-9">
<select id="multiple2" name="update_services_category" class="form-control select2-multiple" multiple placeholder="Select categories">
<?php foreach($servicesCategories as $onCategory) { ?>
<?php if(in_array($onCategory->id, $servicesCat)) { ?>
<option value="<?php echo $onCategory->id; ?>" selected><?php echo $onCategory->name; ?></option>
<?php } else { ?>
<option value="<?php echo $onCategory->id; ?>"><?php echo $onCategory->name; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-5">
<h4><?php echo $lang['SERVICES_INSIDE_PROVIDE']; ?></h4>
<?php
$staffs_eupdate = Staffs::where('id_users', $mainUser->id);
$serviceStaff = ServiceStaffs::find_by_query("SELECT staff_id FROM service_staffs WHERE user_id = '$mainUser->id' AND services_id = '$onesServices->id' ");
$newStaffId = array();
foreach($serviceStaff as $index => $sStaff) {
$newStaffId[$index] = $sStaff->staff_id;
}
foreach($staffs_eupdate as $staff_update) {
?>
<div class="full-services">
<div class="all-services">
<?php if(in_array($staff_update->id, $newStaffId)) { ?>
<div class="all-around all-around-on">
<div class="float-on-left">
<div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
<?php echo $staff_update->name; ?>
</div>
</div>
<?php } else { ?>
<div class="all-around all-around-non">
<div class="float-on-left">
<div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
<?php echo $staff_update->name; ?>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
I'm saving class in localStorage. And then user edits value in field and hes out off that field, I update that information with ajax
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {
var updateStaffId = $("."+localStorage.getItem("formId")+" .all-around-on input[name='update_staffs_id[]']").map(function(){return $(this).val();}).get();
var updateCategoriesId = $("."+localStorage.getItem("formId")+" select[name=update_services_category] option:selected").map(function(){return $(this).val();}).get();
var formData = {
'from' : 'serviceUpdate',
'user_id' : '<?php echo $mainUser->id; ?>',
'services_id' : localStorage.getItem("formId"),
'update_services_name' : $('.'+localStorage.getItem("formId")+' input[name=update_service_name]').val(),
'update_services_description' : $('.'+localStorage.getItem("formId")+' textarea[name=update_service_description]').val(),
'update_services_price' : $('.'+localStorage.getItem("formId")+' input[name=update_service_price]').val(),
'update_services_duration' : $('.'+localStorage.getItem("formId")+' input[name=update_service_duration]').val(),
'update_services_category' : updateCategoriesId,
'update_services_staff' : updateStaffId
};
$.ajax({
type : 'POST',
url : 'ajax/ServicesAjax.php',
data : formData,
dataType : 'json',
encode : true
})
// using the done promise callback
.done(function(data) {
if(data['success'] == true) {
toastr.success("Information updated successfuly!", "Services");
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
The problem is that it's only works with last row. First row, second, 5 , 10 then opens information and edit field value, on blur it don't work. But last row works perfectly. Where can the problem be ?
UPDATED
PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value.


Replace
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {
with
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').on("blur",function(event) {
As .blur() functions is bind only with the elements which are loaded for the first time during page load.
But when you make html new elements in an existing page using ajax you need to bind the event again but this looks a boring task.
For this use jQuery.on() , and pass event name as first param, and rest same as .bind()/.click() or any other event functions.
So its better to use jQuery.on("eventName").


PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value

Related

how to make the next and previous buttons without refreshing with jquery

Right now I have a problem when the next button is clicked then the website will reload and it really depends on the available network. I tried to make the next and previous buttons when clicked without refreshing the website. but I have a problem, please solve it.
Could anyone please take a look and help me figure out where I'm going wrong ?
this mycode
VIEW`
<form id="form-jawab" action="" method="post">
<section id="latihan">
<div class="container">
<div class="row wrap">
<div class="col-lg-6 col-md-12" id="start">
<div class="card soal">
<div class="card-header">Soal</div>
<div class="card-body">
<div class="wrap-soal">
<p class="nomor" id="nomor">No.<?php echo $this->uri->segment(4); ?></p>
<p class="description-soal" id="pertanyaan"><?php echo $soal->pertanyaan ?></p>
<input type="hidden" name="id_soal" id="id_soal" value="<?php echo $soal->id_soal ?>">
<input type="hidden" name="kode_mulai" value="<?php echo $detail->kode_mulai ?>">
<label for="radio1" id="jawaban_a" class="container">
A. <?php echo $soal->jawaban_a ?>
<input type="radio" name="jawaban" id="radio1" value="A" <?php if ($list_soal[$this->uri->segment(4)]['jawaban'] == 'A') : ?> checked <?php endif ?> />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="card">
<div class="card-header">Navigasi Soal</div>
<div class="card-body">
<div class="row navigasi">
<div class="col-4">
<?php if ($list_soal[$this->uri->segment(4)]['no_soal'] - 1 != 0) : ?>
<button class="indikator" data-id="<?php echo $list_soal[$this->uri->segment(4)]['id_soal'] ?>" data-no="<?php echo $list_soal[$this->uri->segment(4)]['no_soal'] - 1 ?>" style="background: none; border: 0;cursor: pointer;"><i class="fa fa-backward"></i> <br>Prev</button>
<?php endif ?>
</div>
<div class="col-4">
<?php if ($list_soal[$this->uri->segment(4)]['no_soal'] + 1 <= $penyelesaian['total']) : ?>
<button class="indikator" id="next_button" data-id = "<?php echo $list_soal[$this->uri->segment(4)]['id_soal'] ?>" data-no = "<?php echo $list_soal[$this->uri->segment(4)]['no_soal'] + 1 ?>" style="background: none; border: 0;cursor: pointer;"> <i class="fa fa-forward"></i> <br>Next</a>
<?php endif ?>
</div>
</div></div></div></section></form>
Jquery code
<script type='text/javascript'>
$(".indikator").click(function() {
let id = $(this).attr('data-id');
let no = $(this).attr('data-no');
let url = '<?php echo base_url() . 'jawab/soal/' . $detail->kode_mulai . '/' ?>';
$("#form-jawab").attr("action", url + no);
console.log(url + no);
});</script>
if the next or previous button is clicked then the website will reload. how to do it if the next or previous button is clicked without reloading the website and the data appears.
please help me guys

Javascript inside PHP foreach

I made a loop using foreach, to show a list of products. Then I made a modal to edit each product. I need to get the value of product dimension and I'll make a dependent drop down between 'job drop down' and 'supply drop down'. At the moment, I can't continue it with Ajax because I got a problem at the first step to get value of dimension. In this code below I tried to get 'length' value of each product through javascript. But it returns the same value, it always is the value of the first product, even if I click on the 2nd, 3rd, 4th of product in the list.
<div class="table-responsive">
<table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product</th>
<th>Supplier</th>
<th>Dimension</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
$pcs_1 = 0;
$meter_1 = 0;
foreach ($stock as $s) { ?>
<tr>
<td class="small">
<?php echo $s->cat . ' - ' . $s->prod ?>
</td>
<td class="small">
<?php echo $s->spl ?>
</td>
<td class="small">
<?php echo $s->length . ' x ' . $s->width . ' x ' . $s->height . ' x ' . $s->diameter ?>
</td>
<td>
<a type="button" data-toggle="modal" class="btn btn-small" data-target="#modal_edit<?php echo $s->id ?>"><i class="fas fa-edit"></i></a>
<!--MODAL-->
<div class="modal fade" id="modal_edit<?php echo $s->id ?>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" action="<?php echo site_url('admin/Stock/edit/') ?>">
<div class="modal-header">
<h5 class="modal-title" id="labelModal">EDIT STOCK</h5>
</div>
<div class="modal-body">
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('JOB') ?>
</div>
</div>
<div class="col-sm-9">
<div class="form-group">
<select name="ref" id="ref" class="form-control" required onchange="GetData()">
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) : ?>
<option value="<?php echo $j->id; ?>"><?php echo $j->id ?> - <?php echo $j->cust ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('Supply') ?>
</div>
</div>
<div class="col-sm-9">
<select name="supply" id="supply" class="form-control" required>
<option value="">--Select Supply--</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-warning submitBtn">edit</button>
</div>
</form>
</div>
</div>
</div> <!-- modal -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
Here is the javascript :
<script type="text/javascript">
function GetData() {
var length_product = $("#length_product").val();
alert(length_product);
}
</script>
The list works well, but I don't know how to get the detail of each list on javascript (passing multiple values from 'modal inside the list' to 'Javascript').

for me it looks like that you are always getting value of
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
rather than option from the select element.
Try the following:
$('#ref').on('change', function(event) {
event.preventDefault();
var length_product = $(this).val();
alert(length_product);
});
and for the PHP and HTML:
<div class="form-group">
<select name="ref" id="ref" class="form-control" required>
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) { ?>
<option value="<?php echo $j["id"]; ?>"><?php echo $j["id"]; ?>-<?php echo $j["cust"]; ?></option>
<?php
}
?>
</select>
</div>
Hope this helps!

High load time for website

Recently I've run into a problem with my website: It started to load really-really slow, and I had no idea why is it like this. I looked at it with the profiler, and found out that the ending of my URL - which is an ID passed by as a query string - takes around 13 seconds to load. I have no idea what is causing this. I checked the scripts, disabled them partly and all together but nothing seems to help. For e.g.: www.mysite.com/flat/5/
I read that sometimes if Chrome cannot find a content like an image, it takes a long time to load, but I have no missing files that chrome would like to load.
I'm attaching a screenshot to show you what does the profiler show:
EDIT: Added the server-side code
<?php
include("header.php");
$flatType = (isset($_GET["flat_type"])) ? $_GET["flat_type"] : null;
$flatId = (isset($_GET["flat_id"])) ? $_GET["flat_id"] : null;
$sqlFlats = "SELECT * FROM lakasok a JOIN tanacsadok b ON (a.tanacsado_id = b.id) WHERE elado_kiado = '$flatType' AND a.id = '$flatId'";
$queryFlats = mysqli_query($con, $sqlFlats);
$flat = mysqli_fetch_assoc($queryFlats);
$district = ($flat["varos"] == "Budapest") ? $flat["kerulet"]." ".$lang["flat-single-district"] : "";
if ($flat["elado_statusz"] == 0 && $flatType == "elado") {
$actual = '<b>'.$lang["flat-single-sell-available"].'</b> <span class="ft-thinest">/ '.$lang["flat-single-sell-unavailable"].'</span>';
} else if ($flat["kiado_statusz"] == 0 && $flatType == "kiado") {
$actual = '<b>'.$lang["flat-single-rent-available"].'</b> <span class="ft-thinest">/ '.$lang["flat-single-rent-unavailable"].'</span>';
} else if ($flat["elado_statusz"] == 1 && $flatType == "elado") {
$actual = '<span class="ft-thinest">'.$lang["flat-single-sell-available"].' /</span> <b>'.$lang["flat-single-sell-unavailable"].'</b>';
} else {
$actual = '<span class="ft-thinest">'.$lang["flat-single-rent-available"].' /</span> <b>'.$lang["flat-single-rent-unavailable"].'</b>';
}
$price = ($flat["elado_kiado"] == "kiado") ? formatPrice($flat["ar_berles"])."Ft / ".$lang["general-month"] : formatPrice($flat["ar_vetel"]);
$lift = ($flat["lift"]) ? $lang["general-there-is"] : $lang["general-there-isnt"];
$description = ($language == "hu") ? $flat["leiras"] : $flat["leiras_en"];
$location = ($language == "hu") ? $flat["kornyek"] : $flat["kornyek_en"];
// echo "<br><br><br><br><br>";
// echo $sqlFlats;
// echo "<pre>";
// print_r($flat);
// echo "</pre>";
//Check the images
$imagesTmp = scandir("img/flats");
foreach ($imagesTmp as $key => $value) {
$img = array();
if (strlen($value) > 3 && strpos($value, formatLink($flat["cim"]."_".$flatId."_galery")) !== false && strpos($value, "_respo") !== false) {
$img["respo"] = $value;
$img["high_res"] = str_replace("_respo", "_high_res", $value);
$galeryImages[] = $img;
}
$_flatImage = "";
foreach ($imagesTmp as $key => $value) {
//echo $value." == ".formatLink($flat["cim"]."_".$flatId)."_high_res<br>";
if (strlen($value) > 3 && strpos($value, formatLink($flat["cim"]."_".$flatId)."_high_res") !== false && strpos($value, "_galery") == false) {
$_flatImage = $value;
}
}
if (is_file("img/flats/".$_flatImage)) {
$flatImage = "img/flats/".$_flatImage."?".time();
} else {
$flatImage = 'img/nincs_kep.jpg';
}
}
//Check the picture profile picture of the assistant
$imagesTmp = scandir("img/assistants");
foreach ($imagesTmp as $key => $value) {
if (strlen($value) > 3 && strpos($value, formatLink($flat["nev"]."-".$flat["id"])) !== false) {
$assistantImage = "assistants/".$value;
break;
} else {
$assistantImage = "nincs_kep.jpg";
}
}
// print_r($galeryImages);
?>
<script src="js/elementInViewport.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var flatDesc = $("#flat-desc");
var flatInfoList = $("#flat-info-list");
var flatInfoEstateAgent = $("#flat-info-estate-agent");
var flatLocation = $("#flat-location");
var estateAgent = $("#estate-agent");
$('#imageGallery').lightSlider({
gallery:true,
loop:true,
pauseOnHover: true,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed: 600,
auto: true,
pause: 5000,
item: 1,
thumbItem:5,
slideMargin:0,
enableDrag: false,
currentPagerPosition:'middle'
// onSliderLoad: function(el) {
// el.lightGallery({
// selector: '#imageGallery .lslide'
// });
// }
});
$(window).scroll(function() {
checkAnimation(flatDesc);
checkAnimation(flatInfoList);
checkAnimation(flatInfoEstateAgent);
checkAnimation(flatLocation);
checkAnimation(estateAgent);
});
// SnazzyMap
var latitude = '<?php echo $flat["latitude"] ?>';
var longtitude = '<?php echo $flat["longtitude"] ?>';
initMap(latitude, longtitude);
$("#estate-agent .button-green").on("click", function() {
$("#estate-agent .contact-form").slideToggle("slow");
});
});
</script>
<div id="flat-single" class="container-fluid page">
<div class="row">
<div class="parallax-bg" style="background-image: url('<?php echo $flatImage?>'); margin-top: 0;">
<div class="gradient-diamond"></div>
</div>
<div class="container">
<div class="row">
<div id="flat-desc" class="col-sm-12 anim-1s">
<h1 class="ft-green text-center mar-top-50"><?php echo $district.", ".$flat["cim"] ?></h1>
<h3 class="ft-green text-center"><?php echo $actual ?></h3>
<!-- <h2 class="ft-green text-center" style="margin-top: 0px;"><?php echo $district ?></h2> -->
<div class="row" style="position: relative; overflow: hidden;">
<div id="flat-info-list" class="col-sm-6 text-center mar-top-50 anim-1s">
<ul>
<li><?php echo $lang["flat-single-price"].": " ?><span class="ft-green"><?php echo $price ?></span></li>
<li><?php echo $lang["flat-single-size"].": " ?><span class="ft-green"><?php echo $flat["meret_nm"] ?>m<sup>2</sup> </span></li>
<li><?php echo $lang["flat-single-rooms"].": " ?><span class="ft-green"><?php echo $flat["szobaszam"] ?></span></li>
<li><?php echo $lang["flat-single-level"].": " ?><span class="ft-green"><?php echo $flat["emelet"] ?></span></li>
</ul>
</div>
<div id="flat-info-estate-agent" class="col-sm-6 mar-top-50 anim-1s">
<div class="row">
<div class="col-sm-6 text-right">
<img class="img-responsive" src="img/nincs_kep.jpg">
</div>
<div class="col-sm-6 text-left">
<h2 class="ft-green" style="margin-top: 8px;"><?php echo $flat["nev"] ?></h2>
<h3 class="ft-green">
<?php echo $flat["pozicio"] ?>
</h3>
<!-- <h4 class="ft-green">Budapest</h4> -->
<br>
<h4 class="ft-gray"><?php echo $flat["telefonszam"] ?></h4>
<h4 class="ft-gray"><?php echo $flat["email"] ?></h4>
</div>
</div>
</div>
</div>
<div id="flat-desc-txt" class="row">
<div class="col-sm-12 text-center mar-top-50">
<p style="font-size: 1.2em;">
<?php echo $description ?>
</p>
</div>
</div>
<div class="row mar-top-50 flat-info">
<div class="col-sm-12">
<?php if (isset($galeryImages)): ?>
<ul id="imageGallery">
<?php foreach ($galeryImages as $img): ?>
<li data-thumb="img/flats/<?php echo $img["respo"] ?>" data-src="img/flats/<?php echo $img["high_res"] ?>">
<img class="img-responsive" src="img/flats/<?php echo $img["high_res"] ?>" />
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</div>
</div>
<div id="flat-location" class="row mar-top-50">
<h2 class="ft-green text-center" style="margin-top: 0px;"><span class="border-bot-green"><?php echo $lang["flat-single-map-location"] ?></span></h2>
<div id="map" class="col-sm-12 mar-top-50"></div>
<div class="col-sm-12 text-center mar-top-50">
<?php if (!empty($location)): ?>
<h2 class="ft-green text-center"><span class="border-bot-green"><?php echo $lang["flat-single-location"] ?></span></h2>
<p class="mar-top-50" style="font-size: 1.2em;">
<?php echo $location ?>
</p>
<?php endif ?>
</div>
</div>
<div id="estate-agent" class="row mar-top-50 anim-1s">
<h2 class="ft-green text-center"><span class="border-bot-green"><?php echo $lang["general-more-info"] ?></span></h2>
<div class="col-sm-3 col-sm-offset-3 mar-top-50">
<img class="img-responsive" src="img/<?php echo $assistantImage."?".time(); ?>">
</div>
<div class="col-sm-4 mar-top-50">
<h2 class="ft-green"><?php echo $flat["nev"] ?></h2>
<h3 class="ft-green">
<?php echo $flat["pozicio"] ?>
</h3>
<!-- <h4 class="ft-green">Budapest</h4> -->
<br>
<h4 class="ft-gray"><?php echo $flat["telefonszam"] ?></h4>
<h4 class="ft-gray"><?php echo $flat["email"] ?></h4>
</div>
<div class="col-sm-12 text-center mar-top-50">
<input class="button-green anim-03s" type="button" name="" value="<?php echo $lang["flat-single-contact"] ?>" style="font-size: 1.5em; padding: 15px 25px;">
</div>
<div class="col-sm-12 contact-form">
<!-- <h2 class="ft-green text-center"><span class="border-bot-green">Vedd fel velünk a kapcsolatot!</span></h2> -->
<form class="mar-top-50" name="contactform" method="post" action="send_email_form.php" enctype="multipart/form-data">
<input type="text" name="name" class="ft-green" placeholder="<?php echo $lang['kapcsolat-nev'] ?>">
<br><br>
<input type="text" name="from" class="email ft-green" placeholder="<?php echo $lang['kapcsolat-email'] ?>">
<br><br>
<input type="text" name="subject" class="ft-green" placeholder="<?php echo $lang['kapcsolat-targy'] ?>" value="Érdeklődés a(z) <?php echo $flat["cim"]." ".$flat["meret_nm"]."m2-es" ?> lakással kapcsolatban">
<br><br>
<textarea name="message" class="inp-textarea ft-green" placeholder="<?php echo $lang['kapcsolat-uzenet'] ?>" rows="10">
Kedves <?php echo $flat["nev"] ?>!
A következő kérdésem lenne a lakással kapcsolatban:
</textarea>
<br><br>
<input type="submit" name="submit" value="<?php echo $lang['kapcsolat-kuldes'] ?>" class="submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include("footer.php"); ?>

It looks like it's the page loading from the server that is taking so long. Whatever is looking up that ID on the other end seems to be what's slow. I'd take a look at overall server speed, but also make sure you have indexes on your database, that could speed things up as well.

multiple forms not submitting correctly

I'm working in OpenCart MVC and I have a page that has a main form called campaign. there is a secondary form called components. the component form allows for multiple instances of itself(click add another component shows). The idea is that a campaign can have infinite components and on submit the campaign info will be written to the campaign table and the component info will be written to the component table. well that is not happening. currently when i fill out both forms and submit. the info for campaign form is written to the table. however in the component table a new record is made but its all blank. Why are the values not being added? Furthermore, additional components seem to not get written at all. so if you start a campaign and add three components then submit only one new(blank) record will be written in components.
MODEL:
public function addCampaign($data) {
$this->db->query("INSERT INTO " . DB_PREFIX . "campaigns SET campaign_name = '" . $this->db->escape($data['campaign_name']) . "', campaign_giving_goal = '" . (float)$data['campaign_giving_goal']
. "', code = '" . $this->db->escape($data['code']) . "', campaign_active = '" . $this->db->escape($data['campaign_active']) . "', campaign_giving_count_goal = '" . (float)$data['campaign_giving_count_goal']
. "', campaign_owner = '" . $this->db->escape($data['campaign_owner']). "', date_beginning = '" . $this->db->escape($data['date_beginning']). "', date_ending = '" . $this->db->escape($data['date_ending']). "'");
$this->cache->delete('campaign');
return $campaign_id;
}
public function addComponent($data) {
$this->db->query("INSERT INTO " . DB_PREFIX . "campaign_components SET component_name = '" . $this->db->escape($data['component_name']) . "', component_date = '" . $data['component_date']
. "', component_owner = '" . $this->db->escape($data['component_owner']). "', campaign_code = '" . $this->db->escape($data['campaign_code']) . "'");
$this->cache->delete('campaign');
return $campaign_id;
}
CONTROLLER:
public function add() {
$this->load->language('campaigns/campaign');
$this->document->setTitle($this->language->get('heading_title'));
$this->load->model('campaigns/campaign');
if (($this->request->server['REQUEST_METHOD'] == 'POST')) {
$this->model_campaigns_campaign->addCampaign($this->request->post);
$this->model_campaigns_campaign->addComponent($this->request->post);
$this->session->data['success'] = $this->language->get('text_success');
$url = '';
if (isset($this->request->get['order'])) {
$url .= '&order=' . $this->request->get['order'];
}
if (isset($this->request->get['page'])) {
$url .= '&page=' . $this->request->get['page'];
}
$this->response->redirect($this->url->link('campaigns/campaign', 'token=' . $this->session->data['token'] . $url, true));
}
$this->getForm();
}
VIEW:
<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
<div class="page-header">
<div class="container-fluid">
<div class="pull-right">
<button type="submit" form="form-campaign" action="<?php echo $action; ?>" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" onclick="submitForms()"><i class="fa fa-save"></i></button>
<i class="fa fa-reply"></i>
</div>
<h1><?php echo $heading_title; ?></h1>
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ul>
</div>
</div>
<div class="container-fluid">
<?php if ($error_warning) { ?>
<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<?php } ?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_form; ?></h3>
</div>
<div class="panel-body">
<form method="post" action="<?php echo $action; ?>" enctype="multipart/form-data" id="form-campaign" class="form-horizontal">
<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">
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-campaign-name"><?php echo $entry_name; ?></label>
<input type="text" name="campaign_name" placeholder="<?php echo $entry_name; ?>" id="input-campaign-name" class="form-control" value="<?php echo $campaign_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-5 col-sm-push-1 form-group required">
<label class="control-label" ><?php echo $entry_owner; ?></label>
<select name="campaign_owner" id="campaign_owner" value="<?php echo $campaign_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-campaign-goal"><?php echo $entry_goal; ?></label>
<input type="text" name="campaign_giving_goal" placeholder="<?php echo $entry_goal; ?>" id="input-campaign-goal" class="form-control" value="<?php echo $campaign_giving_goal; ?>" />
<?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-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-campaign-goal"><?php echo $entry_goal_count; ?></label>
<input type="text" name="campaign_giving_count_goal" placeholder="<?php echo $entry_goal_count; ?>" id="input-campaign-goal-count" class="form-control" value="<?php echo $campaign_giving_count_goal; ?>" />
<?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-5 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="date_beginning" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-beginning" class="form-control" value="<?php echo $date_beginning; ?>" readonly />
<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-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-ending"><?php echo $entry_campaign_end_date; ?></label>
<div class="input-group date required">
<input type="text" name="date_ending" placeholder="<?php echo $entry_campaign_end_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-ending" class="form-control" value="<?php echo $date_ending; ?>" readonly />
<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-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="code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-code" class="form-control" readonly />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active"><?php echo $entry_active; ?></label>
<select name="campaign_active" id="input-"active" class="form-control">
<option value="*"><?php echo $text_active; ?></option>
<?php if ($filter_campaign_active) { ?>
<option value="1" selected="selected"><?php echo $text_yes; ?></option>
<?php } else { ?>
<option value="1"><?php echo $text_yes; ?></option>
<?php } ?>
<?php if (!$filter_campaign_active && !is_null($filter_campaign_active)) { ?>
<option value="0" selected="selected"><?php echo $text_no; ?></option>
<?php } else { ?>
<option value="0"><?php echo $text_no; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</form>
</div>
</div>
</div>
<button class="btn btn-primary" id="launch"><?php echo $text_add_component ?></button>
<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">
<form method="post" enctype="multipart/form-data" id="form-components" class="form-horizontal" action="<?php echo $action; ?>">
<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" />
<?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="date_beginning" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-beginning" 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="campaign_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="code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-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>
<div class="cancel-save">
<button type="submit" form="form-campaign" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" onclick="submitForms(0)"><i class="fa fa-save"></i></button>
<i class="fa fa-reply"></i>
</div>
</div>
</div>
<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
</script>
<script type="text/javascript"><!--
$('#input-code').on('keyup', function() {
$('#input-example1').val('<?php echo $store; ?>?tracking=' + $('#input-code').val());
$('#input-example2').val('<?php echo $store; ?>index.php?route=common/home&tracking=' + $('#input-code').val());
});
$('#input-code').trigger('keyup');
//--></script>
<script type="text/javascript">
document.getElementById('launch').onclick = function() {
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
container.appendChild(clonedNode );
}
</script>
<script type="text/javascript"><!--
submitForms = function(){
document.getElementById("form-campaign").submit();
document.getElementById("form-components").submit();
}
</script>
<script type="text/javascript"><!--
$('.date').datetimepicker({
formatDate:'yyyy-mm-dd',
pickTime: false
});
$('.time').datetimepicker({
pickDate: false,
icons: {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
},
});
$('.datetime').datetimepicker({
pickDate: true,
pickTime: true
});
//--></script>
<script type="text/javascript"><!--
$('#language a:first').tab('show');
$('#option a:first').tab('show');
//--></script></div>
<?php echo $footer; ?>

Passing javascript variable to PHP using ajax but it gives error

I am trying to pass my JavaScript variable using Ajax into my PHP script but that doesn't work it given me error that it is undefined index. both codes are in different files but both of them are accessible on the main page.
Here's my script.php
<script>
function get_child_options(){
var parentID = jQuery('#parent').val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {parentID : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
And this is my php file
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/ **/core/init.php'; //Including database path stored in init.php
$parentID = (int)$_POST['parentID'];
$childQuery = "SELECT * FROM categories WHERE parent = '$parentID' ORDER BY category";
ob_start();
?>
<option value="">Select <strong>Child</strong> Category</option>
<?php while ($child = mysqli_fetch_assoc($childQuery)): ?>
<option value="<?= $child['id']; ?>"><?= $child['category']; ?></option>
<?php endwhile; ?>
<?php
echo ob_get_clean();
?>
in script the #parent is a form id i am passing to javascript using jQuery.
because of variable is not accessible PHP is not running query.
This is my products.php the main where page where this is happening
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/Online Store/core/init.php'; //Including database path stored in init.php
include 'includes/head.php'; //Including header
include 'includes/navigation.php'; //Including Navigation bar
include 'includes/script.php';
if (isset($_GET['add'])) {
$brandQuery = $db->query("SELECT * FROM brand ORDER BY brand");
$parentQuery = $db->query("SELECT * FROM categories WHERE parent = 0 ORDER BY category");
?>
<h2 class="text-center">Add A New Product</h2><hr />
<form action="products.php?add=1" method="post" enctype="multipart/form-data">
<div class="form-group col-md-3">
<label for="title">Title*:</label>
<input type="text" class="form-control" id="title" name="title" value="<?= ((isset($_POST['title']))?sanitize($_POST['title']):''); ?>" placeholder="Add a title" />
</div>
<div class="form-group col-md-3">
<label for="brand">Brand*: </label>
<select class="form-control ">
<option value="" <?= ((isset($_POST['brand']) && $_POST['brand'] == '')?' selected':''); ?> >Select Brand</option>
<?php while($brand = mysqli_fetch_assoc($brandQuery)): ?>
<option value="<?= $brand['id']; ?>" <?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id'])?' selected':''); ?> ><?= $brand['brand'] ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="parent">Parent Category*: </label>
<select class="form-control" id="parent" name="parent">
<option value="" <?= ((isset($_POST['parent']) && $_POST['parent'] == '')?' select':''); ?> >Select <strong>Parent</strong> Category</option>
<?php while($parent = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?= $parent['id']; ?>" <?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id'])?' select':''); ?> ><?= $parent['category']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Child Category*: </label>
<select id="child" name="child" class="form-control"></select>
<?php include $_SERVER['DOCUMENT_ROOT'].'/Online Store/admin/parsers/child_categories.php'; ?>
</div>
<div class="form-group col-md-3">
<label for="price">Price*: </label>
<input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price']))?sanitize($_POST['price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label for="list_price">List Price*: </label>
<input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price']))?sanitize($_POST['list_price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label>Quantity & Sizes</label>
<button class="btn btn-default btn-info form-control" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Quantity & Sizes</button>
</div>
<div class="form-group col-md-3">
<label for="sizes">Sizes & Quantity preview*: </label>
<input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?$_POST['sizes']:''); ?>" readonly/>
</div>
<div class="form-group col-md-6">
<label for="photo">Photo*: </label>
<input type="file" name="photo" id="photo" class="form-control" />
</div>
<div class="form-group col-md-6">
<label for="description">Description</label>
<textarea name="description" id="description" class="form-control" rows="6" placeholder="Description" ><?= ((isset($_POST['description']))?sanitize($_POST['description']):''); ?></textarea>
</div>
<div class="form-group pull-right">
<input type="submit" class="form-control btn btn-success" value="Add Product" />
</div>
<div class="clearfix"></div>
</form>
<?php
}else{
$sql = "SELECT * FROM products WHERE deleted = 0";
$presults = $db->query($sql);
$product = mysqli_fetch_assoc($presults);
// Featured product
if (isset($_GET['featured'])) {
$id = (int)$_GET['id'];
$featured = (int)$_GET['featured'];
$featuredSql = "UPDATE `products` SET `featured` = '$featured' WHERE `products`.`id` = '$product[id]' ";
$db->query($featuredSql);
// header('Location: products.php');
}
?>
<h2 class="text-center">Products</h2>
Add Product<div class="clearfix"></div>
<hr />
<table class="table table-bordered table-condensed table-striped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<?php
while($product = mysqli_fetch_assoc($presults)):
$childID = $product['categories'];
$catSql = "SELECT * FROM categories WHERE id = '$childID'";
$result = $db->query($catSql);
$child = mysqli_fetch_assoc($result);
$parentID = $child['parent'];
$pSql = "SELECT * FROM categories WHERE id = '$parentID'";
$presult = $db->query($pSql);
$parent = mysqli_fetch_assoc($presult);
$category = $parent['category'].'~'.$child['category'];
?>
<tr>
<td>
<span class= " glyphicon glyphicon-pencil"></span>
<span class= " glyphicon glyphicon-remove-sign"></span>
</td>
<td><?= $product['title']; ?></td>
<td><?= money($product['price']) ?></td>
<td><?= $category; ?></td>
<td><a href="products.php?featured=<?= (($product['featured'] == 0)?'1':'0'); ?>&id =<?= $product['id']; ?>" class=" btn btn-sx btn-default">
<span class=" glyphicon glyphicon-<?= (($product['featured'] == 1)?'minus':'plus'); ?>"></span>
</a>&nbsp <?= (($product['featured'] == 1)?'Featured':''); ?></td>
<td>0</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php
}
include 'includes/footer.php'; //Including footer
?>
Is there any other way to do it? What I am trying to do is when user selects parent category I want child category to arrange as per parent category.

Try this:
<script>
function get_child_options(){
var parentID = $(this).val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {'parentID' : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
Getting the Value by $(this) and putting single quotes around parentID data: {'parentID' : parentID},

Categories