CODEWITHSUNDEEP
jqueryajaxbootstrap-modal
Isador
Isador

Reputation: 603

Update bootstrap modal via Ajax

I've a modal for profile on my website. "onclick" the button of "Edit Profile", I need to update fields with existing data, but I'm very new to Ajax and it doesn't works.

My modal (just modal-body) : 

<div class="modal-body">
    <div class="form-group">
        <div class="col-lg-4 col-lg-offset-1">
            <label for="Nom">Nom</label>
        </div>
        <div class="col-lg-5">
            <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Votre nom"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-4 col-lg-offset-1">
            <label for="Prénom">Prénom</label>
        </div>
        <div class="col-lg-5">
            <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Votre prénom"/>
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-4 col-lg-offset-1">
            <label for="E-mail">E-mail</label>
        </div>
        <div class="col-lg-5">
            <input type="email" class="form-control" id="profile_mail" name="profile_mail" placeholder="Votre email"/>
        </div>
    </div>
</div>

My Ajax function : 

function GetProfileInfos(profile) {
    $('.modalProfileEdition').on('click', function() {
        $.ajax({
            url: 'http://mywebsite/controllers/getprofile.php?profil=myuser',
            method: 'POST'
        }).success(function(response) {
            // Populate the form fields with the data returned from server
            $('#profileForm')
            $(".modal-body #profile_mail").attr("value", "TEST_AJAX");
            /*.find('[name="profile_mail"]').val("TEST_AJAX").end();*/
        });
    })
}

I bypassed my php datas setting a fake value (TEST_AJAX), but even that doesn't works... I tried to use ".find" method, but nothing append... (and Firebug doesn't work anymore on Firefox 50...).

EDIT : Thanks, working like that. 

function GetProfileInfos(profile) {
  $.ajax({
    url: 'http://192.168.122.104:8001/controllers/getprofile.php?profil=demozpeak',
    type: 'GET',
    success: function(response) {
       $(".modal-body").find("#profile_mail").val("test_ajax");
      }
   });
 }

Upvotes: 1

Views: 4416

Answers (2)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Make an ajax call to get the data for selected record:

$.ajax({
    url: 'process.php',     // process.php file resides in the same folder where this file resides                       
    type: 'POST',                                  
    data: {
        id : id,    // id of selected record
    },
    success: function(response){
        // response from process.php which is an json object that contain data on diff index 

        var data = JSON.parse(response);

        // To set the data for autofill
        $('#selector1').val(data.val1);
        $('#selector2').val(data.val2);
        // and so on
    }
});

Upvotes: 1

Maciej Kasprzak
Maciej Kasprzak

Reputation: 949

Your selector is wrong:

$('#profileForm')
$(".modal-body #profile_mail").attr("value", "TEST_AJAX");

And to set value try using val() function:

$(".modal-body").find("#profile_mail").val("TEST_AJAX");

jsfiddle with simple example: https://jsfiddle.net/8upe07hL/

Upvotes: 4

Related Questions