Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

aui-select with initial value on load

Raffee Parseghi
Raffee Parseghian September 5, 2016

I'm using the aui-select control with AJAX calls to retrieve the list to be displayed. How can I set the initial value of this control (for example in a View/Edit form?)

 

Thanks!

Answer
Watch
Like Be the first to like this
2995 views

4 answers

0 votes
Raffee Parseghi
Raffee Parseghian September 7, 2016

To give you a better idea, here are the details of our tests on JS Bin (using the sample provided on https://docs.atlassian.com/aui/latest/docs/single-select.html)

 

 

Fake Rest API using: http://www.mocky.io/
Sample API: http://www.mocky.io/v2/57d01a871000008c00208c9a
Sample Result:
[
{
"label": "Product1",
"value": 1
},
{
"label": "Product2",
"value": 2
},
{
"label": "Product3",
"value": 3
},
{
"label": "Product4",
"value": 4
}
]

Mocky screenshot

Capture.PNG

 


JS BIN Code:
<html>
<head>
<!-- External dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.css"/>
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.css"/>
<!-- / External dependencies -->
</head>
<body>
<form class="aui">
<aui-label for="async-product-single-select">Choose your product asynchronously (you need to type to initiate a search):</aui-label>
<p>
<aui-select
id="async-product-single-select"
name="product"
placeholder="Select a product"
src="http://www.mocky.io/v2/57d01a871000008c00208c9a"
value="type to trigger async">
</aui-select>
</p>
</form>
<script>
$(document).load(function(){
//$("#async-product-single-select").val("1");
//$("#async-product-single-select").val("1").trigger("change");
$("#async-product-single-select").val("Client").trigger("change");
});
</script>
</body>
</html>

View More Comments
Frédéric Tardieu
Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
September 7, 2016

I see, the loading is asynchronous. In this case, how about using the AP Atlassian connect module (see https://developer.atlassian.com/static/connect/docs/latest/javascript/module-request.html), and use the success method which is called after the asynchronous call is done without error, like this:

AP.require('request', function(request)
 {
 request(
 {
 url: your_url_here,
 type: "GET",
 dataType: "json",
 contentType: "application/json",
 async: true,
 success : function (response)
 {
//$("#async-product-single-select").val("1"); to select option value 1

// 

$('select').select2().select2('val', $('.select2 option:eq(1)').val()); to select first option in list
}
});
});
Like • Sergey likes this
Reply
0 votes
Raffee Parseghi
Raffee Parseghian September 7, 2016

Hello Frederic,

And thank you for your continuing support smile

I tried your suggestion (using the JQuery val('value').trigger('change') but again it is not working. I think this would work fine with preloaded options, but not when using asynchronous loading with AJAX.

We were able to grab and set the value of the "input" inside the select, but again it's value will remain "" (no value) and the specified option will not be selected.

 

If it's not too much to ask, do you have a working sample that you can provide?

 

Thanks again and regards,

Raffee

Reply
0 votes
Raffee Parseghi
Raffee Parseghian September 5, 2016

Hi Frederic,

Thanks for your answer, but this doesn't seem to be working.

When I write your suggested line: 

$('#yourSelected2Id').val('value');

and then directly try :

$('#yourSelected2Id').val();

I get "" as a result, and the Select box is still empty.

 

Here is my HTML for more info:

<aui-select id="AccountTypeId"
name="AccountTypeId"
placeholder="Select a Type"
src="Accounts/GetAccountTypesList"
value="type to search types">
</aui-select>

 

Thanks,

Raffee

View More Comments
Frédéric Tardieu
Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
September 6, 2016

Hi Raffee,

You should use .val() with an argument (the value you want to select). For instance, .val('value 1'); . If not working, try to append the trigger() method, like this: .val('value 1').trigger('change');

Hope that helps,

Fred

Like
Reply
0 votes
Frédéric Tardieu
Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
September 5, 2016

Hi Raffee,

Try this:

$('#yourSelected2Id').val('value');

Hope this helps,

Fred

Reply

Suggest an answer

Log in or Sign up to answer
Product apps
Apps & Integrations
TAGS
AUG Leaders

Atlassian Community Events

    See all events