Help with Inline Edit, Add and Remove List Items

[Myke623]

Following from my drag-and-drop to re-order a list, which works fine, what I'd like to do now is add some inline functionality using jQuery.

Conceptually, it would appear something like this:



For each list item, there'll be a link to:

• Edit
  • on click, changes the list title element into an <input> form element
  • once editing, hitting enter
• Remove:
  • on click, opens a dialog to confirm deletion
  • if confirm, list item is deleted and removed from the list

Also, at the top of the form, there'll be a button to:

• +Add
  • on click, open a dialog prompting for user input (a title)
  • once entered, new list item is appended to the bottom of the list

If anyone knowledgeable in jQuery could provide me with some pointers on where to start (other than "go learn jQuery"), existing examples, or other add-ons to learn from, it'd be much appreciated. I started to look at how the inline thread moderation was put together, but got lost rather quickly.

Handling the MVC side of things is fine, it's just getting my head around the necessary javascript/jQuery required to implement this functionality is the kind of help I need. Cheers.

 

[Myke623]

So I've made some progress with lots of help from the official ajax scratchpad tutorial.

And rather than attempting an "inline" edit of titles with jQuery, I opted to simply have the Edit link call an overlay form which allows the edit of the title, and when saved, the affected element is updated via ajax. I plan to follow the same approach for the add and delete functions, however...

An issue arises with the fact that I'm using the "Sortable" class to rearrange the order of the list. The issue is that once I've edited a title in the list, and it updates with ajax via an .xfInsert('replaceAll', ...), I can no longer drag-and-drop the replaced element to sort it with the other elements. If I reload the page, though, it works as it should.

The javascript performing the replacement:

InlineUpdate: function($form)
        {
            $form.bind('AutoValidationComplete', function(e)
            {
                new XenForo.ExtLoader(e.ajaxData, function()
                {
                    $(e.ajaxData.templateHtml).xfInsert('replaceAll', $form.data('rowid'));
                });
            });
        }

And the javascript that binds to the Sortable class:

Sortable: function($container)
        {
            $container.sortable(
           {
               forcePlaceholderSize: true

           }).bind(
               {
                   'sortupdate': function(e) {},
                   'dragstart' : function(e)
                   {
                       console.log('drag start, %o', e.target);
                   },
                   'dragend' : function(e) { console.log('drag end'); }
               }
           );
        }

Any ideas as to why the replaced element is not sortable? Do I need to re-bind or re-register the Sortable event after the ajax replacement (if that even makes sense)?

 

[Jake Bunce]

Binds need to be reapplied to new elements, or even replaced or refreshed elements that were previously bound but got replaced in the DOM by some action. If you use the Chrome inspector you may be able to see the new elements missing classes associated with sortability. That is evidence that the element needs to be rebound.

 

[Myke623]

Thanks for the reply, Jake. Indeed, the Chrome inspector reveals that the 'selectstart' Event Listener was missing from the updated element. In my Sortable js code above, the events defined are 'sortupdate', 'dragstart' and 'dragend', and I assume the 'selectstart' is handled differently.

So how can I go about reapplying the bind?

 

[Myke623]

I'm beginning to think that rebinding isn't the issue. This is evidenced, for example, by verifying the console.log outputs on the 'dragstart' and 'dragend' events for the updated elements. If Sortable wasn't being rebound, then I'd expect not to see these functions firing (right?).

But as I stated earlier, the Chrome inspector shows that the 'selectstart' event is missing for any new/updated element in the container. Unfortunately, I have not been able to figure out why this is the case, but suspect it will solve the problem.

 

[Myke623]

Really hate bumping threads, but does anyone have the slightest of clues as to what might be happening here? I feel I'm somewhat out of my depth when it comes to javascript / ajax debugging, so just some pointers for things to look for would be hugely appreciated.

 

[Myke623]

So what's the best way to get some help here? Does my problem description not make any sense (not unlikely)? Do I necessarily need to pay someone for their time? Or am I basically on my own?