Framework7 - Abort Ajax

by Maiki Nahara

HTML

<script src="https://unpkg.com/framework7/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges">
    <div class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link panel-open" data-panel="left">Left Panel</a>
          </div>
          <div class="title sliding">My App</div>
          <div class="right">
            <a href="#" class="link panel-open" data-panel="right">Right Panel</a>
          </div>
        </div>
      </div>
      <!-- Toolbar-->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#" class="link">Left Link</a>
          <a href="#" class="link">Right Link</a>
        </div>
      </div>
      <div class="page">
        <div class='page-content'>
        <div class="list inline-labels no-hairlines-md">
  <ul>
    <li class="item-content item-input">
      <div class="item-media">
        <i class="icon demo-list-icon"></i>
      </div>
      <div class="item-inner">
        <div class="item-title item-label">Timeout (ms)</div>
        <div class="item-input-wrap">
          <input type="number" placeholder="50" id='timeoutValue'>
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    </ul>
    <div class='block'>
            <button class='button button-fill btn-call-ajax'>Trigger Ajax</button>
          </div>
    </div>
          
        </div>
      </div>
    </div>
  </div>

CSS

#app {

  border: 1px solid gray;
}

#calendar,
#calendar-events {
  height: 50%;
  box-sizing: border-box;
}

#calendar .calendar {
  height: 100%;
}

#calendar-events ul {
  height: 100%;
  overflow: auto;
}

#calendar-events .event-color {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
}

@media (orientation: landscape) {
  #calendar {
    float: left;
  }

  #calendar,
  #calendar-events {
    height: 100%;
  }

  #calendar,
  #calendar-events {
    width: 50%;
  }

  #calendar-events {
    margin-left: 50% !important;
    border-left: 1px solid #eee;
  }

  .theme-dark #calendar-events {
    border-left-color: #282828;
  }
}

JavaScript

var $$ = Dom7
var app = new Framework7({
  root: '#app',
  theme: 'ios'
});

var viewMain = app.views.create('.view-main');


$$('.btn-call-ajax').on('click', function () {
	var self = app
  var timeout = $$('#timeoutValue').val()
  if (!timeout) {
  	app.dialog.alert('Must set a timeout for xhr')
  return
  }
  timeout = parseInt(timeout)
  app.request.promise({
  beforeSend: xhr => {
        xhr.timeout = timeout
        xhr.ontimeout = function (e) {
        		app.dialog.alert(`xhr timeout with timeout: ${timeout} ms`)
        }
      },
      url: 'https://jsonplaceholder.typicode.com/photos',
      method: 'GET',
      dataType: 'json',
      data: {}
  }).then(res => {
  app.dialog.alert(`xhr succes with timeout: ${timeout} ms \n see console for detail`)
console.log(res)
}).catch(err => {
app.dialog.alert(`xhr error with timeout: ${timeout} ms \n see console for detail`)
console.log(err)
})
  /*
app.request.get('https://jsonplaceholder.typicode.com/photos', {}, function (res) {
debugger
}, function (err) {
	debugger
}, 'json')*/
})