1
Next. I have an input select with States (Rj, SP, MS), When I select it, it does a search via ajax ($.post) and brings me as a response, in JSON, the data of the cities (code, name, Uf, status) in a list with a checkbox + city name. I’ll post the code below:
jQuery('#cidade_select').on('change', function() {
var data = $(this).val();
var cidade_url = 'rota_cidades.php';
if (data) {
$.post(cidade_url, {
cidade: data,
},
function(j) {
var options = '<h4 class="text-center col-md-12 ml-3">Selecione a cidade para ativá-la no mapa da página <strong>"Localidades"</strong></h4>';
var j = jQuery.parseJSON(j);
for (var i = 0; i < j.length; i++) {
options += '<div class="col-md-4 mt-2">' +
'<div class="custom-control custom-switch custom-control-success">' +
'<input type="checkbox" class="custom-control-input" id="cidade_' + j[i].cod_cidade + '" name="cidade_status" data-status="' + j[i].cod_cidade + '" ' + (j[i].status ? "checked" : "") + ' value="1" />' +
'<label class="custom-control-label" for="cidade_' + j[i].cod_cidade + '"><span class="d-none d-sm-inline-block"> (' + j[i].ddd + ')' + j[i].cidade + '-' + j[i].cidade_uf + ' </span></label>' +
'</div>' +
'</div>';
}
$(".listar_cidades").html(options);
}
);
} else {
$(".listar_cidades").html('<h4 class="text-center py-5"> Selecione o Estado Primeiro. </h4>');
}
});
Works just like the picture above. All cities with stylized checkbox appear and etc. however, it does not take the action of changing the state of the checkbox element according to the other code:
// Alterar Status
$('input[name="cidade_status"]').on('change', function() {
var data = $(this).data();
if (data.status > 0) {
Iwas.helpers('notify', {
type: 'success',
icon: 'fa fa-check mr-1',
message: 'Quase lá! Continuar testando'
});
} else {
Iwas.helpers('notify', {
type: 'danger',
icon: 'fa fa-check mr-1',
message: 'Ops! Algo deu errado. Fale com o desenvolvedor.'
});
}
});
When I do this, for example in pure HTML code, it works! The notify message appears, Only when it is generated via javascript that does not work. What can it be? What am I doing wrong??
I’m already a few days analyzing, testing and I haven’t gotten to the answer yet. I have the same system on another site though, using Select/Option for popular city neighborhoods. Can someone help me, please??? :)
Does it not give any error in the console? When you did the direct test in HTML, how did you do? The code is exactly the same and you put it inside the <script></script tag>?
– Jaderson
Yeah, it’s the same code, so much so that I copied it from a working one first. I always do the html test first to check spacing and styling before moving to a dynamic generation, but it won’t. It generates the element with proper spacing and styling. The Element is clickable. However, no error, no message on the console. I tried, I researched and I found nothing. It’s tense! rsrs
– Diogo Oliveira Lins
Place a.log console inside your Jquery onchange, just after this snippet: "$('input[name="city_status"]'). on('change', Function() {". So you’ll know if he’s getting the event properly... If you’re not getting the event, it could be the js file structure you’re using, or you didn’t import, I don’t know.
– Jaderson
Another strategy would be to add this chunk in Jquery within a function and to dynamically place this direct function in html. You already do this... You only need to add your function to the onchange of the element. Something like this: '<input type="checkbox" onchange=" ' + myFuncao() + ' " />' Remember that when you add the snippet of your direct code to an HTML event, you no longer need this line: "$('input[name="city_status"]'). on('change', Function() {"
– Jaderson
I had already used the console.log. I think it was the first one I used. Debug is everything! But this one doesn’t even tell in debug. It simply works the On/Off function but does not execute anything. The SAME code, in html, without being dynamic, works correctly. I do not know... I will end up calling dynamically via PHP even to test. Let’s see if it resolves. Even so, thanks!
– Diogo Oliveira Lins