4

Background Information

We are using opensource code to manage widgets. One of the pages allows users to edit data in a table that has potentially hundreds of rows. For each row, it's currently populating a drop down box with hundreds of values. As you can imagine, this takes a long time and is not necessary. We won't be editing all rows at a time.

So I've been trying to tweak the code to prevent this from happening. I've changed all the drop downs in the rows to DIV tags and created a new button for them to EDIT a row.

When the user clicks on EDIT, the DIV change to a dropdown menu. So far so good. The page loads now in under a second vs over 15 minutes.

Problem

The problem is that when the user clicks on SUBMIT (for that specific row) to save their changes, the DIV field that I've been playing around with is not included in the POST data.

So specifically, the field looks like this when the page loads: 

<td><div id="location_name">canada</div></td>

but after you click on an edit button and the jQuery that's triggered is done running, it looks like this (as per the F12 developer tool, and NOT view source):

<td>
    <select tabindex="1" id="location_id" name="location_id">
        <option value="0">-- NONE --</option>
        <option value="15" style="font-weight: bold">canada</option>
        <option value="16" style="font-weight: bold">usa</option>     
    </select>
</td>

This drop down is created by cloning an existing drop down menu when the user clicks on the EDIT button for that specific row. (I'm cloning because the existing dropdown has all the values in it that I need.)

I need the form data to include a value of "location_id=15" for the above mentioned example.

What I've checked so far:

  1. I've made sure that the field in question is inside the form tags.
  2. Alternatively, I guess I could create empty drop down controls in each row of my table...and initially set them to hidden. Then via jQuery, if the user wants to edit the row, I could change the status to visible, and somehow copy all the data from the master dropdown.

Questions

Should the form be able to 'see' fields that are created dynamically by jQuery?

If so, what else could I be doing wrong? If you want to see the full code, let me know and I will paste bin it for you.

dot
  • 14,928
  • 41
  • 110
  • 218
  • After cloning, are there two elements on the page with the same id? – Travis J Oct 21 '15 at 19:16
  • 2
    The valuable piece of code missing here is the code which clones the dropdown. – Travis J Oct 21 '15 at 19:17
  • Yeah, as @TravisJ said. E.g. do you keep the events by using `.clone(true)` or not? – naton Oct 21 '15 at 19:21
  • bah! The computer where i'm coding has just lost all internet connectivity. waiting for network guys to look into issues. sorry. will post code soon – dot Oct 21 '15 at 19:31
  • @RichardHamilton I don't think this is a duplicate. I may have confused the question by adding in some test code I was playing around with (which I've now removed). But my question is about why the jquery initialized data is not being included in my POST data. – dot Oct 21 '15 at 19:43

0 Answers0