Develop Reference

How to get a specific tr in an html page?

I am trying to show selected values of a dropdown in my ui.
<tr class="odd" rowid="1" height="50">
<td>
<select disabled name="item[]" id="item_1" class="dropdown required" tabindex="18">
<?php echo $itemOption;?>
</select>
</td>
<td >
<a href="javascript:void(0);" style="height:40px; width:45px" class="button add_new_row ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-focus" data-role="button" ><span class="ui-button-text" style="padding:0;" disabled>+</span></a>
</td>
</tr>
and in jquery I need to get this tr for replicating my dropdown. Here is my jquery
var thisRow = $(this).closest('tr');
newid=parseInt(thisRow.attr('rowid'))+1;
var count = $('.dataTable input.timepicker').length + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
But I am getting undefined for thisRow. What may be the reason. Some one please correct me.

You should call this script using any action like bind up in function or trigger on any event etc.
Where you want to call this??
Let have an example, suppose I have a HTML like
<div id="div1">
<span class="test">Call Closest Division</span>
</div>
<div id="div2">
<span class="test">Call Closest Division</span>
</div>
and I want to get closest division when click on span. My script look like this
$('.test').click(function(){
var id = $(this).closest('div').attr('id');
alert(id);
})
Don't forgot to include jquery library.
Working demo

jQuery overriding hyperlinks on table's td values

I have a table as below and am trying to open a pop-up window with the link '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' when user clicks on Invoice number columns of table (INV1 and INV2) instead of going to the hyper link associated with invoice number fields.
http://jsfiddle.net/pmgguwob/3/
<div class="listTable expanded">
<table class="searchResults {id:321}">
<thead>
<tr class="tipAdded">
<th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
<th data-name="Invoice Number" class="typeString ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
Invoice Number
</th>
<th data-name="Invoice Total" class="typeMoney last ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
Invoice Total
</th>
</tr>
</thead>
<tbody class="">
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV1
</div>
<input value="65" name="invoices0.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
INV1
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
15.25 USD
</div>
</td>
</tr>
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV2
</div>
<input value="66" name="invoices1.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
INV2
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
111.25 USD
</div>
</td>
</tr>
</tbody>
</table>
Am a very beginner of jQuery and I dont really know how to achieve this. Could anyone please me with this?
Note: I dont have liberty of modifying the hyperlinks associated with Invoice number fields since these links are generated from our internal framework. but I can embed jquery script on my page to override the hyperlinks
SOLUTION UPDATED
http://jsfiddle.net/pmgguwob/10/

To override your hyperlink's behaviour, you can do something along the lines of:
$(function(){
// you may have to narrow down the selector here to a specific class or 'td'
$(".searchResults a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, 'window name', 'window settings');
return false;
});
});
Updated Fiddle

In this case, something like this (fiddle):
$("a").click(function (e) {
e.preventDefault();
var mills = (new Date).getTime();
window.open($(this).attr("href"), mills);
//$("body").append("#" + $(this).attr("href") + "#");
});
I'm using mills to give each window a new handle, so you don't reuse a window and potentially confuse your user by reloading a window that's hidden from them. The last line is just to show the URL it's using for testing; you might want to massage that value a little, but I believe it's right as is.
I know window.open isn't new and cool, but its options let you control the new window's appearance with likely enough granularity. You could jQuery that up instead if you wanted.

How to add one specific HTML block with jQuery

I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.
HTML :
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">
<table cellspacing="0" class="form-list">
<tr>
<td class="label"><label for="Type">Tip</label></td>
<td class="value">
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="Class">Class</label></td>
<td class="value">
<input id="Class" name="optional[1][class]" value="" type="text" class=" input-text"> </td>
</tr>
</table>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
<br></br>
</fieldset>

You can do it like this:
var html_code = '<span>put your full code here</span>';
var selector = 'body';
//change selector with where you want to append your html code into..
$(selector).append(html_code);

One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.
For example:
<div id="templateholder"></div>
<div id="template" style="display: none;">
<div class="template">
<label for="Type">Tip</label>
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
</div>
</div>
function createTemplate() {
var temp = $("#template div.template").clone();
//from here you can do things like change name fields or values
temp.find("#Type").attr("name", "Type2");
//...attach events
temp.find("#Add").click(function() {
//some click action like make a new template
createTemplate();
});
//then add the new code to the holding area
$("#templateholder").append(temp);
}
If you wanted to create a new one when the page first loads
$(function() {
createTemplate();
});

Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
source: http://www.w3schools.com/js/js_htmldom_nodes.asp
there is another question in stackoverflow with similar question with decent answer
Inserting HTML into a div

Proper selector for this tag?

I cant seem to find the right jquery selector for this tag:
HTML:
<div class="span4 span4-mod">
<div class="well well-mod">
<h4 class="DomainDescription">Iniz LAX1</h4>
<span class="btn-block">
<button></button>
</span>
<form action="pinfo.php" method="post">
<input type="hidden" value="">
<button>History</button>
</form>
Port Status<br />
<span class="portstatus porton">21</span>
<table class="table" style="margin-top: 10px;">
<tbody>
<tr>
<td><strong>Distro:</strong></td>
<td class="showdistro">Debian 7.1</td>
</tr>
<tr>
<td><strong>Online since: </strong></td>
<td class="showonline">2 Days 10:29</td>
</tr>
</tbody>
</table>
</div>
I'm trying to search for the class "DomainDescription", and then search for the HTML within the class "showonline", and manipulate the latter.
I'm looking for the relationship of sibling (table) >child (tbody) > child (tr) > child (td)
Try as I may, I cant seem to find a proper selector for this kind of relationship.
I began by:
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).siblings().children(".showonline").html();
alert (PrintedUptime);
});
What should the proper selector be?

you can
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).closest('.well-mod').find(".showonline").html();
alert (PrintedUptime);
});
Demo: Fiddle

The correct css selector is:
.DomainDescriptor~table>tbody>tr>td>.showonline
I think that is correct, at least. Therefore, you can use:
$('.DomainDescriptor~table>tbody>tr>td>.showonline').each(function(){
alert(this.html());
})
to achieve the desired effect. This is not tested.

How to include a page in a table by clicking a category in a menu (or in another table)?

I have following two tables and a script having a function includePage(). Table with id=1 contains a menu whereas table with id2 is empty. It just contain one cell.
Now I want that when a user click on the first option in the menu of table having id=1, a dummypage1.html may appear in the table having id=2. Similarly when a click is on the second option of menu of table having id=1, a dummypage2.html may appear in the table having id=2.
How exactly can I tell the browser with the help of script to include the pages in table having id=2? Please help.
<table id="1">
<tr>
<td id="choice1" onclick="loadPage()">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage()">Sessions Information</td></tr>
</tr>
</table>
<table id="2">
</table>
<script language="javascript">
function loadPage(){
//if (document.getElementById('choice1')
// {
// <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
// }
}
</script>

You can pass a parameter on loadPage function
<td id="choice1" onclick="loadPage(1)">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage(2)">Sessions Information</td></tr>
<table id="2">
<tr><td id="TD"></td></tr>
</table>
<script>
function loadPage(whatPage) {
var url = (whatPage==1) ? "initSession.html" : "infoSession.html";
document.getElementById('TD').innerHTML = '<iframe src="'+url+'" width="727px" height="416px"></iframe>';
}
</script>
OR
<table id="2"><tr><td><iframe src="about:blank" id="content" style='width:100%;height:100%;"/></td></tr></table>
then on the javascript:
function loadPage(whatPage) {
document.getElementById('content').src = (whatPage==1) ? "initSession.html" : "infoSession.html";
}

If you are sure about following methodology
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in table-B
this kind of designing leads to more tables when the age increases.
Better use this kind of style..
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in TABLE-A
The thing is place an IFRAME inside the TABLE-A, and when clicking the ROW1 or ROW2 or ROW-n
set thet page target to that iframe.
<table>
<tr>
<td>
Page1</td>
<td>
Page2</td>
</tr>
</table>
<table>
<tr>
<td>
<iframe style="width: 400px; height: 400px;" id="myplace" name="myplace"></iframe>
</td>
</tr>
</table>

Another approach is to make a AJAX call to request the content, and place it in the table setting a innerHTML property.
For AJAX calls you can use a variety of libraries, I personally recommend jquery and dojotoolkit.

With jQuery:
<table id="1">
<tr>
<td id="choice1">Initialize Session</td></tr>
<td id="choice2">Sessions Information</td></tr>
</tr>
<table id="2">
<tr><td></td></tr>
</table>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(function() {
$("#choice1,#choice2").click(loadPage);
});
function loadPage(){
var id = $(this).attr("id");
if(id === "choice1") {
$("#2 td").load("initSession.html");
} else if (id === "choice2") {
$("#2 td").load("infoSession.html");
}
}
</script>