Syncing PageAutocomplete and PageListSelect

[Mike Rockett]

As part of a new feature for Jumplinks, I need to be able to sync the above. Presently, when a page is selected via either of the two, the text input field gets updated accordingly. However, if I use PageAutocomplete, then PageListSelect needs to reflect that change, and vice-versa.
 
I have been looking around the various source files, but haven't found any standard method for updating them. Naturally, val() doesn't work because it isn't tied to anything.
 
Any other way I can accomplish this?
 
Right now, I have this:

$('#destinationPage').bind('pageSelected', function(a, b) {
    if (b.id > 0) {
        $('input#destinationUriUrl').val('page:' + b.id)
    }
});
$('#destinationPageAuto').bind('change', function(b) {
    if (b.currentTarget.value > 0) {
        $('input#destinationUriUrl').val('page:' + b.currentTarget.value);
    }
});

Oh, and it appears that the pageSelected event doesn't seem to work for PageAutocomplete - is this a bug?

[LostKobrakai]

Isn't there a hidden inputfield, which is updated. Without that it won't submit anything. 

[Mike Rockett]

Isn't there a hidden inputfield, which is updated. Without that it won't submit anything. 

Sure, but that's only used to submit data - how do I actually get the fields to visually sync?

[LostKobrakai]

I wasn't sure about that, I think asmSelect is permanently syncing it's list and inputfield. But this only happens on submits, then you're left with not syncing those fields (which is probably not an expected usecase) or trying to fake the submit event without actually submitting stuff.

[Mike Rockett]

I wasn't sure about that, I think asmSelect is permanently syncing it's list and inputfield. But this only happens on submits, then you're left with not syncing those fields (which is probably not an expected usecase) or trying to fake the submit event without actually submitting stuff.

Yeah, I gave use-case a thought - doesn't seem like anyone else has done this before...

I think that it may just be best to leave the functionality as it is, where both selectors only update the text input, which is used when saving data. Not a very elegant way of going about it, though. Perhaps a note explaining that the selectors do not sync will be of help.

Wonder if Ryan may be able to assist on this one - though it isn't in demand, it can prove to be useful at times.

[LostKobrakai]

I just wonder, the inputfield dependencies need the html inputs to update as well, otherwise it won't work. 

[Mike Rockett]

There's only one other thing I can think of at the moment, but I don't think it's completely viable, and may be somewhat irritating: when a select value is changed, the value should be passed to a function that refreshes the page and, thus, the other selector. Any changes to the source and timed activation would also be kept.

As said, though, refreshing the page would be irritating (especially to me)...

(I made a little progress syncing the selectors, but manually setting the Autocomplete seems to break it - that is to say that its normal functionality no longer works.)

[LostKobrakai]

That's the other part of the coin - actually setting values to those inputfields, but retrieving should work, as the inputfield dependencies need to do exactly the same.

[Mike Rockett]

Seem to have got it working. Really hacky, but it does the trick. (Keeping in mind, here, that this is really just a visual gimmick...)

$('#destinationPage').on('pageSelected', function(a, b) {
    if (b.id > 0) {
        $('input#destinationUriUrl').val('page:' + b.id)
        $('#destinationPageAuto').val(b.id);
        $('#destinationPageAuto_input').attr('data-selectedlabel', b.title).val(b.title);
    }
});
$('#destinationPageAuto').on('change', function(b) {
    if (b.currentTarget.value) {
        $('input#destinationUriUrl').val('page:' + b.currentTarget.value);
        $('#destinationPage').val(b.currentTarget.value).parent().find('.label_title, .PageListSelectName').text($('#destinationPageAuto_input').attr('data-selectedlabel'));
    }
});