Welcome Guest, Not a member yet? Register   Sign In
Dropdown - add records without refresh form
#1

Is there a way to add records to a dropdown menu without refresh of the page ? 


Thanks for your time.
Reply
#2

Yes. Use ajax calls.
Best regards,
José Postiga
Senior Backend Developer
Reply
#3

(01-19-2015, 03:00 PM)josepostiga Wrote: Yes. Use ajax calls.

I was looking into it but with no success so far .. if you have time can you provide more informations ? 

Thanks for your time
Reply
#4

(This post was last modified: 01-20-2015, 12:15 AM by GrigoreMihai.)

If the state is add, create a button on the div for adding a new record :

Code:
   <?php if($state == 'add')  { ?>
       $(document).ready(function() {
           $('#div_id').append('<a class="btn" id="button" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="icon-plus-sign"></i> New </a>');
       });
   <?php } ?>

Bootstrap normal model :
Code:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
       <div class="modal-content">
           <div class="modal-header">
               <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
               <h4 id="myLargeModalLabel" class="modal-title">Add new Record</h4>
           </div>
           <div class="modal-body">
               
               <form class="sky-form" id="sky-inchidere" method="post" accept-charset="utf-8" action="">
                       <dl class="dl-horizontal">

                           <dt>Name<span class="color-red">*</span></dt>
                           <dd>
                               <section>
                                   <label class="input">
                                       <i class="icon-append fa fa-inbox"></i>
                                       <input type="text" value="" name="denumire" required>
                                       <b class="tooltip tooltip-bottom-right">Add Name</b>
                                   </label>
                               </section>
                           </dd>

                       </dl>
                   <hr>
                   <button type="submit" class="btn-u" style="float:right; margin-top:-5px;">Submit</button>
               </form>
           </div>
       </div>
   </div>
</div>


ajax :
Code:
<script type="text/javascript">
$(document).ready(function(){

   $("#sky-inchidere").submit(function(e){
       e.preventDefault();

       var tdata= $("#sky-inchidere").serializeArray();

       $.ajax({
           type: "POST",
           url: 'http://localhost/new/test/add',
           data: tdata,

           success:function(tdata)
           {
               alert('SUCCESS!!');
           },
           error: function (XHR, status, response) {
              alert('fail');
           }

       });
   });
});
</script>


controller ( I have added here the model just for test )

Code:
    public function add()    {
        $tdata = array(
          'denumire' =>  $this->input->post('denumire'),
        );
        $this->db->insert('clienti',$tdata);

    }
Reply
#5

I manage to fix my code .. but i have come upon a different problem .. This is not related to CI but if someone else come across the problem and know a solution ...

Code:
           success:function(tdata)
           {
               // close the modal
               $('#myModal').modal('hide');

               // update dropdown ??
               $('.chosen-select').trigger('liszt:updated');
           },

In the ajax success i manage to close the model and now trying to refresh the chosen dropdown menu ... 
I have tried 
Code:
$('.chosen-select').trigger('liszt:updated');
$('#field-beneficiar_p').trigger('chosen:updated');
$('field-beneficiar_p').trigger('liszt:updated');

but with no luck ... so if anyone know a solution or has any ideas ....

Thanks for you time.
Reply
#6

Code:
$(".chosen-select").append("<option value='31'>A new option!!</option>");
Reply
#7

(This post was last modified: 01-22-2015, 06:03 AM by GrigoreMihai.)

(01-21-2015, 02:21 PM)CroNiX Wrote:
Code:
$(".chosen-select").append("<option value='31'>A new option!!</option>");

Thanks with some changes i manage to fix my problem.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB