0
I have a button on which adds some components on the screen (input, drop down etc...), via jQuery manipulation. Among these components two buttons, respectively one of "Save" and the other of "Cancel".
$('#show-destination').click(function () {
$('.ms-selection ul.ms-list li').each(function() {
if ($(this).hasClass('ms-selected')) {
$('#negotiation-status').prepend('<h5 id="destination-title"> <b>Destino: </b>' + $(this).text()+'</h5>');
$('#destination-title').after('<div id="div-departure" class="box01"></div>');
$('#div-departure').append('<div id="div-input-departure" class="input-group "></div');
$('#div-input-departure').append('<span id="span-departure" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
$('#span-departure').after('<input id="input-departure" type="text" name="customerService.destinationRequested.departureDate" class="form-control" placeholder="Data de Ida"/>');
$('#div-departure').after('<div id="div-arrive" class="box02"></div>');
$('#div-arrive').append('<div id="div-input-arrive" class="input-group "></div');
$('#div-input-arrive').append('<span id="span-arrive" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
$('#span-arrive').after('<input id="input-arrive" type="text" name="customerService.destinationRequested.arriveDate" class="form-control" placeholder="Data de Volta"/>');
//Valor e Tipo
$('#div-arrive').after('<div id="div-sale-type" class="box01"></div>');
$('#div-sale-type').append('<select id="combo-saleType" name="" class="form-control"></select>');
$('#div-sale-type').after('<div id="input-div" class="box02"></div>');
$('#input-div').append('<div id="acme" class="input-group "></div>');
$('#acme').append('<span id="span-batatinhya" class="input-group-addon btn-success"><i class="fa fa-money"></i></span>');
$('#span-batatinhya').after('<input id="input-price" type="text" name="customerService.destinationRequested.price" class="form-control"/>');
//Botoes que são adicionados
$('#input-div').after('<div id="div-button" class="box03"></div>');
$('#div-button').append('<button id="button-add-destination" type="button" class="btn btn-info pull-right"><span class="entypo-plus-squared"></span> Adicionar</button>');
$('#button-add-destination').before('<button id="button-cancel-destination" type="button" class="btn btn-danger pull-right"><span class="entypo-cancel-squared"></span> Cancelar</button>');
}
});
});
Well, the problem is that these buttons trigger an AJAX request which in case does not work. That is, my button #button-add-destinatio
calls the function:
$('#button-add-destination').click(function (){
var departure = $('#input-departure').val();
var arrive = $('#input-arrive').val();
var ckb = $('#ckb-label').val();
var price = $('#input-price').val();
var saleType = $('#ckb-saleType').val();
$.ajax({
type:'POST',
dataType: 'html',
data: "departure="+departure+"&"+"arrive="+arrive+"price"+price+"saleType"+saleType+"ckb"+ckb,
url:'/viatge/auth/addSelectedDestination?${_csrf.parameterName}=${_csrf.token}',
sucess: function(result){
alert("Destino adcionado com sucesso!");
},
error: function(error){
alert(error);
}
})
});
But the call does not occur! What happens?
How do you know the call doesn’t occur? The
$('#button-add-destination').click(function (){
is run? That date should be an object...– Sergio
ever looked at your console? throws some exception?
– Raul Sena Ferreira
Simply by the fact that when I am debugging it does not enter the method. The date it picks up directly on the component. No exceptions!
– João Manolo
One strange thing is that if I leave the button fixed on my DOM tree then the function is triggered. Only it doesn’t work when jQuery mounts the structure.
– João Manolo
What do you mean by "I leave the button fixed"? It is removed and put back into the DOM?
– Sergio
@Sergio, if I put it "in hand" on the screen it calls the click function, but if I leave it the way I put it above (the jQuery rendering dynamically) does not work.
– João Manolo
@Sergio, unfortunately it didn’t work either.
– João Manolo
@Joãomanolo can create an example in jsFiddle that reproduces the problem? Without it you can’t test.
– Sergio
And see on the page if the URL is correct here:
'/viatge/auth/addSelectedDestination?${_csrf.parameterName}=${_csrf.token}',
when it comes to the client’s side– Sergio
Yes @Sergio. I think it is clearer to view. I have already put the link. With regard to the AJAX call is all ok. The problem and trigger the event, thing that doesn’t even happen with prayer...
– João Manolo
Here it is: http://jsfiddle.net/joaoManolo/6fLj3cdg/
– João Manolo