1

I am using this code to replace a value inside a td cell and to pop up a select input.

$(document).one('click',"#editlanguageinline", function (e) { 
$(this).html('<select><option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option></select>');
      });

I would like to create an inline edit for this table row/cell. So the user should be able to select a value for every new row in this column and after selecting it, a ajax event calls the php file where the new value is updated. But if I want to choose a new value in the dropdown menu, the css event is activated again. So the replacement event is fired again and I can not choose a value. How can I avoid this? I tried the command .one() but than all other rows do not really activate the event because than it is really only activated once. It should be deactivated for the cell that I currently clicked so I can choose a value.

thank you in advance for any help.

hillcode
  • 150
  • 1
  • 10
  • Please click [edit](https://stackoverflow.com/posts/53479276/edit) then snippet editor `[<>]` and creater a [mcve] – mplungjan Nov 26 '18 at 10:40

2 Answers2

0

I created sample fiddle with your example and my modifications. Key thing is that you need to bind your event to all 'td's only. And in this case select change will not fire this change again.

$('#table').on('click','td', function (e) { 
  $(this).html('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');
});
dganenco
  • 1,596
  • 1
  • 5
  • 16
  • thank you! but it should not be fired on every column ... only the column where the td has the id #editlanguageinline. how can I achieve this? – hillcode Nov 26 '18 at 11:29
  • The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). https://www.w3schools.com/Html/html_id.asp – dganenco Nov 26 '18 at 12:20
  • Use should use 'class' instead. I updated my fiddle with working class example https://jsfiddle.net/Dganenco/jdv8ypx3/ – dganenco Nov 26 '18 at 12:20
0

Try This :

$('#table').on('click','#editlanguageinline', function (e) { 
    if ($(this).find("select").length==0) {
        $(this).html('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');
    }
});
mkane
  • 880
  • 9
  • 16
  • this checks the current value if it is not "volvo" but it can be volvo as well. Do you have any other solution? – hillcode Nov 26 '18 at 12:10
  • No that is just checking to see if the html was already generated for that node. The code supplied works for other rows also... Try it.. – mkane Nov 26 '18 at 12:13
  • works great! thank you very much! so "volvo" should be always the value of the first select option? – hillcode Nov 26 '18 at 13:27
  • No I am just looking for the existence of the string volvo in the html to see of the – mkane Nov 26 '18 at 14:25
  • I updated the answer to show how to test for existence of the created select by it's id too.. – mkane Nov 26 '18 at 14:46
  • great! but this seems to work only once... after the first dropdown appeared every other row would not show the dropdown after a click – hillcode Nov 28 '18 at 07:26
  • post some of the new code and we can see what is actually happening. Probably because you do not have unique ids on the select.. – mkane Nov 28 '18 at 11:34
  • yes there are no unique ids ... any solution for a select with the same id? – hillcode Nov 28 '18 at 16:43
  • I have updated the answer to include a more generic approach. I tried it on multiple rows all good.. Hope it suits your needs.. – mkane Nov 28 '18 at 17:36
  • thank you! I updated the code so it is now showing a div instead of a select field. how could i hide the div when I click outside of the div element? – hillcode Nov 28 '18 at 22:16
  • Many ways of doing that, I'd create another question for that or look for a solution in https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – mkane Nov 29 '18 at 09:47