Az AJAX, azaz Asynchronous JavaScript and XML arra szolgál, hogy ne kelljen az egész weblapot újratölteni a form elküldésekor, hanem csak az adatokat, mintegy csendben a “háttérben” elküldeni, majd valami <div> tag-ben megjeleníteni a kívánt felhasználói üzeneteket. Részletesebb leírás az alábbi címen található https://hu.wikipedia.org/wiki/Ajax_(programoz%C3%A1s).
Nem nagyobb feladatra vállalkozunk, minthogy az előbbi foglalás-űrlap elküldésünket aszinkron JavaScript hívásra cseréljük.
Először pár apróság. A views/layouts/menu_layout.php file-ban előre kell vennünk a fejlécbe a JavaScript forrás beillesztéseket, hogy tudjuk használni a jQuery funkcionalitásait.
Aztán át kell “drótoznunk” a menüt pl. a views/photos.php file-ban.
<li><a href="booking_ajax"><?php echo $this->lang->line('menu_booking'); ?></a></li>Nézzük a views/booking_ajax.php oldalunk tartalmát.
<?php
$my_base_url = '/apartman/';
?>
<div class="row">
<div class="col-sm-2">
<div id="fh5co-logo"><a href="index.html">Apartman<span>.</span></a></div>
</div>
<div class="col-sm-10 text-right menu-1">
<ul>
<li><a href="photos"><?php echo $this->lang->line('menu_photos'); ?></a></li>
<li class="active"><a href="booking_ajax"><?php echo $this->lang->line('menu_booking'); ?></a></li>
<li><a href="contact"><?php echo $this->lang->line('menu_contact'); ?></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div id="fh5co-intro">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 col-md-pull-2">
<h2><?php echo $this->lang->line('menu_booking'); ?></h2>
</div>
</div>
</div>
<div id="fh5co-contact">
<div class="row">
<div class="col-md-4 animate-box">
<h3>Contact Information</h3>
<ul class="contact-info">
<li><i class="icon-location4"></i>1117 Budapest, Irinyi J. utca 42.</li>
<li><i class="icon-phone3"></i>+ 1235 2355 98</li>
<li><i class="icon-location3"></i><a href="#">info@yoursite.com</a></li>
<li><i class="icon-globe2"></i><a href="#">www.yoursite.com</a></li>
</ul>
</div>
<div class="col-md-8 animate-box">
<div class="form-wrap">
<div class="row">
<form id="ajax_form" action="book_ajax" method="POST">
<div class="col-md-12" id="response_message" style="display: none;">
<div class="form-group" id="response_message_text">
<!--<h3><font color="red">MESSAGE</font></h3>-->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="name" type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="email" type="text" name="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="phone" type="text" name="phone" class="form-control" placeholder="Phone">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea id="message" name="message" class="form-control" id="" cols="30" rows="15" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="checkin" type="text" name="checkin" class="form-control" placeholder="Check-in">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="checkout" type="text" name="checkout" class="form-control" placeholder="Check-out">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="submit_button" type="button" value="Book" class="btn btn-primary btn-modify">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- END container -->
<script>
$(document).ready(function(){
$( "#submit_button" ).click(function(event)
{
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var message = $("#message").val();
var checkin = $("#checkin").val();
var checkout = $("#checkout").val();
var data = $("#ajax_form").serialize();
$.ajax(
{
type:"post",
url: "<?php echo $my_base_url; ?>index.php/apartments/book_ajax",
data:{ name: name, email: email, phone: phone, message: message, checkin: checkin, checkout: checkout },
success:function(response)
{
console.log(response);
$("#response_message_text").html("<h3><font color=\"red\">" + response + "</font></h3>");
$('#response_message').show();
},
error: function()
{
alert("Invalide!");
}
}
);
});
});
</script>Nézzük mi változott! Minden form mezőnek, az elküldő gombnak és a felhasználói üzenet résznek (#response_message_text és #response_message) egyedi azonosítót, id-attribútumot adtunk, hogy a JavaScript részben #id néven hivatkozhassunk rájuk. Ezt a hivatkozási módszert amúgy css szelektornak hívjuk, ezen belül is ún. ID Selector, részletek itt https://www.w3.org/wiki/CSS3/Selectors.
Látható a <script> tag-ben az ajax hívásunk. Kiolvassuk az űrlapmezők értékeit, majd egy hívást indítunk, mind success (siker), mind error (hiba) esetére megfelelő válaszokkal.
Modellünk nem változik viszont a controller-ünkbe elkél két új metódus. Nézzük a controllers/Apartments.php file-t.
public function booking_ajax() {
$data = array();
$this->template->set('title', $this->lang->line('menu_booking'));
$this->template->load('menu_layout', 'contents', 'booking_ajax', $data);
}
public function book_ajax() {
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('email','Email','trim|required|valid_email');
$this->form_validation->set_rules('checkin', 'Check-in', 'required');
$this->form_validation->set_rules('checkout', 'Check-out', 'required');
if($this->form_validation->run() == FALSE) {
echo validation_errors();
} else {
$this->load->model('reservations_model');
$this->reservations_model->insert_reservation();
echo "Thanks for booking!";
}
}A booking_ajax metódus csak betölti a view-nkat.
A book_ajax metódus már összetettebb. Tartalmaz egy ellenőrzést, ami email címnél valid_email-lel is bővül, tehát megvizsgálja a formátumot is és egy trim-mel, ami az esetleges felesleges ún. “trailing space” karaktereket vágja le (üres karakterek az elején és a végén).
Látható, hogy validációs hibák esetén visszatér hibával, ez ki is lesz írva a view-nkban a megfelelő div-nél, illetve ha sikerült, akkor a “Köszönet a foglalásért!” üzenettel válaszol. Ennyi az egész :).
És akkor vessünk egy pillantást egy sikeres foglalásra!
Nézzük a http://localhost/apartman/index.php/apartments/booking_ajax oldalunkat.
Láthatjuk, hogy az űrlap (form) helyes kitöltése és elküldése után az adatbázis konzolban látható az adatbázisba felvett sor.
mysql> select * from reservations where id = 10;
+----+------+------------+-------+------------+------------+---------+----------+--------------+--------+---------------------+---------------------+
| id | name | email | phone | checkin | checkout | message | approved | apartment_id | locale | created_at | updated_at |
+----+------+------------+-------+------------+------------+---------+----------+--------------+--------+---------------------+---------------------+
| 10 | aaa | aaa@aaa.hu | | 2020-07-29 | 2020-08-01 | aaa | NULL | 1 | NULL | 2020-08-03 03:34:11 | 2020-08-03 03:34:11 |
+----+------+------------+-------+------------+------------+---------+----------+--------------+--------+---------------------+---------------------+
1 row in set (0.00 sec)