Lim Guang Jian Lim Guang Jian - 5 months ago 6
Javascript Question

Ajax Load a html file and then add a value

Hello I have a file here called personal.html:

<form id="form_personal">
<div class="row" style="">
<div class="row">
<div class="small-12 columns">
<label class="">Username:</label>
</div>
<div class="small-12 columns">
<input type="text" name="username" id="us"/>
</div>

<div class="small-12 columns">
<button id="submit" type="submit" class="success button">Submit</button>
</div>
</div>
</form>


As you can see from the above code, I have an id called "us". So here is what I am trying to achieve via ajax but it does not work, my

<div class="atest"></div>


is actually in a file called profile.html. So I am including personal.html via AJAX load into profile.html.

$.ajax({

url: 'some params, ignore this',
dataType: 'ignore this',
success: function(r)
{
$('.atest').load('personal.html');


}
}).done(append);

function append()
{
// alert();
$('#us').val('test');
}


I am trying to put in the value of "test" into my

<input type="text" name="username" id="us"/>


which is in the personal.html file, How do I achieve that?

hsh hsh
Answer

you need to wait until personal.html loads completely,for that you should use complete call back of JQuery load method like this:

$('.atest').load('personal.html', function() {
    //this will run after personal.html has loaded.
    //Do your stuff here
});