我有一个座位图。当我点击一个座位,我想说明一个加载GIF。座位图表来自SVG文件。座位SVG元素。当Ajax响应回来后,我想隐藏加载GIF。我写了code以下,但它不工作。
<节> < DIV CLASS =父母的风格=文本对齐:中心;> < DIV CLASS =panzoom的风格=宽度:500px的;高度:375px;> < DIV CLASS =装的风格=显示:无ID =加载>< IMG SRC =../../脚本/ spinner.jpg的风格=宽度:200像素;填充左:为175px;/>< / DIV> < / DIV> < / DIV> < DIV CLASS =分隔符>< / DIV> < DIV CLASS =按钮的风格=文本对齐:中心;> <输入类型=范围级=缩放范围> <一类=键复位>Sıfırla< / A> < / DIV> <脚本> $(函数(){ 变量$节= $('部分')第()。 $ section.find(。panzoom)。SVG({ 使用loadURL:resources-biletino.s3.amazonaws/content/venue/17/seatChart-01.svg的onLoad:函数(){ initAll(); } }); $ section.find(。panzoom)。panzoom({ $ zoomRange:$ section.find(变焦范围。) $复位:$ section.find,(复位。) 光标:自动, 增加:0.6 }); }); 功能seatObject(ID,标签,状态,令牌){ this.id = ID; this.label =标签; this.status =状态; this.token =令牌; } 变种座椅= []; 传播initAll(){ $(seatObj)。每个(函数(){ VAR ID = $(本).attr(ID); 变种临时=新seatObject(#+编号标签+ ID,可用,); 席[ID] =温度; $(本)。点击(函数(){ VAR currentSeat = $(本).attr(ID); $(#加载)显示()。 如果(席[currentSeat] .STATUS ==选择) { dequeueSeat(currentSeat); } 其他 { enqueueSeat(currentSeat); //alert($(this).attr("inkscape:label)); } }); }); $阿贾克斯({ 键入:GET, 网址:@ Url.Action(GetFullSeats,事件), 数据:{layoutID:@ Model.LayoutID}, 数据类型:JSON, 成功:函数(结果) { VAR uintArray = Base64Binary.de code(结果); 对于(VAR I = uintArray.length - 1; I> = 0;我 - ) { 如果(uintArray [I] 0) { 对于(VAR J = 0; J< 8,J ++) { 如果((uintArray [1] - 安培; Math.pow(2,j)的)== Math.pow(2,j))后 { 。座位[(((2047 - I)* 8)+ J)状态=卖; } } } } drawSeats(); } }); $阿贾克斯({ 键入:GET, 网址:@ Url.Action(GetQueuedSeats,事件), 数据:{ layoutID:@ Model.LayoutID }, 数据类型:JSON, 成功:函数(结果){ 变种queuedSeats = result.split(,); $(#加载)隐藏()。 对于(VAR I = 0; I< queuedSeats.length;我++) { 如果(queuedSeats [I]!=){ 。座位[queuedSeats [I]状态=排队; } } drawSeats(); } }); } 功能drawSeats(){ 对于(VAR I = 0; I< seats.length;我++) { 如果(席[I] .STATUS ==可用) { $(席[I] .ID)的.css('补','#888888'); } 如果(席[I] .STATUS ==卖) { $(席[I] .ID)的.css('补','#ff4848'); } 如果(席[I] .STATUS ==排队) { $(席[I] .ID)的.css('补','#F0B702'); } 如果(席[I] .STATUS ==选择) { $(席[I] .ID)的.css('补','#00c865'); } } } 功能enqueueSeat(currentSeat){ $阿贾克斯({ 键入:GET, 网址:@ Url.Action(EnqueueSeat,事件), 数据:{ selectionGUID:@(selectionGUID), seatID:currentSeat, layoutID:@(Model.LayoutID)' }, 数据类型:JSON, 成功:功能(数据){ 如果(数据!=) { 席[currentSeat] .STATUS =选择; 席[currentSeat] .token =数据; } drawSeats(); } }); } 功能dequeueSeat(currentSeat){ $阿贾克斯({ 键入:GET, 网址:@ Url.Action(DequeueSeat,事件), 数据:{ reservationToken:席[currentSeat] .token }, 数据类型:JSON, 成功:功能(数据){ 如果(数据) { 席[currentSeat] .STATUS =可用; 席[currentSeat] .token =; } drawSeats(); } }); } < / SCRIPT> < /节>解决方案
您只需2个功能结合到 ajaxStart()和 ajaxStop() 分别。
.ajaxStart()
注册一个处理程序的第一个Ajax请求开始时被调用。 这是一个Ajax事件。
.ajaxStop()
注册一个处理函数,当所有Ajax请求已完成被调用。 这是一个Ajax事件。
$。ajaxStart(函数(){ $('#装载)显示()。 //显示加载指示器 }); $ .ajaxStop(函数() { $('#装载)隐藏()。 //隐藏负荷指标 });这些将在Ajax请求开始或自动调用结束。
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: "resources-biletino.s3.amazonaws/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.
更多推荐
显示加载GIF,等待Ajax响应
发布评论