Julien Malinosky Julien Malinosky - 1 month ago 21
Ajax Question

ajax request to form in css popup

from France ... and sorry for my english language ...

I code in symfony 3.
I have an entity "book" can have, according to the "type" attribute selected, one or more attributes (client, student, organizer and / or speaker) each mapped as an entity "user".
In my "book" form, I can select for each of the attributes related to "user" my users registered in the bdd.
I want to add a "user" by opening a popup css, loading my user form and saving it with ajax. In case of success, I recharge my list with ajax to use on my form "booking.



function nouveauOrganisateur() {
$.ajax({
url : Routing.generate('user_new'),
success: function(html) {
$('#NewOrganisateur').append(
$(html).find('form')
);
$('div#NewOrganisateur form button').replaceWith(
$(
'<button onclick="EnregistrerClient(event)">Enregistrer</button>'
)
);
}
});
}


function EnregistrerClient( event ) {
console.log(event.target.nodeName);
var $form = $( event.target ).closest( 'form');
$.ajax({
url : Routing.generate('user_new'),
type: 'post',
success: function(html) {
console.log(html);
}
})
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="UserOrganisateur" class="label">
<strong>{{ form_label(form.Stage.organisateurs, "Organisateurs ") }}</strong>
{{ form_errors(form.Stage.organisateurs) }}
{{ form_widget(form.Stage.organisateurs) }}
<button onclick="nouveauOrganisateur()">Ajouter un Nouveau client</button>
<div id="NewOrganisateur">
{{ form_errors(form.Stage.NewOrganisateur) }}
{{ form_widget(form.Stage.NewOrganisateur, {'value' : false}) }}
</div>
</div>





When I validate my form "user", my page is reloaded but it is not what I want. And my user is not registered !?
I started in javascript. Can you help me?




From my form, I have a "select" for the type.
When the "type" is selected, thanks to FormEvents and a js script I load the rest of the form.
For example, if my "type" is "training", I load the embedded entity Training form. My "training" entity contains the "organizer" attributes and "speaker", 2 multiple select which options are the "user" stored in the BDD.
In this form, I add a button to record a new "user". This button displays the registration form to use in which I replaced the submission boutton by Ajax action button. I just want to register my new user and recharge my list of selects ("organizer" and "speaker"), but when I click on this last boutton my page comes from where to select the "type".




Whith some change, I can registred my new user



function nouveauOrganisateur() {
$.ajax({
url : Routing.generate('user_new'),
success: function(html) {
console.log(html);
$('#NewOrganisateur').append(
$(html).find('form')
);
$('form[name=user] button').replaceWith(
$(
'<button>Enregistrer</button>'
)
);
$('form[name=user] button').on("click", function(){
$.ajax({
url : Routing.generate('user_new'),
type: 'post',
data: $('form[name=user]').serialize(),
success: function(html) {
console.log(html);
}
});
});
}
});
}





But my page is always reloaded ???

Answer

I think you are trying to stop the page from reloading or changing when the user clicks the button. There may be two solutions to this:

1.) The <button> html tag defaults to type="submit" which submits the form. You can avoid this by adding type="button"

or

2.) In the javascript function EnregistrerClient add a line at the top of the function event.preventdefault(); this will stop the form from submitting.

Comments