Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting initial values on load with Select2 with Ajax

I have select2 controls set up with Ajax (have both single and multiple). I'm trying to have some values on page load but I'm not able to get this to work however. My code for select2 is given below:

function AjaxCombo(element, url, multival ){  // multival = true or false   multival = multival || false;   $(element).select2({    minimumInputLength: 2,    multiple: multival,    separator: '|',    ajax: {      url: url,      dataType: 'json',      data: function (term, page) {         var targetname = $(this).attr('name');         var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));        return {          targettype: "search",          target: target,          search: term        };      },      results: function (data, page) {        return { results: data };      }    }  }); } AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false); AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true); 

The Ajax combo works fine, am having trouble only with the initial values load. I tried this code below but couldn't get it to work:

initSelection : function (element, callback) {     var elementText = $(element).attr('data-initvalue');     callback(elementText); } 

My HTML from php is returned as below :

<input name='header[country]' class='ajaxselect'  data-initvalue='[{"id":"IN","name":"India"}]' data-placeholder='Select Country' value='' /> 

I see that values are populated from php, only my jquery is having issues. My values in the control show up as US | United States of America. I guess I have edited the select2 source for getting this format as default without using format option.

Can anyone please help me populate the default values? Thanks in advance.

EDIT: This question pertains to Select2 version <4.0. This option is removed from v4.0 and is much simpler now.

like image 339
Ravi Avatar asked Sep 09 '13 13:09

Ravi


People also ask

How can I set the initial value of Select2 when using Ajax?

var initial_creditor_id = "3"; $(". creditor_select2"). select2({ ajax: { url: "/admin/api/transactions/creditorlist", dataType: 'json', delay: 250, data: function (params) { return { q: params. term, c_id: initial_creditor_id, page: params.

How do I assign a value to Select2?

To set selected value of jQuery Select2 with JavaScript, we call val and then trigger . Then we set its value with val to the option with value 0. Finally, we call trigger with 'change' to update the drop down to show the value we set.

How do I initiate Select2?

Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call . select2() on any jQuery selector where you would like to initialize Select2. // In your Javascript (external . js resource or <script> tag) $(document).


1 Answers

Maybe this work for you!! This works for me...

initSelection: function (element, callback) {              callback({ id: 1, text: 'Text' }); } 

Check very well that code is correctly spelled, my issue was in the initSelection, I had initselection

like image 81
JD - DC TECH Avatar answered Nov 06 '22 12:11

JD - DC TECH