convert input to link in jquery

Question

for the moment the script does like this:

click on the link edit the link by making the input visible
click next/before the link edit the link by making the input visible

i want when you click one time on the link not to edit but to open the page in new window, and when you click double to edit.

here's the script:

jsfiddle - CODE

Replace `.click()` by `dblclick()`? – Ryan Jun 22 '12 at 16:36 — Ryan, Jun 22 '12 at 16:36

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

~~http://jsfiddle.net/jaspermogg/pFyNY/1/ - you can double click the div to edit, or single click the link to open. That what you wanted?~~

$('.a0').dblclick(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);
    })
    }    
);

And here's a jsFiddle that changes the href of the a to the value you edited it to, just in case that's what you're trying to do next :-) http://jsfiddle.net/jaspermogg/pFyNY/2/

Here's the jsFiddle that does what you want - http://jsfiddle.net/jaspermogg/pFyNY/5/

JS -

$('.a0 a').click(function(){

    var href = $(this).attr('href');

    // Redirect only after 500 milliseconds (CHANGE THE 500 IN THE CODE TO DETERMINE HOW LONG THE USER GETS TO DBLCLICK)
    if (!$(this).data('timer')) {
       $(this).data('timer', setTimeout(function () {
          window.location = href;
       }, 500));
    }
    return false; // Prevent default action (redirecting)
});

$('.a0').dblclick(function(){
    clearTimeout($(this).find('a').data('timer'));
    $(this).find('a').data('timer', null);

    $(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);
    })
    }    
);

Inspired by Jquery create Double Click event on A Href

edited May 23 '17 at 10:34

Community

1
1

answered Jun 22 '12 at 16:35

Jasper Mogg

924
2
8
23

no, want when double click on the link or click in the div area to edit, and when one click on the link to go to that page, at the moment i see that double click edits it but also go to the page, and no edit by one click for the div stuff – Abude Jun 22 '12 at 16:38
1

Edited to include your functionality. – Jasper Mogg Jun 22 '12 at 16:49
perfect for double click but one click on the div area is not making edit action, every thing else is amazing and perfect just need to do one click on the div area make edit, just that, thanks much – Abude Jun 22 '12 at 16:52
Do you actually know any jQuery? :-) – Jasper Mogg Jun 22 '12 at 16:55
1

It's cool, great procrastination for me! Also you're making me learn, so thank ***you***. – Jasper Mogg Jun 22 '12 at 16:57
one thing, maybe you can help me with this too, i tried to put `target="_blank"` in the but still opens in the same window, and i think it's from the script, don't know what to do ... – Abude Jun 22 '12 at 17:22
when the url is cleared in the input of the last demo on jsfiddle, and click out of it ... then the input and the attribute are hidden and no info is displayed, how can i fix this? do you want me to ask in new question or you can help me here? appreciate it! – Abude Jun 22 '12 at 20:12
Ask in a new Q buddy, I'm on mobile now - can't test code. Sorry! – Jasper Mogg Jun 22 '12 at 20:25
thanks for the answer, sure, the new question is here: http://stackoverflow.com/questions/11163831/jquery-input-hidden-bug thanks a lot – Abude Jun 22 '12 at 20:43

score 0 · Answer 2 · answered Jun 22 '12 at 16:42

Use target="_blank" property to open link in new page.

<a target="_blank" href="dsad.cas">dsad.cas</a>

And use .dblclick function of jquery to edit the link

$('.a0').dblclick(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);
    })
    }    
);

Here is the Demo

nope :) , it's not what i want to do, i want one click on the div area and double click on the link to make the edit, also one click on the link to go to the page — Abude, Jun 22 '12 at 16:47

convert input to link in jquery

2 Answers2

Linked