CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Abude
Abude

Reputation: 2162

convert input to link in jquery

for the moment the script does like this:

  1. click on the link edit the link by making the input visible
  2. 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

Upvotes: 1

Views: 1652

Answers (2)

Jasper Mogg
Jasper Mogg

Reputation: 924

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

Upvotes: 3

Nishu Tayal
Nishu Tayal

Reputation: 20830

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

Upvotes: 0

Related Questions