How to show a indicator when clicked on a Button in this case

Question

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

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 )

score 3 · Accepted Answer · answered May 31 '16 at 21:33

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>

score 0 · Answer 2 · 2016-06-02T21:55:59.523

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

score 0 · Answer 3 · answered Jun 07 '16 at 11:18

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;
});

score -1 · Answer 4 · edited May 23 '17 at 11:52

-1

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.

edited May 23 '17 at 11:52

Community

1
1

answered May 23 '16 at 11:23

kshitij

513
3
9

i tried this is not working , could you please let me know how to do this ?? – Pawan May 23 '16 at 12:38
try appending this $('#nonetconnmain').append(''); this will append a loader to your html to show some kind of processing – kshitij May 23 '16 at 14:42
@PreethiJain: I included the comment of kshitij into the question. – zx485 May 31 '16 at 16:20

How to show a indicator when clicked on a Button in this case

4 Answers4