I have a seat chart. When i click a seat, i want to show a loading gif. Seat chart comes from svg document. Seats are svg elements. When ajax response returned, i want to hide loading gif. I wrote code below but it doesnt work.
<section>
<div class="parent" style="text-align: center;">
<div class="panzoom" style="width: 500px; height:375px;">
<div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div>
</div>
</div>
<div class="seperator"></div>
<div class="buttons" style="text-align:center;">
<input type="range" class="zoom-range">
<a class="button reset">Sıfırla</a>
</div>
<script>
$(function () {
var $section = $('section').first();
$section.find(".panzoom").svg({
loadURL: "https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg",onLoad:function(){
initAll();
}
});
$section.find(".panzoom").panzoom({
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
cursor: "auto",
increment: 0.6
});
});
function seatObject(id, label, status, token){
this.id = id;
this.label = label;
this.status = status;
this.token = token;
}
var seats = [];
function initAll(){
$(".seatObj").each(function(){
var id = $(this).attr("id");
var temp = new seatObject("#" + id, "label" + id, "available", "");
seats[id] = temp;
$(this).click(function () {
var currentSeat = $(this).attr("id");
$("#loading").show();
if (seats[currentSeat].status == "selected")
{
dequeueSeat(currentSeat);
}
else
{
enqueueSeat(currentSeat);
//alert($(this).attr("inkscape:label"));
}
});
});
$.ajax({
type: "GET",
url : "@Url.Action("GetFullSeats","Event")",
data:{layoutID:'@Model.LayoutID'},
dataType : "json",
success:function(result)
{
var uintArray = Base64Binary.decode(result);
for (var i = uintArray.length - 1; i >= 0; i--)
{
if (uintArray[i] > 0)
{
for (var j = 0; j < 8; j++)
{
if ((uintArray[i] & Math.pow(2, j)) == Math.pow(2, j))
{
seats[(((2047 - i) * 8) + j)].status = "sold";
}
}
}
}
drawSeats();
}
});
$.ajax({
type: "GET",
url : "@Url.Action("GetQueuedSeats", "Event")",
data:{
layoutID:'@Model.LayoutID'
},
dataType : "json",
success:function(result){
var queuedSeats = result.split(",");
$("#loading").hide();
for (var i = 0; i < queuedSeats.length; i++)
{
if (queuedSeats[i] != ""){
seats[queuedSeats[i]].status = "queued";
}
}
drawSeats();
}
});
}
function drawSeats(){
for (var i = 0; i < seats.length; i++)
{
if (seats[i].status == "available")
{
$(seats[i].id).css('fill','#888888');
}
if (seats[i].status == "sold")
{
$(seats[i].id).css('fill','#ff4848');
}
if (seats[i].status == "queued")
{
$(seats[i].id).css('fill','#F0B702');
}
if (seats[i].status == "selected")
{
$(seats[i].id).css('fill','#00c865');
}
}
}
function enqueueSeat(currentSeat){
$.ajax({
type: "GET",
url: "@Url.Action("EnqueueSeat", "Event")",
data:{
selectionGUID:"@(selectionGUID)",
seatID: currentSeat,
layoutID:'@(Model.LayoutID)'
},
dataType:"json",
success:function(data){
if(data != "")
{
seats[currentSeat].status = "selected";
seats[currentSeat].token = data;
}
drawSeats();
}
});
}
function dequeueSeat(currentSeat){
$.ajax({
type: "GET",
url: "@Url.Action("DequeueSeat", "Event")",
data:{
reservationToken:seats[currentSeat].token
},
dataType:"json",
success:function(data){
if(data)
{
seats[currentSeat].status = "available";
seats[currentSeat].token = "";
}
drawSeats();
}
});
}
</script>
</section>
You can just bind 2 functions to ajaxStart()
and ajaxStop()
respectively.
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
$.ajaxStart(function () {
$('#loading').show(); // show loading indicator
});
$.ajaxStop(function()
{
$('#loading').hide(); // hide loading indicator
});
These will be automatically called when Ajax requests begin or end.