Jump to content
Mike Rockett

Syncing PageAutocomplete and PageListSelect

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'));
    }
});
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...