0

I have a form with inputs, the Jquery makes a specific input (the url input) form input to link, but i have for example two inputs of the url, the HTML ids are url0 and url1 and still when i want to edit the first input/url0 the inputs of the url1 is making visible and the changes are made for the url1 not url0 and when click out the input it makes the value of url1 same with the url0, you can see exactly what i mean here - jsfiddle

thanks a lot

exact steps:

  1. Form with inputs
  2. two url inputs url0/url1
  3. onload they are links but with a hidden input in HTML on click activate the input so can be editable
  4. when click out of the input it converts to links again

Problem is those two inputs (url0/url1) gets confused and make strange behavior on edit. please check the link above to see

Abude
  • 2,112
  • 7
  • 35
  • 58

2 Answers2

1

The strange behavour is related to how you are handling your events

for example

$('#url0,#url1').val($(this).text()).show().focus();

Will open both inputs on a single click on either link.

you need to have reference between your input and link and maintain it or change it dynamically from link to input and back.

p.s didn't think i would be seeing the exact same code a few days later :P

AbstractChaos
  • 4,211
  • 1
  • 19
  • 28
  • hi, thanks for the answer, and how can i do it to include both but to not open both at the same time ? thanks – Abude Jun 22 '12 at 12:58
1

See working jsFiddle here.

Here is the modified JS which works when you click on the link -

$('.a0 a').click(function(e){
    e.preventDefault();
    $(this).parent().parent().find('input').val($(this).text()).show().focus();
    $(this).parent().hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

The following works when you click on the div the link is in - jsFiddle

$('.a0').click(function(e){
    e.preventDefault();
    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

​

Jasper Mogg
  • 924
  • 2
  • 8
  • 23
  • 1
    No probs. Someone here will know how to assign both `'#url'` click handlers in one line - I'd love to hear how! – Jasper Mogg Jun 22 '12 at 13:09
  • and if i have for example more than two ids, is there a method to include like an array or to do a 'for' ? – Abude Jun 22 '12 at 13:13
  • 1
    A for loop would be easy enough, yeah. Just get your ids into an array and loop through them. I'm sure you can use `.each()` for this though - trying to work it out atm. – Jasper Mogg Jun 22 '12 at 13:15
  • 1
    There ya go matey. Just put whatever selector you want instead of `'#url0, #url1'`. You could use a class on each input box and put that in the selector. – Jasper Mogg Jun 22 '12 at 13:25
  • if i want it to do the same thing also when you click in the div area of the link(next or befor the link on the same row) how can i do this? can you help me please – Abude Jun 22 '12 at 16:06
  • 1
    jsFiddle here - http://jsfiddle.net/jaspermogg/9e2X3/4/ Will update answer accordingly. – Jasper Mogg Jun 22 '12 at 16:15
  • Man, you are really great, appreciate it very much, can do for example if click on the link open the page and just for the div area (next or before the link on the same row) to edit? Thanks a lot :) – Abude Jun 22 '12 at 16:25
  • 1
    I think you should post another question asking that and link it here. Also try to explain what you want a little better? – Jasper Mogg Jun 22 '12 at 16:27
  • yes, sure, here's the new question : http://stackoverflow.com/questions/11160426/convert-input-to-link-in-jquery , thanks :) – Abude Jun 22 '12 at 16:33