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.
Related
So i'm coding a donation store inside of codeigniter. I've been working to add the cart function to it, and have made a small card that holds the items for the store, with the ability to add to cart, and a ajax request to post and reload. The thing is, in the first category, it will work fine, success and succesfully adds to cart and reloads. but if i go into the other categories and click on an item, it always returns failure.
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<?php foreach ($category as $cat) { ?>
<li class="nav-item">
<a class="nav-link" href="#<?= $cat['categ_name']; ?>" data-toggle="tab"><?= $cat['categ_name']; ?></a></li>
<? } ?>
</ul>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content">
<?php foreach ($category as $pane) { ?>
<div class="tab-pane" id="<?= $pane['categ_name']; ?>">
<div class="row">
<?php foreach ($item as $ditems) { ?>
<?php if ($ditems['categ_name'] == $pane['categ_name']) { ?>
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3><?= $ditems['item_name']; ?></h3>
</div>
<div class="flip-card-back">
<p><b>Price : $<?= $ditems['price']; ?></b></p>
<p><?php if ($ditems['package'] == 1) { ?>
Package Details
<?php } else { ?>
<p>Quantity : x <?= $ditems['amount']; ?></p>
<?= $ditems['descr']; ?></p>
<?php } ?>
<?php echo form_open(base_url('donation/add_cart_item'), 'class="horizontal-form" '); ?>
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="number" value="" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<input type="number" value="<?= $ditems['catelog_id']; ?>" class="form-control" id="cat_id" name="cat_id" placeholder="<?= $ditems['catelog_id']; ?>" hidden>
<div class="form-group">
<button type="button" id="add_cart" class="btn" onClick="sendToCart();">Add To Cart</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
<? } ?>
<? } ?>
</div>
</div>
<? } ?>
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- /.nav-tabs-custom -->
and this is the script im sending it to:
<?php
$url = base_url().'donation/add_cart_item';
?>
<script>
function sendToCart(){
var catId = $("#cat_id").val();
var qty = $("#quantity").val();
$.ajax({
type: "POST",
url: "<?php echo $url ?>",
data: { '<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>', cat_id: catId, quantity: qty, ajax: '1' },
dataType: "json",
cache:false,
success: function() {
location.reload();
alert("success");
},
error:function() {
alert("failure");
}
});
return false; // Stop the browser of loading the page
}
</script>
and the controller :
public function add_cart_item(){
$id = $this->input->post('cat_id');
$qty = $this->input->post('quantity');
$item = $this->cart_model->get_item($id);
$data = array(
'id' => $id,
'qty' => $qty,
'price' => $item['price'],
'name' => $item['item_name']
);
$data = $this->security->xss_clean($data);
$insert = $this->cart->insert($data);
if ($insert) {
if ($this->input->post('ajax') != '1') {
redirect('store'); // If javascript is not enabled, reload the page with new data
} else {
echo 'true'; // If javascript is enabled, return true, so the cart gets updated
}
} else {
$this->session->set_flashdata('warning', 'Could not insert the item to cart. Please try again later or contact an Administrator with this error.');
return false;
}
You can pass this inside your sendToCart function where this refer to button which is clicked . Then , use .closest() & .find() method to get required input values and pass same to your ajax call . Also , i have added class for quantity and cat_id add that in your html as well.
Demo Code :
function sendToCart(el) {
//get closest outer div ( tabp pane ) ->find inputs with class
var catId = $(el).closest(".tab-pane").find(".cat_id").val();
var qty = $(el).closest(".tab-pane").find(".quantity").val();
console.log("ID = " + catId + " Q = " + qty)
//your ajax call..
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#A" data-toggle="tab">A</a></li>
<li class="nav-item">
<a class="nav-link" href="#B" data-toggle="tab">B</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="A">
<div class="row">
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3>
Oil
</h3>
</div>
<div class="flip-card-back">
<p><b>Price : $134</b></p>
<p>
<p>Quantity : x 77
</p>
Soemthinhs ....
</p>
<div class="form-group">
<label for="quantity">Quantity:</label>
<!--use class here-->
<input type="number" value="" class="form-control quantity" name="quantity" placeholder="Enter Quantity">
</div>
<!--use class here-->
<input type="number" value="1" class="form-control cat_id" name="cat_id" placeholder="1" hidden>
<div class="form-group">
<!--pass this inside fn which refer to this button-->
<button type="button" id="add_cart" class="btn" onClick="sendToCart(this);">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="B">
<div class="row">
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3>
Vegeatbles
</h3>
</div>
<div class="flip-card-back">
<p><b>Price : $14</b></p>
<p>
<p>Quantity : 7
</p>
Soemthinhs .... Soemthinhs ....
</p>
<div class="form-group">
<label for="quantity">Quantity:</label>
<!--use class here-->
<input type="number" value="" class="form-control quantity" name="quantity" placeholder="Enter Quantity">
</div>
<!--use class here-->
<input type="number" value="2" class="form-control cat_id" name="cat_id" placeholder="2" hidden>
<div class="form-group">
<!--pass this inside fn which refer to this button-->
<button type="button" id="add_cart" class="btn" onClick="sendToCart(this);">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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
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; ?>
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
below is html source code :
<?php foreach ($workshops as $workshop): ?>
<div class="col-md-3">
<div class="virtual clearfix">
<div class="virtual_days clearfix">
<div class="twitter_image pull-left">
<?php echo img(array('src' => base_url($this->config->item('img_path').'twitter.png'), 'class' => 'twitter_image pull-left')); ?>
</div>
<div class="weekend pull-left">
<div class="no_of_days pull-left">
<?php echo $workshop->total_days ?>
</div>
<div class="pull-right">
Days
<br>
Weekend Classes
</div>
</div>
</div>
<div class="virtual_time clearfix">
<?php echo $workshop->city; ?>
<br>
<?php echo $workshop->country; ?>
<br>
UTC / GMT is 9:30 AM to 1:30 PM
</div>
<div class="training_calendar">
<?php foreach ($workshop->workshop_dates as $dates) : ?>
<div class="month">
<?php echo date("M", strtotime($dates->start_date)); ?>
</div>
<div class="week_calendar">
<div class="full_week_days clearfix">
<div class="days pull-left">
<span><?php echo date('D', strtotime($dates->start_date)); ?></span>
<br>
<?php echo $dates->start_date; ?>
to
<?php echo $dates->end_date; ?>
<br>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="virtual_price">
<div class="center-block">
<div class="virtual_price_center">
Exam Fee is Extra
</div>
</div>
<div class="strike_through">
<?php echo $workshop->price ?>
</div>
<div class="price">
<?php echo $workshop->price ?>
</div>
<div class="early_bird_date">
Last Date For Early Bird
<?php echo $workshop->early_bird_date ?>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="enroll_now">
Enroll Now
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="service_tax">
Service Tax 12.5% Extra
</div>
</div>
</div>
</div>
<?php endforeach; ?>
Below is the jquery code where result as to display as above i am using with $workshop as object:
so please integrate with below code
// On change of course
$('#course').change(function() {
// Search Data
var search_data = {
course_id: $('select[name="course_id"]').val(),
country_id: $('select[name="country_id"]').val(),
city_id: $('select[name="city_id"]').val()
};
if(!search_data.course_id && !search_data.country_id && !search_data.city_id) {
location.reload();
}
$('select[id="course_id"]').html('<option value="">Select Course</option>');
if($(this).val()) {
$.ajax({
data:{course_id: $(this).val()},
type:"post",
url: "<?php echo base_url($this->config->item('courses_ajax_get_workshops_by_search_uri')); ?>",
dataType:"json",
data: search_data,
cache:false,
success:function(data){
if(data.response == true){
if(typeof data.courses!='undefined'){
$.each(data.courses, function(key, courses) {
----------------------------
(your code as to come here)
(concatenate with above html elements)
-----------------------------
});
}
}
}
});
}
});`
Send ajax request to this PHP file above.
$.ajax({
url: "getPHPData.php"
}).done(function(result) {
$( '#divToAppend').html(result);
});
And as result use .html to append to some div you want.