Trying to create an ajax-form as described in: http://framework7.io/docs/form-ajax-submit.html , namely:

<form id="feedback-form" class="ajax-submit" action="http://mysite/mFeedBack" method="POST"> <div class="content-block-title">Форма обратной связи</div> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label"><label for="FeedBackForm_name" class="required">Имя <span class="required">*</span></label></div> <div class="item-input"> <input name="FeedBackForm[name]" id="FeedBackForm_name" type="text"> </div> </div> </div> </li> ..... ..... ..... </div> <div class="content-block"> <input class="button active" type="submit" name="yt0" value="Отправить сообщение"></div> </form>

In JavaScript I have written the following:

 $$('form.ajax-submit').on('submitted', function (e) { myApp.alert('Here goes alert text'); var xhr = e.detail.xhr; var data = e.detail.data; });

As a result, an AJAX request after clicking the submit button Send message goes to the server, but the JavaScript code is not executed. Whether it is or not, it does not work.

What is wrong doing? All because of the instructions

  • sorry wrong really deleted an unnecessary tag. - Enshtein

1 answer 1

The problem was that I registered the submitted events in the general JacaScript listings, when my form was loaded by reference as a view, therefore it was necessary to use the registration of the event in another event: onPageInit:

 var myApp = new Framework7({ modalTitle: 'MyApp', onPageInit: function (app, page) { if (page.name === 'site_feedback') { $$('form.ajax-submit').on('submitted', function (e) { var xhr = e.detail.xhr; var data = e.detail.data; myApp.alert(data); }); } } });
  • Great that you could figure it out! - VenZell