[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery UI [Sortable]:  Help with input textbox in LI

Posted on 2014-08-04
8
Medium Priority
?
546 Views
Last Modified: 2014-09-20
Issue:  Input box is locked when I enable the sortable.


Here is my doc ready:

    //  handle drag sort for pareto SORT
    $('#jqParetoEditList').sortable({
        cancel: ".fixed",
        delay: 100,
        //connectWith: "",
        stop: function (event, ui) {
            p.HandleSortPareto(ui, ui.item)  // note this just handles the change in order
        },
        start: function (event, ui) {
        }
    });



Here is my li build:

                t += "<li data-id='" + d.ItemID + "' class='jqSortParLI'>" +
                       "<div><img src='/img/site/hb_16x16.png' class='jqSortParHand' /></div>" +
                       "<div><input id='ParITEMX_" + d.ItemID + "' class='parINP' type='text'  maxlength='120'/></div>";
                var a = (d.IsActive ==1) ?" checked" : "";
                t+=       "<div><input type='checkbox' " + a + "/></div>" +
                    "</li>";

The container UL is:  #jqParetoEditList



Any help would be awesome.

Note: The sort works just fine it's trying to edit the text in the input boxes that is locked.

thanks in advance.

sk
0
Comment
Question by:skillilea
  • 5
  • 3
8 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40240106
What do you mean locked?
Do you have a link to the page or can you make a test case at http://jsfiddle.net
0
 

Author Comment

by:skillilea
ID: 40240853
I mean I can't click into the text box to edit.  I think SORTABLE overrides it.  I'll work on a fiddle.

tnx TONS

sk
0
 

Author Comment

by:skillilea
ID: 40240891
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40241280
That's counter intuitive - for something to be sortable it has to be draggable and it cannot be draggable if you can click into the element.
0
 

Author Comment

by:skillilea
ID: 40306694
I've requested that this question be closed as follows:

Accepted answer: 0 points for skillilea's comment #a40240891

for the following reason:

Posted on fiddle
0
 
LVL 58

Expert Comment

by:Gary
ID: 40306695
0
 

Accepted Solution

by:
skillilea earned 0 total points
ID: 40324347
I think this does it.


 $('#jqParetoEditList').sortable({
         cancel: ".fixed input",  // add it here and we are good
         delay: 100,
         //connectWith: "",
         stop: function (event, ui) {
             p.HandleSortPareto(ui, ui.item)  // note this just handles the change in order
         },
         start: function (event, ui) {
         }
     });
0
 

Author Closing Comment

by:skillilea
ID: 40334232
Found the solution.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month17 days, 23 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question