Canvas Support

select loses style after being loaded by ajax

3 replies · opened Dec 19, 2017

AarakanbrasilDec 19, 2017

Hi,

I am loading select box class = "select-1 form-control" through an ajax request.
The point is that the new select that is generated in the program ajax_carrega.php does not assume the style although it belongs to the class I created that defines the styles for the dropdowns.

Why does Selectbox lose the style after the ajax call?

Can you help me?

SSemicolon WebSTAFFDec 21, 2017

Hello,

This is the default behavior of any JS component loaded via AJAX. Since Select Box uses JS, you will need to reinitialize it after the AJAX loads completely. Simply use the following code in the AJAX Callback: 

$(".select-1").select2({
	placeholder: "Select Multiple Values"
});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AarakanbrasilDec 21, 2017

Hello,

Thanks for the answer. I did tests here and could not resolve. I'm sending the code.txt file containing parts of the index.php code and processa_1.php. Could you send me where I include the code you indicated?

Thank you
Arakan

📎 code.txt2 KB
SSemicolon WebSTAFFDec 21, 2017

Hello,

  1. It is recommended to move your Custom JS Codes to the bottom of the Page just after the js/functions.js JS File Linking.

  2. Find the following code:

success: function(txt) {$('#ajax_marca1').html(txt);}

and replace it with: 

success: function(txt) {
	$('#ajax_marca1').html(txt);
	$(".select-1").select2({
	    placeholder: "Select Multiple Values"
	});
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard