在这种情况下，单击按钮时如何显示指示器

Question

On Click Of the Try Again Button , is it possible to show some processing happening on the device

My jsfiddle

My code as below

$(document).on("click", ".getStarted", function(event) {
    // Simulating Net Connection here
    var a = 10;
    if (a == 10) {
        $('#mainlabel').delay(100).fadeIn(300);
        $('#nonetconnmain').popup({
            history : false
        }).popup('open');
        event.stopImmediatePropagation();
        event.preventDefault();
        return false;
    }
});
$(document).on('click', '.nonetconnmainclose', function(event) {
    $('#nonetconnmain').popup('close');
    $(".getStarted").trigger("click");
    event.stopImmediatePropagation();
    event.preventDefault();
    return false;
});

$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
    $('#mainlabel').hide();
});  

With my code , the functionality is working , but it seems that the application is not doing any action

So my question is it possible to show any indication (For example , delay , progressbar , anything )

Answer 1

Here ya go

 $(document).on("click", ".getStarted", function(event) { $.mobile.loading("show", { text: "", textVisible: true, theme: "z", html: "" }); // Simulating Net Connection here var a = 10; if (a == 10) { setTimeout(function() { $.mobile.loading("hide"); $('#mainlabel').fadeIn(300); }, 1000); $('#nonetconnmain').popup({ history: false }).popup('open'); event.stopImmediatePropagation(); event.preventDefault(); return false; } }); $(document).on('click', '.nonetconnmainclose', function(event) { $('#nonetconnmain').popup('close'); $(".getStarted").trigger("click"); event.stopImmediatePropagation(); event.preventDefault(); return false; }); $(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) { $('#mainlabel').hide(); }); 

 .popup { height: 200px; width: 150px; } .popup h6 { font-size: 1.5em !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> <div data-role="page"> <div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a"> <div class="popup_inner popup_sm"> <div class="popup_content" style="text-align:center;"> <p class="">Please check net connectivcty</p> <label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check</label> </div> <div class="popup_footer nonetconnmainclose"> <a class="">Try Again</a> </div> </div> </div> <button class="getStarted btn btn-a get_btn">Click Here</button> </div> 

Answer 2

You can use a small function (with time as parameter) and use jQuery animate() to create the process effect like below.

var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}

Do notice that the time that is chosen when calling updateProgress() is relevant with the delay and the fade in effect of the text message

updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);

Check it on the snippet below

 var updateProgress = function(t) { $( "#p" ).css("width",0); $( "#p" ).show(); $( "#p" ).animate({ "width": "100%" }, t , "linear", function() { $(this).hide(); }); } $(document).on("click", ".getStarted", function(event) { var a = 10; if(a==10) { updateProgress(3500); $('#mainlabel').delay(3400).fadeIn(600); $('#nonetconnmain').popup({history: false}).popup('open'); event.stopImmediatePropagation(); event.preventDefault(); return false; } }); $(document).on('click', '.nonetconnmainclose', function(event) { $('#nonetconnmain').popup('close'); $(".getStarted").trigger("click"); event.stopImmediatePropagation(); event.preventDefault(); return false; }); $(document).on("popupbeforeposition", "#nonetconnmain",function( event, ui ) { $('#mainlabel').hide(); }); 

 .popup { height: 200px; width: 400px; } .popup h6 { font-size: 1.5em !important; } #p { border:none; height:1em; background: #0063a6; width:0%; float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"/> <div data-role="page"> <div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a"> <div class="popup_inner popup_sm"> <div class="popup_content" style="text-align:center;"> <p class="">Please check net connectivcty</p> <div id="p"></div><br> <label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check </label> </div> <div class="popup_footer nonetconnmainclose"> <a class="">Try Again</a> </div> </div> </div> <button class="getStarted btn btn-a get_btn">Click Here</button> </div> 

Fiddle

Answer 3

Probably when you click on try again , you can have a setinterval triggered which can check for online connectivity and when found can close the popup and get started again, also when we do retries in the interval the progress can be shown as progressing dots.. Below is the code, i haven't tried to run the code, but it shows the idea

$(document).on('click', '.nonetconnmainclose', function(event) {
var msgUI = $("#mainlabel");
msgUI.data("previoustext",msgUI.html()).html("retrying...");
var progress = [];
var counter = 0 ,timeout = 5;
var clearIt = setInterval(function(){
    var online = navigator.onLine;
    progress.push(".");
    if(counter > timeout && !online){
        msgUI.html(msgUI.data("previoustext"));
        counter=0;
    }
    if(online){
        $('#nonetconnmain').popup('close');
        $(".getStarted").trigger("click");
        counter=0;
        clearInterval(clearIt);
    }
else{
    msgUI.html("retrying" + progress.join(""));
    counter++;
}

},1000);
event.stopImmediatePropagation();
event.preventDefault();
return false;
});

Answer 4

Sure,

try appending a loader GIF to one of the div and remember to remove the same when your process is finished.

Kindly refer to StackOverflow

And try appending this

$('#nonetconnmain').append('<center><img style="height: 50px; position:relative; top:100px;" src="cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/…; alt="loading..."></center>'); 

This will append a loader to your HTML to show some kind of processing.