[Robert]

I have created a ajax script to add records to DB and now want to update the chosen dropdown to see the records without refreshing the page ..

 

I have 

<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/oportunitati/add',
            data: tdata, 

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

                // update dropdown ??
                $('.chosen-select').trigger('liszt:updated');
            },
            error: function (XHR, status, response) {
               alert('fail');
            }
        });
    });
});
</script>

I have tried :

$('.chosen-select').trigger('liszt:updated');

$('#field-beneficiar_p').trigger('chosen:updated');

$('field-beneficiar_p').trigger('liszt:updated');

The field name is :

<select id='field-sectiune_p' name='sectiune_p' class='chosen-select' data-placeholder='Selecteaza Categorie'>

any suggestions ? 

[Amit Shah]

well.. u triggering the list update .. that will just pickup the value from the select option and beautify it .. for the dropdown it shows. It wont actually add any element to the dropdown. For that .. u need to do it in the ajax success stuff where u add the element to the dropdown and then post that u trigger the updates .. and it will update the data in the beautified list accordingly.

[Robert]

I did it in the ajax success

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

and i tried a loot of different stuff but with no success ... can you provide a example if you have time ?

Thanks for the replay.

[Amit Shah]

well.. what you are doing .. is just triggering liszt:updated ... but that will just re-render the styled dropdown.. before doing that.. are you updating the options of the list ?? That is exactly what i will recommend u do for the same. That should help you resolve on the thing.

[Robert]

How can I update the options of the list ? all i find was uses of "chosen:updated" and "liszt:updated" ...

 

Is there any way to provide me a small example or a link ?

Thanks for your time.

[Robert]

This is the code i have so far ..

 

View :

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

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="myModal" 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</h4>
            </div>
            <div class="modal-body" >
                <form class="sky-form" id="sky-inchidere" method="post" accept-charset="utf-8" action="">
                        <dl class="dl-horizontal" style="min-height:100px">

                            <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="name" id="name" required>
                                        <b class="tooltip tooltip-bottom-right">Add</b>
                                    </label>
                                </section>
                            </dd>

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

<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)   {
                // close the model
                $('#myModal').modal('hide');

                // update dropdownlist ??
                $('.field-beneficiar_p').trigger('chosen:updated');

            },
            error: function (XHR, status, response) {
               alert('fail');
            }
        });
    });
});
</script>

Controller (I added the modal code here for test)  :

    public function add()    {
     $tdata = array( 'name' => $this->input->post('name') );
     $this->db->insert('table', $tdata);
    }

 

All works good except I don't no how to update the dropdownlist with the new item added .... If someone done this any help will be appreciated.

.

[Amit Shah]

Well if i understand the scenario correctly.. what you intend to do is by some mean when u save that form u mentioned, there is a dropdown in the form that u need to update it automatically. For that there are 2 options... 1 using the javascript append another option to the select (dropdown) for the value that got saved. Once done - then u trigger the list update - and it will reflect you the new item added.

2 - Make an ajax call where u get a fresh list of options to be replaced in the dropdown, on success - empty the dropdown and fill it with the options retrieved. Then trigger the list update -and u should be able to reflect the new list.

[Robert]

Ok .. so I change :

	public function add()	{
		$tdata = array( 'name' =>  $this->input->post('name') );

		// insert the new record
	        $this->db->insert('table', $tdata); 

		// get the row elements
		$q = $this->db->get_where('table', array('id' => $this->db->insert_id()));
		$data = $q->row();

		// create array and encode with json
		$last_insert = array('id' => $data->id, 'den' => $data->denumire, );
		$json = json_encode($last_insert);
	    
	    return $json;
	}

Dont no if this is the correct way to send the inserted id/name to the view ?

 

 

Then in the view :

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

                // add the record and refresh
                $(".chosen-select").append("<option value='9999'>A new option!!</option>");
                $('.chosen-select').trigger('liszt:updated');
            }

But how can i decode the json in the view ? 

 

i read i need to do something like 

$obj = json_decode($json);
print $obj->{'id'};

but im stuck on how to change my code .....

[Amit Shah]

u dont need to decode json .. in the javascript.. u can manage json directly!! u rather just have to use the json and populate the select

heres the example.....

http://stackoverflow.com/questions/5918144/how-can-i-use-json-data-to-populate-the-options-of-a-select-box