Preethi Jain Preethi Jain - 6 months ago 13
jQuery Question

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

This is my jsfiddle

http://jsfiddle.net/L5cNX/53/

This is my code

$(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

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>