jQuery setting input field value

Question

I have a form to edit user and i would like to insert user data from database into forms' fields. What i do is

Link

<a href="javascript:void(0)" onclick="editUser('/edit/${user.login}')">Edit</a>

Script

function editUser(url) {
$( "#edit-form" ).dialog( "open" );
$.ajax({
        url: url,
        type: "POST",
        success: function (resp) {            
        $('input[name="elogin"]').val(resp.login);
        }
    })
}

Form

<div id="edit-form" title="Edit user">
<p class="validateTips">All form fields are required.</p>
<form:form>
    <fieldset>
        <label for="elogin">Login</label>
        <input type="text" name="elogin" id="elogin" class="text ui-widget-content ui-corner-all" />
    </fieldset>
</form:form>
</div>

My Spring controller returns following(in wrapper i have field login)

@RequestMapping(value="/edit/{userLogin}", method=RequestMethod.POST)
@ResponseBody
public Wrapper edit(@PathVariable String userLogin) {
    return wrapper.wrap(userService.findByLogin(userLogin));
}

But the form is empty. I also tried to set manual values but still no use. Please help me set input field value.

Have you checked the console for errors? What is the value being returned in `resp`? — Rory McCrossan, Aug 22 '13 at 14:40
you need to see what is coming back, it may not be treating as json. Add dataType: 'json' to your ajax method. — carter, Aug 22 '13 at 14:44
No errors in console. Value of `resp` should be entity, that has field `String login` — qiGuar, Aug 22 '13 at 14:45
I tried to debug it and Firebug shows nothing on this break point `$('input[name="elogin"]').val(resp.login);` I might miss the type of data i should be receiving. — qiGuar, Aug 22 '13 at 15:20

score 0 · Answer 1 · answered Aug 22 '13 at 14:42

0

You should send your form data with your post request.

$.ajax({
    url: url,
    type: "POST",
    data:$('form').serialize(),
    success: function (resp) {            
    $('input[name="elogin"]').val(resp.login);
    }
})

answered Aug 22 '13 at 14:42

Mostafa Elgaafary

1,552
2
13
11

score 0 · Answer 2 · answered Aug 22 '13 at 14:42

function editUser(url) {
$( "#edit-form" ).dialog( "open" );
$.ajax({
        url: url,
        type: "POST",
        success: function (resp) {            
        $('#elogin').val(resp.login);
        }
    })
}

Should work just fine, as you've set an ID for the input.

richardb · Answer 3 · 2013-08-22T15:38:54.350

0

Not quite sure you have the order right, surely you would make the ajax call first and then open up the jQuery dialog?

Either way, you could supply data into the dialog as follows;

//call ajax method to get value you want to show.
var somevariable = etc.....
var dto = {
    loginName: somevariable
}
$( "#edit-form" ).data('params', dto).dialog( 'open' );

Then in your dialog use the open() method.

$("#edit-form").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 280,
    width: 320,
    draggable: false,
    resizable: false,
    modal: true,
    open: function () {
        //so values set in dialog remain available in postback form
        $(this).parent().appendTo("form");

        //get any data params that may have been supplied.
        if ($(this).data('params') !== undefined) {
            //stuff your data into the field
            $("#elogin").val($(this).data('params').loginName);
        }
    }
});

edited Aug 22 '13 at 15:38

answered Aug 22 '13 at 14:49

richardb

943
1
10
27

Something is wrong with `open:` because form doesn't appear. When i comment 'open' dialog appears, but with blank fields. – qiGuar Aug 22 '13 at 15:07
Use browser tools to set some breakpoints in javascript and step through. – richardb Aug 22 '13 at 15:34
Or just try and stuff some text into the field in the open method. $("#elogin").val('Hello World'); – richardb Aug 22 '13 at 15:35
Maybe not double quotes in the .dialog('open'); – richardb Aug 22 '13 at 15:38
I tried with FireBug, after `success: function (resp)` it shows nothing, like it does nothing. – qiGuar Aug 22 '13 at 15:49
So the problem is with the service returning your JSON data. Are you marking the ajax call as dataType: "json" and is the service actually returning json format data? – richardb Aug 22 '13 at 16:12
http://stackoverflow.com/questions/4069903/spring-mvc-not-returning-json-content-error-406 – richardb Aug 22 '13 at 16:22
Followed your link, and tried some variants. How can i check if returned data type is json? – qiGuar Aug 23 '13 at 08:03

jQuery setting input field value

3 Answers3