By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,453 Members | 3,225 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,453 IT Pros & Developers. It's quick & easy.

AJAX opens form (each radio diplays one by one in popup) & close btn saves data

P: 1
I have form in nette framework where the form works wel. When I added AJAX it stopped to work propely and then I added functionality to "close" button that the answers will be saved after each other. The form is styled that each questions appears on popup seperatly. The js code problems:

Answers aren't saving values in the database after pushing "close" button.

The Ajax should close the form once it is submitter but right now it opens a form istead.


Expand|Select|Wrap|Line Numbers
  1. <!-- LATTE template in Nette -->
  2.  
  3.  
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  5.  
  6.  
  7.  
  8.   <a href="#netPromoterScoreModel" id="open-button" class="btn btn-pink btn-lg btn-block" data-toggle="modal">Dotaznik</a>
  9.  
  10.  
  11.     {form netPromoterScore class => 'ajax-form'}
  12.  
  13.      <!-- FORM START -->
  14.     <div id="netPromoterScoreModel" class="modal fade nps" role="dialog">
  15.       <div class="modal-dialog modal-lg">
  16.  
  17.                 <!-- Modal content-->
  18.                 <div class="modal-content">
  19.  
  20.           <div class="modal-header">
  21.             <h5 class="modal-title">Dotaznik</h5>
  22.             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  23.               <span aria-hidden="true"></span>
  24.             </button>
  25.           </div>
  26.  
  27.           <!-- QUESTION 1 -->
  28.           <div id="question0" class="modal-body">
  29.                       <div class="row">
  30.               <div class="col-12 form-group">
  31.                 {label recommendation}
  32.               </div>
  33.               <div id="radios" class="col-12 form-group">
  34.                 {input recommendation}
  35.               </div>  
  36.               <div class="col-12 modal-footer">
  37.                 <a href="javascript:void(0)" class="btn btn-pink" onclick="goNext(0)">Next Question</a>
  38.                 <button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
  39.               </div>
  40.             </div>
  41.                   </div>
  42.  
  43.  
  44.           <!-- QUESTION 2 -->
  45.           <div id="question1" class="modal-body" hidden>
  46.                       <div class="row">
  47.               <div class="col-12 form-group">
  48.                 {label website}
  49.               </div>
  50.               <div id="radios" class="col-12 form-group">
  51.                 {input website}
  52.               </div>
  53.               <div class="col-12 modal-footer">
  54.                 <a href="javascript:void(1)" class="btn btn-pink" onclick="goNext(1)">Next Question</a>
  55.                 <button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
  56.               </div>
  57.             </div>
  58.                   </div>
  59.  
  60.           <!-- QUESTION 3 -->
  61.           <div id="question3" class="modal-body" hidden>
  62.                       <div class="row">
  63.               <div class="col-12 form-group">
  64.                 {label feedback}
  65.               </div>
  66.               <div id="textInput" class="col-12 form-group">
  67.                 {input feedback}
  68.               </div>
  69.               <div class="col-12 modal-footer">
  70.                 <button type="submit" class="btn btn-pink">Submit</button>
  71.               </div>
  72.             </div>
  73.                   </div>
  74.  
  75.  
  76.         </div> <!-- END of modal content-->
  77.  
  78.             </div> <!-- end of Modal dialog-->
  79.         </div> <!--end of the form-->
  80.  
  81.     {/form}
  82.  
  83. </div>
  84.  
  85. <script type="text/javascript">
  86. // jQuery
  87. //next question
  88. function goNext(i) {
  89.     $('#question'+i).attr('hidden', true);
  90.     $('#question'+(i+1)).attr('hidden', false);
  91. }
  92.  
  93. // for submit after each question 
  94. $(document).ready(function(){ 
  95.     $('#submit').click(function(){ 
  96.         ('input[type="radio"]').click(function(){
  97.             // variables for inputs
  98.             var recommendation = $('#recommendation').val();  
  99.             if(input[name="recommendation"]:checked) { 
  100.             $('#return').html('<h4 style="color:red;">Required All Fields..</h4>'); 
  101.             } 
  102.             else { 
  103.             // ajax in nette
  104.             $.nette.ajax({
  105.             method: 'GET',
  106.             url: url
  107.             data:$('#insert_data').serialize(), 
  108.             success:function(data){ 
  109.             $('form').trigger("reset"); 
  110.             $('#return').fadeIn().html(data); 
  111.             setTimeout(function(){ 
  112.             $('#return').fadeOut("slow"); 
  113.             }, 6000); 
  114.             } 
  115.             }); 
  116.             } 
  117.         }
  118.     }); 
  119. }); 
  120. </script>
May 6 '19 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,333
to be honest digging through such code which obviously is somehow a template in whatever 'framework' is somehow a pain - since probably only few people know about that framework. what i can see for example is that something like:

Expand|Select|Wrap|Line Numbers
  1. if(input[name="recommendation"]:checked) {
will trigger a syntax error - unless that 'framework' will have a transpile step before the page is delivered to the client and fixes that syntax during such a step.

your best bet is to just open the developer tools of the browser you are using and checking whats going on - which means javascript errors, what values are transferred with the requests and so on. then you can eliminate all the obvious errors first and then you might have a question that you can ask more specific and probably with a more specific part of some code.

PS: another problem is probably here:

Expand|Select|Wrap|Line Numbers
  1. $('#submit').click(function(){ 
  2.         ('input[type="radio"]').click(function(){
  3.  
which basically would assign a click handler to a node, which in this case i think is not correctly retrieved, when the click handler of the submit element would be executed (aka be clicked).
May 10 '19 #2

Post your reply

Sign in to post your reply or Sign up for a free account.