CODEWITHSUNDEEP
javascriptjquery
Pawan
Pawan

Reputation: 32331

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

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 )

Upvotes: 1

Views: 1311

Answers (4)

Mahendra Sonwane
Mahendra Sonwane

Reputation: 41

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

Upvotes: 0

user2560539
user2560539

Reputation:

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

Upvotes: 0

Patrioticcow
Patrioticcow

Reputation: 27058

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>

Upvotes: 3

kshitij
kshitij

Reputation: 608

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.

Upvotes: -1

Related Questions