mercredi 21 septembre 2016

Jquery not load form rendered from foreach cicle

I'm tring to render a form of details foreach item in a cart, on Laravel 5.2. By Clicking on checkbox ("#couponyes" or "#couponno") the page need to render or a data taken from database included in div whit id="azienda" (if #couponyes is hit) or a input form (if #couponno is hit) with div id="ritiro". Here is the full code:

<?php 
                     $carrelli = DB::table('carrello')->where('carrello.entry_by', \Session::get('uid'))->join('tariffe', 'tariffe.id', '=', 'carrello.id_tariffa' )->join('servizi', 'tariffe.id_servizio', '=', 'servizi.id')->distinct()->select('servizi.nome as nome_servizio', 'servizi.mod_servizio as mod_servizio', 'tariffe.geo as geo', 'carrello.source_geo as source', 'carrello.destination_geo as destination' )->get(); 

                    ?>
                  @foreach($carrelli as $carr)
                    @if(empty($carr->geo))
                    <fieldset style="height:600px">
                        <legend></legend>
                        <div class="row">
                            <div class="col-lg-6">
                              @if(!empty($coupon))
                                <p>Confermi di voler utilizzare gli indirizzi di presa e consegna previsti dalla tua la convenzione aziendale  ?</p>
                                 <label class="radio-inline">
                                    <input id="couponyes" type="radio" required name="coupon">&nbsp;&nbsp;   Si
                                  </label>
                                  <label class="radio-inline">
                                    <input id="couponno" type="radio" name="coupon">&nbsp;&nbsp;         No
                                  </label>
                                <div id="azienda" style="display:none;">
                                  <?php $punti_ritiro = DB::table('punti_ritiro_aziende')
                                    ->where('entry_by', $azienda->Id)
                                    ->where('id_tipologia', 1)
                                    ->orWhere('id_tipologia', 3)
                                    ->where('attivo', 1)
                                    ->get();
                                    $punti_consegna = DB::table('punti_ritiro_aziende')
                                    ->where('entry_by', $azienda->Id)
                                    ->where('id_tipologia', 2)
                                    ->orWhere('id_tipologia', 3)
                                    ->where('attivo', 1)
                                    ->get();
                                    ?>
                                  <div class="form-group" style="margin-top:50px">
                                    <label for="state">Punto di ritiro</label>
                                        @foreach($punti_ritiro as $punto_ritiro)
                                        <input type="text" readonly value=""></option>
                                        @endforeach
                                  </div>
                                  <hr>
                                  <div class="form-group" style="margin-top:50px">
                                    <label for="state">Punto di consegna</label>
                                        @foreach($punti_consegna as $punto_consegna)
                                        <input type="text" readonly value=""></option>
                                        @endforeach
                                  </div>
                                    <div>

                                    
                                    </div>
                                </div>
                                <div id="ritiro" style="display:none; margin-top:20px; margin-bottom:20px" >
                                @if($carr->mod_servizio == 1)    
                                  <div class="form-group">
                                    <label for="state">Punto di ritiro</label>  
                                    <input type="text" required name="indirizzo_ritiro" id="source1" class="form-control">
                                  </div>
                                @elseif($carr->mod_servizio == 2)
                                  <div class="form-group">
                                    <label for="state">Punto di consegna</label>  
                                    <input type="text" required name="indirizzo_consegna" id="source2" class="form-control">
                                  </div>
                                @elseif($carr->mod_servizio == 3)
                                <div class="form-group">
                                    <label for="state">Punto di ritiro</label>  
                                    <input type="text" required name="indirizzo_ritiro" id="source1" class="form-control">
                                  </div>
                                  <hr>
                                  <div class="form-group">
                                    <label for="state">Punto di consegna</label>  
                                    <input type="text" required name="indirizzo_consegna" id="source2" class="form-control">
                                  </div>
                                  @else
                                  @endif
                                </div>

                              @endif
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="address">Data ritiro</label>
                                      <div id="dataritiroS" ></div>
                                      <div id="dataritiroN" ></div>

                                </div>
                                <div class="form-group">
                                     <label for="address">Data riconsegna</label>
                                      <div id="dataconsegnaS" required style="display:none"></div>
                                      <div id="dataconsegnaN" required style="display:none"></div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    @else
                    <fieldset style="height:600px">
                        <legend>Ritiro scooter</legend>
                          <div class="row">
                            <div class="col-lg-6">
                              <div class="form-group" style="margin-top:50px">
                              <label for="state">Punto di ritiro</label>
                                <input type="text" readonly value="" readonly />
                            </div>
                              <hr>
                            <div class="form-group" style="margin-top:50px">
                              <label for="state">Punto di consegna</label>
                              <input type="text" readonly value=""/>
                            </div>                            
                          </div>
                        <div class="col-lg-6">
                          <div class="form-group">
                            <label for="address">Data ritiro</label>
                            <div id="dataritiro_geo" required></div>
                          </div>
                          <div class="form-group">
                            <label for="address">Data riconsegna</label>
                              <div id="dataconsegna_geo" required></div>
                          </div>
                        </div>
                      </div>
                    </fieldset>
                    @endif
                  @endforeach

and here is the javascript:

<script src="http://ift.tt/2a8rLkD"></script>
  <script>
$(document).ready(function(){
  var days = <?php echo json_encode($days); ?>;
  var dayx = <?php echo json_encode($dayx); ?>;
    $('[id="dataritiroS"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var day = date.getDay();
        return [days.indexOf(day) !== -1];
    }});
    $('[id="dataritiroN"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var dayz = date.getDay();
        return [dayx.indexOf(dayz) !== -1];
    }});
    $('[id="dataritiro_geo"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var dayz = date.getDay();
        return [dayx.indexOf(dayz) !== -1];
    }});
    $('[id="dataconsegna_geo"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var dayz = date.getDay();
        return [dayx.indexOf(dayz) !== -1];
    }});
});
  </script>
  <script>
$(document).ready(function(){
  var dayconsegnas = <?php echo json_encode($days); ?>;
  var dayconsegnax = <?php echo json_encode($dayx); ?>;
    $('[id="dataconsegnaS"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var dayconsegna = date.getDay();
        return [dayconsegnas.indexOf(dayconsegna) !== -1];
    }});
    $('[id="dataconsegnaN"]').datepicker({
      minDate : 0,
      beforeShowDay: function(date){
      var dayconsegnaz = date.getDay();
        return [dayconsegnax.indexOf(dayconsegnaz) !== -1];
    }});
});
  </script>
<script type="text/javascript">
 $(document).ready(function () {
  $('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var id_tariffa = button.data('tariffa') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
        modal.find('.hidden input').val(id_tariffa)
});
    $( document).on("click", "#couponyes", function () {
        $('[id="ritiro"]').hide('fast');
        $('[id="azienda"]').show('fast');
        $('[id="dataritiroN"]').hide('fast');
        $('[id="dataritiroS"]').show('fast');
        $('[id="dataconsegnaN"]').hide('fast');
        $('[id="dataconsegnaS"]').show('fast');
        $('[id="tariffaN"]').hide('fast');
        $('[id="tariffaS"]').show('fast');
    });
    $( document).on("click", "#couponno", function () {
        $('[id="ritiro"]').show('fast');
        $('[id="azienda"]').hide('fast');
        $('[id="dataritiroN"]').show('fast');
        $('[id="dataritiroS"]').hide('fast');
        $('[id="dataconsegnaN"]').show('fast');
        $('[id="dataconsegnaS"]').hide('fast');
        $('[id="tariffaN"]').show('fast');
        $('[id="tariffaS"]').hide('fast');
    });
});
$('#cellulare').blur(function(evt) {
    evt.target.checkValidity();
}).bind('invalid', function(event) {
   alert('Il telefono deve contenere almeno 11 caratteri numerici');
});
</script>

This working on couponyes radio but on couponno only the first item of cicle is rendered...



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire