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

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

Related

Codeigniter javascript function keeps failing

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>

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.

Getting hold of which dynamically generated PHP variable has been clicked and display on the same page

I'm developing a messaging system and I have a list of items that are generated dynamically from a database using PHP.
All of these items have an associated message button and I need to know which one has been clicked and pass through the ID of this item to a message box that appears on the screen upon click of the message button.
I thought about using a form with hidden values to post, but this doesnt work as the page refreshes and I've used javascript to get the message box to popup too. document.getelementbyid also didn't help as the ID's of the items are generated dynamically. I read online I could do this using Ajax but couldn't get it to work with my code either.
Thanks in advance and apologies if this has already been asked but I've been searching for about half an hour and couldn't find any posts asking the same as my scenario.
<?php for ($j = 0; $j < $counter; $j++) { ?>
<div class="col-md-4 col-sm-6 item">
<div class="box">
<a href="itemdetails.php?id=<?php echo $itemIDDB[$j];?>">
<h3 class="name"><?php echo $itemNameDB[$j]?></h3>
<div class="row">
<div class="col-md-12"><img class="img-rounded profileimage" src="<?php echo $imageURLS[$j];?>"></div>
</div>
</a>
<div class="row">
<div class="col-md-6">
<p class="price"><?php echo "£" . $priceDB[$j]; ?></p>
</div>
<div class="col-md-6">
<p class="condition"><?php if ($conditionDB[$j] == 11) { echo "NEW"; } else { echo $conditionDB[$j]; } ?></p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-default btn-xs messagebutton" data-id="<?php echo $usernameDB[$i] ?>" type="button">message</button>
</div>
<div class="col-md-6">
<p class="username"><?php echo $usernameDB[$i] ?></p>
</div>
</div>
<p class="description"><?php echo $descriptionDB[$j]; ?></p>
</div>
</div>
<?php }
^^ Above is the code that generates each item and I need to pass the item ID to display instead of ' message username ' in the code below. All this code is in the same file.
<div id="messagenewuser">
<h3>Message username</h3>
<form method="post" class=".messagepopup">
<div class="form-group">
<textarea class="form-control" form="userreviewform" maxlength="50"></textarea>
</div>
<div class="form-group">
<button class="btn btn-default btn-xs" type="button" id="submitreview">send</button>
</div>
<input class="form-control hidden" type="text" name="tradeID">
</form>
</div>

Ajax issue with input, textarea blur

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

how to insert datedropdown value in to database

Here is some code i need ur help on, in this code the input form do have a name so that i can store the value of the input form to the database and fetch it to post to another page but those textfield with the script do not recognized, it call them undefined variable but if the textfield it self is apeared without the script it works just by removing the script.but i want to use that plugin by the script n i want u to help me with why do the name variable cant be recognized wn i add that script it works fine w/out it.
<?php $active = "";?>
<?php
include 'includes/header.php';
include 'includes/event_functions.php';
?>
<?php
if (isset($_GET['id'])) {
$event = get_event_by_id($_GET['id']);
if ($event != null) {
?>
<div class="container">
<div class="clearfix" style="margin-top:20%;"> </div>
<h1 style="color:#808080;text-align:center;"> Registering new event in afrisol </h1>
<form method="post" action="updateevent.php" style = "margin-bottom:3%;" enctype="multipart/form-data">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>
Event start date
</label>
</div>
<div class="col-md-8">
<div class="example">
<input type="date" name="sdate" id="example1">
</div>
</div>
</div>
<div>
<!-- date -->
<div class="col-md-6">
<div class="form-group">
<label>
Event end date
</label>
</div>
<div class="col-md-8">
<div class="example">
<input type="date" class = "form-control" name ="ldate" id="ldate" /></br></br>
</div>
</div>
</div class = "col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>
Ticket start date
</label>
</div>
<div class="col-md-8">
<input value= "<?php echo $event->tsdate;?>" type="Date" class = "form-control" name ="tsdate" /></br></br>
</div>
</div>
<!-- ticket date -->
<div class="col-md-6">
<div class="form-group">
<label>
Ticket end date
</label>
</div>
<div class="col-md-8">
<input value= "<?php echo $event->tldate;?>" type="Date" class = "form-control" name ="tldate" /></br></br>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<input type="submit" class = "form-control" name ="submit" value="update" />
</div>
<!-- <input value= type = "text" class = "form-control" name = "daterange" value="01/01/2015- 01/31/2015" /> -->
</div>
</form>
<?php }} ?>
</div>
<?php
include 'includes/footer.php';
?>
<script>
$(function() {
$("#example1").dateDropdowns();
// Set all hidden fields to type text for the demo
$('input[type="hidden"]').attr('type', 'Date').attr('readonly','readoniy');
});
</script>
<link href="js/Easy-Customizable-jQuery-Dropdown-Date-Picker-Plugin/demo/styles.css" rel="stylesheet">
<script src ="js/Easy-Customizable-jQuery-Dropdown-Date-Picker-Plugin/dist/jquery.date-dropdowns.js"></script>
in the other page 'updateevent.php' i have this source code in case...
<?php $active = "";?>
<?php
include 'includes/header.php';
include 'includes/util.php';
include 'includes/event_functions.php';
?>
<div style="margin-top:15%;"></div>
<?php
if (isset($_POST['id']) ){
// echo "string";
$id = $_POST['id'];
$title = $_POST['title'];
$ldesc = $_POST['ldesc'];
$desc = $_POST['desc'];
$allowComment = $_POST['allowComment'];
$level= $_POST['level'];
$eBy = $_POST['by'];
$country = $_POST['country'];
$region = $_POST['Region'];
$Town = $_POST['Town'];
$kebele = $_POST['Kebele'];
$Price = $_POST['price'];
$video = $_POST['video'];
$catagory = $_POST['catagory'];
$longtude = $_POST['Longtude'];
$lattitude = $_POST['lattitude'];
$sdate = $_POST['sdate'];
$edate = $_POST['ldate'];
$tsdate = $_POST['tsdate'];
$tedate = $_POST['tldate'];
$update = update_event( $id , $title, $ldesc, $desc, $allowComment,$level,$eBy,$country,$region,$Town,$kebele,$Price,$video,$catagory,$longtude,$lattitude,$sdate,$edate,$tsdate,$tedate );
//echo $fName.$mName.$lName.$gender.$email.$phone;
if ($update > -1) {
/* header("Location event_update_success.php?id=".$id);*/
$event = get_event_by_id($update);
echo "<h1 style='color:green;text-align:center;'>you have updated successfully!!</h1>" ;
echo "<h2 style='color:green;text-align:center;'>with those contents...</h2>"
?>
<section id="blog" class="container">
<div class="center">
<h2> <?php echo $event->title; ?> </h2><hr/>
</div>
<div class="blog">
<div class="row">
<div class="col-md-2" style="width:230px;">
<div class="blog-item">
<div class="row">
<div class="col-md-12" style="text-align:center;background:rgba(255,255,255,0.5);border=1px solid;border-radius:10px">
<h2>About This Event </h2>
<img src="<?php echo $event->image; ?>" style="height:250px;" class="img-responsive">
<div class="col-xs-12 col-sm-12 text-center" style="border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">
<div class="entry-meta">
<h3>Event By <b>Afrisol Events </b> </h3>
<div id="publish_date" style="text-align:left;padding:8px "><div><i class="fa fa-user"></i> posted by:-<p style="text-align:right;"><?php echo $event->by;?></p> </div></div>
***<span style="text-align:left;">
<h2 style="text-decoration:underline;"> Event Dates</h2>
<h3 style="color:#333;">Event Start Date:
</h3><b><?php echo $event->sdate ;?></b>
<h3 style="color:#333;">Event End Date:
</h3> <b><?php echo $event->ldate ;?></b>
<li>Ticket Start Date:
<b><?php echo $event->tsdate ;?></b></li>
<li> Ticket End Date:
<b><?php echo $event->tldate ;?></b></li>-->***
</span>
<span style="text-align:left;"><h3>Event For:</h3><b><?php echo $event->level; ?> Membership</b></span>
<span style="text-align:left;"><h3>Event Catagory : </h3><b><?php echo $event->catagory; ?> </b></span>
<span style="text-align:left;"><h2 style="text-decoration:underline;">Location</h2>
<h3>Country:</h3>
<b><?php echo $event->country ;?></b>
<h3>Region:</h3>
<b><?php echo $event->Region ;?></b>
<h3>City:</h3>
<b><?php echo $event->Town ;?></b></span>
<!-- <span><i class="fa fa-heart"></i>56 Likes</span> -->
</div></div>
<span style="text-align:left;"><h3>Map of Event Place</h3></span>
<iframe class="actAsDiv" width="100%" height="200" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&q=<?php echo $event->lattitude?>%2C%20<?php echo $event->longtude?>&aq=0&ie=UTF8&t=h&z=16&iwloc=A&output=embed"></iframe>
</div>
</div>
</div><!--/.blog-item-->
</div><!--/.col-md-8-->
<div class="col-md-7" style="margin-left: 10px;background:rgba(255,255,255,0.7);border=1px solid;border-radius:10px">
<div style="padding:10px 0px;"><img style="height:300px;width:100%;" src="<?php echo $event->image; ?>" class="img-responsive"></div>
<div> <?php echo $event->desc;?></div>
<!--<img src="uploads\profile\upload3470digitalManufacturing.jpg" > -->
</div>
<aside class="col-md-1" style="width:230px;margin-left: 10px;background-color:#fafafa;height:100%;">
<div class="col-md-12" style="margin:5px 0px;">
<div>
<h2 style="text-align:center;"> AFrisol Events Advertizing Portion </h2>
<img src="images/at-Afrisol.gif" class="img-responsive" ></div>
</div>
<div class="col-md-12" style="margin:5px 0px;">
<div>
<h2 style="text-align:center;"> Fasion Design Cotest Adama 2008 </h2>
<img src="images/news/10X20_youthopia_Adama1.jpg" class="img-responsive" >
</div>
</div>
</aside>
</div><!--/.row-->
</div><!--/.blog-->
</section><!--/#blog-->
<?php }
else{
echo "<h2> Something Must went wrong </h2>";
}
}
// $passportNum = $_POST['passportNum'];
// $level = $_POST['level'];
?>
<?php
include 'includes/footer.php';
?>
so to answer your question completely, possible things could be.
add name attribute to element
add form tag, if you posting data normally
or add ajax code to submit the form and add it to some variable so that it is available to server side script.
in case needed help please let me know.
Thanks
Amit

Categories