Question

My script is here : jsfiddle

i have two attributes in my form that my script do edit on a click in the div area/next to the link or double click on the link ( this how the script do the edit )

my problem is: if i have a textarea that includes an URLs per row and it sums all the chars in one link, if you see my example above, the link below is actually textarea with test1.com in first row and test2.com in second row, but the script shows this link : test1.comtest2.com, and i need it to be two link each one on a row, how can i do this ?

Answer 1

Refer this LIVE DEMO 2

Addition to my previous answer, I have modified some parts of JQuery to handle your criteria.

HTML:

<table>
    <tbody>
        <tr>
            <td class="left">
                <label>Date: </label>
            </td>
            <td class="cartRight">
                <span id="status0" style="float:right;"/>2012-06-20
</td>
        </tr>
        <tr>
            <td class="left">
                <label>*Anchor Text </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dasdas" onchange="immediateEditItemInCart(this.value,'anchor_text',0,'pr','35')" class="mandatory0" readonly="readonly" id="anchor_text0"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>*URL </label>
            </td>
            <td class="cartRight">
                <div style="padding:0 !important">
                    <div class="a0" style="padding:0 !important">
                        <a href="test1.com">test.com</a>
                    </div>
                    <input type="text" value="dsad.cas" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display:none"/>
                </div>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>Address </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dsada" onchange="immediateEditItemInCart(this.value,'address',0,'pr','35')" class="mandatory0" readonly="readonly" id="address0"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>Phone </label>
            </td>
            <td class="cartRight">
                <input type="text" value="432423" onchange="immediateEditItemInCart(this.value,'phone_number',0,'pr','35')" class="mandatory0" readonly="readonly" id="phone_number0"/>
                <br/>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td class="left">
                <label>Date: </label>
            </td>
            <td class="cartRight">
                <span id="status4" style="float:right;"/>2012-06-22
</td>
        </tr>
        <tr>
            <td class="left">
                <label>*Anchor Text </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dasdasd" onchange="immediateEditItemInCart(this.value,'anchor_text',4,'am','30')" class="mandatory4" readonly="readonly" id="anchor_text4"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left" style="vertical-align: top">
                <label>*URL </label>
            </td>
            <td class="cartRight">
                <div style="padding:0 !important;">
                    <div class="a0" style="padding: 0px ! important; display: block;width:200px;">
                        <a target="_blank" href="test1.com">test1.com</a><br/>
                        <a target="_blank" href="test2.com">test2.com</a><br/>
                    </div>
                    <textarea cols="82" onchange="immediateEditItemInCart(this.value,'url',4,'am','30');$(this).autoGrow();" class="mandatory4" id="url4" input="" style="height: auto; overflow: hidden; display: none;" rows="3">test1.com<br></br>test2.com<br></br></textarea>
                    <div class="clear">
        </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>​

JQuery:

$('.a0 a').click(function(){
    var href = $(this).attr('href');

    // Redirect only after 500 milliseconds
    if (!$(this).data('timer')) {
        $(this).data('timer', setTimeout(function() {
            window.open(href, '_blank')
        }, 500));
    }
    return false; // Prevent default action (redirecting)
});

$('.a0').dblclick(function(){
    var txt = document.createElement('div');
    $.each($(this).find('a'), function(i, val) {
        clearTimeout($(val).data('timer'));
        $(val).data('timer', null);
        $(txt).append($(val).text()); 
        $("<br>").appendTo(txt);
    });
    var content = $(this).parent().find('input,textarea');
    var text = "";
    $.each($(txt).html().split("<br>"), function(i, val) {
        if (val != "")
            text += val + "\n"; 
    });
    $(content).html(text);
    $(this).hide();
    $(content).show().focus();
})


$('#url0, #url1, #url4').each(function(index, element) {
    $(element).blur(function(){
        if ($(this).val().length == 0)
            $(this).show();
        else
        {
            var ele = this;
            var lines = $(ele).val().split("\n");
            var divEle = $(ele).hide().prev().show().empty();
            $.each(lines, function(i, val) {
                $("<a />").html(val).attr({
                    'href': val, 
                    'target': '_blank'}).appendTo(divEle);
                $("<br/>").appendTo(divEle);
            });
        }
    });
});
​