Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the README #261

Open
dee22 opened this issue Oct 11, 2018 · 3 comments
Open

Update the README #261

dee22 opened this issue Oct 11, 2018 · 3 comments

Comments

@dee22
Copy link

dee22 commented Oct 11, 2018

I need to use lot of dynamic access, when the page is loaded already.
F.ex. Changing a combobox value by the user will trigger to reinitialize the content of an other combobox, based on the selected value in the first. Think of it like a category selection. Main category select -> subcategory select..
Further. What i still didn't found is how i can change the selected value with JQuery.
The case is when i select an 'user' in the combobox, other comboboxes like 'address' and 'company' should auto select the associated values.
Im sure the selected option is available (after the combobox is first initialized), but i didn't found how.
So maybe you could update the README files with parameters/values for the options or an example usage for each option. That would help to easy get started.

@tiesont
Copy link
Collaborator

tiesont commented Oct 12, 2018

It's not straight-forward, but looking at the tests I came up with this: https://jsfiddle.net/mwcjLs8p/1/

<select id="test-combobox" class="combobox">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>

<button type="button" id="update" class="btn btn-primary">
Set to Maryland
</button>
var $combobox = $('#test-combobox').combobox();

$('#update').on('click', function(e) {
  e.preventDefault();

 $combobox.data('combobox').$element.val('MD');
 $combobox.data('combobox').lookup();
})

Whether or not that's the easiest way, I don't know. I'll have to dig into the source a bit more.

@dee22
Copy link
Author

dee22 commented Oct 16, 2018

Thank you very much for your reply.
I've tested it and it works quite well.
Whit this Method, i still have to select the element by its display Text and not by its HTML value Tag which i would prefer. But it works. Whit your jQuery code it displays the filtered select list and expects a click by the user. To finally select it with jQuery i added the select function. This works well.

var $combobox = $('#test-combobox').combobox();

$('#update').on('click', function(e) {
  e.preventDefault();

 $combobox.data('combobox').$element.val('MD');
 $combobox.data('combobox').lookup();
 $combobox.data('combobox').select();
})

@dee22
Copy link
Author

dee22 commented Oct 16, 2018

I have found a solution that works for me. But it tooks me hours and the result is so simple..
Case: When i select the User, i want the Company in which he works selected automatically (by value).
https://jsfiddle.net/mwcjLs8p/23/

<select id="test-trigger-combobox" class="combobox">
  <option></option>
  <option value="1">User A</option>
  <option value="2">User B</option>
  <option value="3">User C</option>
  <option value="4">User D</option>
</select>

<select id="test-target-combobox" class="combobox">
  <option></option>
  <option value="1">Company D</option>
  <option value="2">Company C</option>
  <option value="3">Company B</option>
  <option value="4">Company A</option>
</select>
$('.combobox').combobox();
var $target_combobox = $('#test-target-combobox').combobox();
var $association_ids = [0, 4, 3, 2, 1];  // user 1 belongs to company 4, user 2 to company 3...

$('#test-trigger-combobox').on('change', function(e) {
  //e.preventDefault();
  var trigger_id = $(this).val();
  var target_id = $association_ids[trigger_id];

  $target_combobox.val(target_id);
  $target_combobox.data('combobox').refresh();
})

I found the needed hint here in Bug #75 at the bottom.
It would be nice if such functions where documented, or at least listed, so that i know there is more without studying the whole code of the project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants