I have a dynamic grid which looks something like this
Serial No(checkbox1) Document Name Attachment
1(checkbox2) abc (img)
2(checkbox2) xyz (img)
3(checkbox2) uio (img)
4(checkbox2) pop (img)
Let me explain how this works. When the user clicks on the attachment img, it opens a dialog box which shows all the files attached in it. Each file will also have a checkbox against it. Lets call them checkbox3. If user selects the checkbox2 against serial number 1 then the checkboxes in the dialog box(dialog box of serail number 1 only) will also get checked. In the same way if user selects checkbox2 of serail number 2 then the checkboxes of the relevant dialog box will also get checked.
Now if the user checks checkbox1 which is against the serailNo heading, then all checboxes from serial number 1 to 4 will get checked and so all the dialog boxes will also get checked.
Below is my code. If you run the snippet, you will understand what I am trying to explain.
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length
var get_code = $("#AttachmentGrid").data("code").split("_")[1]
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
}
})
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection' onclick="addAttributes('78427','41701',this);">
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
onclick="addAttributes('78424','41701',this);"
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>
var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}
What I want to do is that on the selection of checkboxes I want the documnetcode of the files attached in the dialog box to append to a variable.
What I did was made an onclick function for the checkboxes inside the dialog box
var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}
This is working fine but not in all scenarios. As there can be multiple scenarios
Scenario 1: The user opens this grid, right now it does not tick any checkboxes, he opens the dialog box against Sno 1, and checks the checkboxes against files attached.(Suppose there are 3 files attached) . Then my function will append the document code to my string docCodes.
Scenario 2 : The user opens a grid, and checks the Sno1 checkbox which means the checboxes in the dialog box will get auto ticked as well. In this case it should check if checkboxes in dialog box are ticked then append the relevant document code and if the user later unticks, remove that attribute.
Scenario 3 : The user directly checks the checkbox1 against serial number heading which will check all child checkboxes.
Right now only scenario 1 is working. How do I fulfill other two scenarios? PLease help.
Instead of adding them in some variable save them inside array . So , in below code i have added function call addAttributes whenever your sno is checked . Then , as we are not having docCodes there you can loop through checked checkboxes inside dialog and then push them inside array .
Demo Code :
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length
var get_code = $("#AttachmentGrid").data("code").split("_")[1]
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
}
})
function AttchmentBox(id, count, el) {
if (parseInt(count) > 0) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)
//sno is checked call your function:
addAttributes()
}
$("#attchment_div #AttachmentGrid").data("code", id)
$("#attchment_div").show()
}
}
var docCodes = [];
function addAttributes(docID, CdCode, el) {
//el == undefined call from AttchmentBox
if (el == undefined) {
//loop through checked checkbox...
$(".attachment_selection:checked").each(function() {
var str = $(this).attr("id").split("_")[1];//id=chkAttachment_78424 .etc
//if not inside array
if (docCodes.indexOf(str) == -1) {
docCodes.push(str) //push that in array
}
})
} else {
var str = docID;
//if checked..and not inside array
if ($(el).is(':checked') && docCodes.indexOf(str) == -1) {
docCodes.push(str)
} else {
docCodes.splice(docCodes.indexOf(str), 1) //remove it..
}
}
console.log(docCodes)
}
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input type="file" multiple="multiple" name="txt_filePath_517" class="mediumTextField" id="txt_filePath_517" style="width: 78%;">
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img title="Attachment" height="20px" onclick="AttchmentBox('_41701','2',this);" src="../../Images/attchments.png" />
</span>
</td>
<td class="GreyBorder" align="center">
<img type="image" title="Save" src="../../Images/save.png" id="Btn_517" onclick="SaveAttachment('517','41701','50818','50595');" style="cursor:pointer;height:15px;" class="AddItem" />
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection' onclick="addAttributes('78427','41701',this);">
<a title="ABC.docx" onclick="showDocument('78427');" style='text-decoration: none;cursor: pointer;'>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img viewtype="delete" title="Delete Attachment" style="float:right;padding-bottom:20px;" src="../../images/delete.png" onclick="DeleteAttachment('78427','41701')" class="AddItem" />
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78424 class='attachment_selection' onclick="addAttributes('78424','41701',this);">
<a title="FOSUNDERSTANDING.docx" onclick="showDocument('78424');" style='text-decoration: none;cursor: pointer;'>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img viewtype="delete" title="Delete Attachment" style="float:right;padding-bottom:20px;" src="../../images/delete.png" onclick="DeleteAttachment('78424','41701')" class="AddItem" />
</td>
</tr>
</table>
</div>
Related
I have a dynamic grid. The structure of the grid is as follows:
Serial No Document Name Attachment
1(checkbox) abc (img)
2(checkbox) xyz (img)
3(checkbox) uio (img)
4(checkbox) pop (img)
Against every serial number, there is a checkbox. And in the attachment column when you click the image it opens a dialog box that shows the files attached against this document name. Each attachment also has a checkbox against it.
This dialog box opens on an on click function and comes from another dynamic grid.
What I want to do is that if I select checkbox against serial no 1, it should check all checkboxes in the dialog box of the same serial number . so basically the serial number checkboxes is a parent checkbox and the checkboxes in the dialog box will be their child checkboxes.
Now if the user has checked a parent checkbox, the checkboxes in dialog box will be automatically checked, but if the user unchecks all checkboxes in that dialog box then parent checkbox should also be unchecked automatically.
How do I achieve this?
I have tried so many sample codes since last 4 hours but in vain. I tried doing this
Below is the code
$('.activity_selection').live('click', function (e) {
var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);
});
.activity_selection is a class that I have given to checkboxes against serial numbers.
But it selects all the checkboxes against all serial numbers that are 1 to 4. What I want is that it checks only checkboxes in the current dialog box? How can I achieve this using javascript or jquery? I have many other sample codes but it did not work. Please help.
Html of the main grid:
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No
</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701">
<td class="GreyBorder">1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</tr>
</table>
Dialog Box:
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78424 class='attachment_selection'>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>FOSUNDERSTANDING.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
Can anybody help me?
In your function call as you have passed this as well so this will help us to find if the checkbox in that row is checked or not . So , inside AttchmentBox after all html are generated you can check the sno checkbox if checked you can checked all other checkbox inside your AttachmentGrid table .
Then , if any checkbox is uncheck in your AttachmentGrid table you can use the cdCode which is set in each tr to get reference of checkbox where we need to checked or unchecked checkbox.
Demo Code :
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length //get length of checked
var get_code = $("#AttachmentGrid").data("code").split("_")[1] //get code...
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true) //sno checkbox checked
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false) //remove checbox..
}
})
function AttchmentBox(id, count, el) {
//id = _41702 ,_41701..accroding to click
//el = this
if (parseInt(count) > 0) {
//some code..where you add data inside your attachmnt grid,,
//...
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
//if checked in tr..
if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true) //make checked in dialog as well
}
$("#attchment_div #AttachmentGrid").data("code", id) //set this attr
$("#attchment_div").show() //show your dialog it..(demo..)//showPopup('attchment_div', true);
}
}
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>
I edited my answer, you might try this
function AttchmentBox(id, count, x) {
if (parseInt(count) > 0) {
var idArray = id.split('_');
var cdCode = idArray[1];
var type = idArray[0];
var title = $('#' + cdCode).text()
var AJAX = new AJAXsupport();
AJAX.resetVar();
AJAX.addData('CLDone', 'CustomerDocument');
AJAX.addData('type', type);
AJAX.addData('CdCode', cdCode);
var sucSave = function() {
$('#attchment_div_data').html(AJAX.getExtraData('Customerattchment'));
$('#attchment_div').dialog({
autoOpen: false,
resizable: false,
height: 250,
width: 500,
title: title,
modal: true
});
if ($(x).parent().parent().parent().find('td:first input[type=checkbox]').prop('checked')) {
$('#attchment_div').find('table input[type=checkbox]').prop('checked', '1');
}
$CRM_juery("#attchment_div").mCustomScrollbar({
scrollButtons: {
enable: true,
scrollType: "stepped"
},
keyboard: {
scrollType: "stepped"
},
mouseWheel: {
scrollAmount: 188
},
theme: "rounded-dark",
autoExpandScrollbar: true,
snapAmount: 188,
snapOffset: 65
});
showPopup('attchment_div', true);
}
customSave(AJAX, sucSave);
}
}
I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/
Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.
Here the html markup having a table, i need to fetch td's content on click and save it into hidden field.
JS FIDDLE DEMO
Html Markup :
<table>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">1</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Customer Relations</span>
</td>
<td>one</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_1" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">2</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Marketing </span>
</td>
<td>two</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_2" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">3</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">General</span>
</td>
<td>three</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_3" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
</table>
<input id="hdid" type="hidden" />
<input id="hdcol2" type="hidden" />
<input id="hdcol3" type="hidden" />
JavaScript:
$("img[class^='update_']").live('click', function (event) {
var getId = $(this).attr("class")
$("#hdid").val(getId);
alert(getId)
});
$(this).closest('tr').find('td').eq(1).text();
and
$(this).closest('tr').find('td').eq(2).text();
Demo -----> http://jsfiddle.net/bpGXp/19/
Updated One -----> http://jsfiddle.net/bpGXp/21/ (with no whitespace)
have a look here: http://jsfiddle.net/bpGXp/18/
CODE
$("img[class^='update_']").live('click', function (event) {
var tr = $(this).closest("tr");
var tds = $(tr).find("td");
alert($(tds[0]).text() + " | " + $(tds[1]).text() + " | " + $(tds[2]).text());
//save col1, col2 and col3 values where you need it
});
hope it helps
I'm trying to select an id inside my table for each row.
This is my table(inspected with browser) at the moment.
<table id="sort">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Pri </th>
</tr>
</thead>
<tbody style="cursor: n-resize; " class="ui-sortable"><tr class="priorityRow">
<td id="tableDragSort">
<a class="deleteLink" href="#" rel="17904" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td>
<img id="MainContent_MainColContent_ImageRepeater_CarImg_0" class="17904" src="" style="height:45px;width:60px;">
</td>
<td>
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl00$txtText" type="text" value="hjjj" id="MainContent_MainColContent_ImageRepeater_txtText_0">
</td>
<td class="picturePriority">
1
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17903" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_1" class="17903" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl01$txtText" type="text" value="dd" id="MainContent_MainColContent_ImageRepeater_txtText_1">
</td>
<td class="picturePriority" style="width: 21px; ">
2
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17895" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_2" class="17895" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl02$txtText" type="text" value="wggw" id="MainContent_MainColContent_ImageRepeater_txtText_2">
</td>
<td class="picturePriority" style="width: 21px; ">
3
</td>
</tr>
</table>
The id which here is 17904, 17903 and 17895 in both <a rel=""> and <img class=""> is the one I want to select into my javascript method which is here:
$("#sort .priorityRow").each(function ()
{
var index = $(this).index() + 1;
var id = /* SELECT ID HERE */
console.log(id);
$(this).find(".picturePriority span").text(index);
SetPicturePriority(id, index);
});
}
I don't care which way i select the id really, as long as it works.
Anyone able to help? :)
It sounds like maybe you're trying to do this:
$("#sort .priorityRow").each(function () {
var rel = $(this).find("a").first().attr("rel"),
index = this.rowIndex + 1;
$(this).find(".picturePriority").text(index);
SetPicturePriority(rel, index);
});
you can get id like this
var id =$(this).attr("id");
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 ?
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">
test.com
</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);
});
}
});
});
Given a string with white-space separated values:
var str = "test1.com test2.com";
you can retrieve the individual values by splitting it:
var vals = str.split(/\s+/);
The above uses a regex to split wherever there are one or more whitespace characters together, and will set vals to an array containing the values.
Your current code is really tied in to a single anchor element, so you'd need to update it to create however many are needed. Maybe if you wrapped your existing anchor in some container (a span or div) so that that container can hold multiple anchors then you could do something like this:
var vals = this.value.split(/\s+/),
$container = $(this).hide().prev().show().empty();
$.each(vals, function(i, val) {
if (i > 0) $("<span> </span>").appendTo($container);
$("<a />").html(val).attr('href',val).appendTo($container);
});
Of course you need a corresponding change in the code that takes the anchor text and puts it in the textarea for editing, but I've done that in this working demo: http://jsfiddle.net/pg8Pu/4/
Refer LIVE DEMO
I have come across some of issues on HTML such as not closing <br>, <input> .. tags. Whatever I have seen issues on HTML, those I have fixed.
While testing the live demo, follow the steps:-
To edit the hyperlink, double click on dotted area
To open the link, click on the link
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">
test.com
</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.comtest2.com">test1.com test2.com</a>
</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 test2.com</textarea>
<div class="clear">
</div>
</div>
</td>
</tr>
</tbody>
</table>
JS:
$('.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 = "";
for(var i=0; i<$(this).find('a').length; i++) {
clearTimeout($(this).find('a').data('timer'));
$(this).find('a').data('timer', null);
txt += $(this).find('a').text() + "<br/>";
}
$(this).parent().find('input,textarea').html(txt).show().focus();
$(this).hide();
})
$('#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);
});
}
});
});
Another solution:
$('#url0, #url1,#url4').each(
function(index, element){
$(element).blur(function(){
l = this.value.split(/\s+/);
$(this).hide().prev().show().empty();
txt = "";
for(var i in l) {
txt += ''+l[i] + '<br />';
}
$(this).parent().find('div').not('.clear').html(txt);
})
}
);
See this fiddle
In your example you are saving back whole text from textarea to url of one single a tag.
obviously it will remove the CR/LF from your text when using html() to read the value as CR/LF is not important in html.
If you need to have two tags you need to change your function and put a div instead of a tag as container and then in double click of any of your links read container text.
when saving back the textarea text as links, you need to create one single link (a) tag and put in container div