How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

Question

I am using one of my favorite JavaScript libraries for in-place editing call X-Editable
https://github.com/vitalets/x-editable

I am building a Project Management application. ON a project page there is multiple Task Lists and each list can also have multiple Tasks.

A single project could easily have 100 or more Tasks in it. When a user clicks on the title of a Task I then launch a popup Modal window on the page which shows all the Task details for the clicked on tasks. Things like:

• Task title
• Task Description
• Task created date
• Task modified date
• Task due date
• Milestone
• Task Status
• Task Priority
• Task Comments (any number of comments can be shown for a task as well)

For each of these Task detail items, many of them will have in-place editing capability using the X-Editable JavaScript library.

Currently I have a quick mockup showing how I can use the library to edit some of the fields here [MOCKUP REMOVED AS IT HAS BEEN UPDATED MANY TIMES AND CHANGED SINCE THE POST DATE OF THIS QUESTION]

$(document).ready(function() {

  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'inline';

  $('#task-title-modal').editable({
      type: 'text', // text|textarea|select|date|checklist
      url: '/updatetask',    
      pk: 1,
      toggle: 'click', // click|dblclick|mouseenter|manual
      highlight: '#FFFF80',
      mode: 'inline', // inline | popup
      placement: 'top',
      title: 'Enter Task Title',
      tpl: '<input type="text" style="width: 253px; padding-right: 24px;">',
      validate: function(value) {
          if($.trim(value) == '') {
              return 'This field is required';
          }
      },
      params: function(params) {
          //Addition params in addition to the default: pk, name, value
          params.userId = 1;
          params.projectId = 1;
          params.taskId = 1;
          return params;
      },
      success: function(response, newValue) {
          if(!response.success) return response.msg;
      }
  });



  //ajax emulation. Type "err" to see error message
  $.mockjax({
      url: '/updatetask',
      responseTime: 900, // simulate lag
      response: function(settings) {
          console.log(settings.data);
          if(settings.data.value == 'err') {
             this.status = 500;  
             this.responseText = 'Validation error!';
          } else {
             this.responseText = '';  
          }
      }
  }); 

});

This demo page works great...with 1 exception....this is for 1 single Task record!

I need to figure out how to make it work for X number of Task records on a page.

If a project has 100 Task records, then my JavaScript needs to assign the X-Editable code to each Task record and each Filed in each of those task records!

---

My question is how can I make this library work for inline edit for any number of records on a single page?

Right now for each Field in each Task I am having to do something like this...

$('#task-title-modal').editable({})  

So I need to perhaps do something like this...

$('#task-title-modal-ID_NUMBER_HERE').editable({}) 

Then in my HTML I can set an ID with the ID number for each task record. The jQuery selector would then need to somehow use some sort of wildcard method to find all these ID's....any ideas?

Answer 1

There are multiple ways

One is to use attribute starts with selector - it will be better if you can enhance this with a element selector like $('div[id^="task-title-modal-"]') if all the elements are divs

$('[id^="task-title-modal-"]').editable({}) 

Another is to use a class like editable to all those elements then use a class selector

$('.editable').editable({})