I am writing a web application that dynamically creates and names table elements, and I need to retrieve and parse a thoroughly nested id (not the value). The structure (and my latest attempt) are as such:
<table>
<tr onclick="alert(this.firstChild.firstChild.firstChild.id);">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
It keeps returning 'undefined', which confirms my suspicion that I do not know JavaScript as well as I should. I am also using jQuery, so those solutions would work.
If you need the exact one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr onclick="alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
This being an inline JavaScript, it is better to use unobtrusive JavaScript by delegating the events and make your code and presentation split, so that it will be clear. A fiddle of unobtrusive JavaScript is below.
$(function () {
$("table").on("click", "tr", function () {
alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
You don't need to keep on adding code for each <tr>.
Related
I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.
Below is the table having class as select_fly for td, i want complete html of td with class select_fly.
<table>
<tr>
<td width="5%"><input type="radio" name="onward" class="onward" value="1" checked></td>
<td class="select_fly">
<div class="disp_trip">
hai
</div>
</td>
</tr>
</table>
Below is the script which i wrote for taking the html data. But do no wats wrong in this code its showing undefined. Please help me out with this !!!!
var owner = $('input[name=onward]:checked').closest('td').siblings('td.select_fly').html();
I suppose that you are placing your script in the wrong place in code. Put it after the table tag, it worked for me in this way.
We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm
I have a table and I want to wrap table rows , but the problem is I don't know with what to wrap those those guys up... If I use <div>,<span>,<tr>,<td>...they all break my validation. So with what can I wrap my table-rows without breaking validation?
This is how I want it to look only problem is that my HTML is not valid.
Fiddle Here
I am generating my wrappers using following Jquery
$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');
//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});
As #KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:
<table class="form-table">
<tbody class="bg">
<tr valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input type="checkbox" value="value1" name="name1"/>
</td>
</tr>
<tr valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input type="file" name=""/>
</td>
</tr>
</tbody>
<tbody class="other">
<tr valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input type="checkbox" value="value2" name="name2"/>
</td>
</tr>
<tr valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input type="checkbox" value="value3" name="name3" />
</td>
</tr>
</tbody>
</table>
The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.
Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.
I would first start by just removing the table to begin with. It is really only best practice to use a table when actual 'tabular data' is being shown.
<h3 class="title">General Settings:</h3>
<div class="section_box1">
Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br />
Menu Background: <input type="file" name=""/>
</div>
<div class="section_box2">
Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br />
Hide Site Title: <input type="checkbox" value="value3" name="name3" />
</div>
See the jsfiddle.
This way you can more freely add classes / wrappers as needed and still be HTML compliant.
I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.
Here is my click event code:
$('#check_url').click(function() {
$('#thumb_loader').load('load_thumb.html');
});
thumb_loader is just a div. I have also tried it like this:
$('#check_url').click(function() {
$('#thumb_loader').html($('<div>').load('load_thumb.html'));
});
Here is load_thumb.html:
<div>
<script type="text/javascript">
wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
</script>
</div>
wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.
First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.
Anyone see any problems here?
EDIT:
Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.
<table>
<tr>
<td colspan="2">
<div id="thumb_loader"></div>
</td>
</tr>
<tr>
<td>
<label>Link Title:</label>
</td>
<td>
<label>Link Description:</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_title" />
</td>
<td rowspan="3">
<textarea name="link_description"></textarea>
</td>
</tr>
<tr>
<td>
<label>Link URL:</label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_url" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input id="check_url" type="button" value="Check URL" />
</td>
<td align="right">
<input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
</td>
</tr>
</table>
I don't see anything else that could be relevant in the code. Hope this is enough.
Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:
$.getScript('path/image.js', function(){
// file loaded
});
You should put above code in your main file where you want to run your thumb image.
More:
http://api.jquery.com/jQuery.getScript/
jQuery#load(): When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.
Update:
according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?