I have a specific rows in a HTML table that I do not want to be displayed when the page loads.
There will be an Ajax request made after the page loads that returns values that would populate the table rows.
So I would want to display these rows only after the Ajax returns with a response and until then I want to display a 'loading' message in place of these rows.
I tried adding these rows in a div and used jquery's show()/hide() appropriately but that didn't work.
I'm new to JS and jQuery, so any help is appreciated.
<html>
<body onload="my_ajax_func()">
<table>
.
. <!-- Other rows that will be displayed-->
.
<tr>
<th colspan=2 class="custHeader">High Value Flags</th>
</tr>
<tr>
<td align=right><div id="loading_msg"><b>Loading..</b></div></td>
</tr>
<tr>
<td id="val_header" class=caption>Value Tier: </td><td id="val"> </td>
</tr>
<tr>
<td id="hypo_val_header" class=caption>Hypo Value Tier: </td><td id="hypo_val"> </td>
</tr>
<tr>
<td id="service_type_header" class=caption>Service Type: </td><td id="service_type"></td>
</tr>
</table>
</body>
<script>
function my_ajax_func() {
//retrieves values for table rows
//on success calls another func, say display_data
}
function display_data() {
$("loading_msg").hide();
document.getElementById("val").innerHTML = <some_value>;
document.getElementById("hypo_val").innerHTML = <some_value>;
document.getElementById("service_type").innerHTML = <some_value>;
}
</script>
</html>
Basically, I want a div for 'loading' message which would be displayed by default. Once Ajax request completes successfully, that div must be hidden and another div (with these 2 table rows) must be displayed in it's place.
To hide your rows at page loading, just create two css classes like this:
.displayNone{
display:none;
}
.displayBlock{
display:block;
}
and use this class in your rows
<tr class="displayNone"></tr>
So when page loads, this rows will be hidden.
So, in ajax success put this js:
$(".displayNone").removeClass("displayNone").addClass("displayHidden");
Then, download some loading gif image like this:
http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif
After that, wrap this img tag in a div with "displayNone" class too, and use inverse way of your rows:
Before your ajax call, remove "displayNone" class from it, and put "displayBlock".
Finally, in ajax success, remove "displayBlock" class from div, and put back "displayNone" to hide it again.
Hope it help.
Some doubts, please let me know.
Regards
You Can use .done() method
$.post( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "ajax request completed" );
})
If you only need to change text values in the rows, you might be able to get away with a class value of "display: none" in CSS for each complete row, until you are ready to update it. But you are going to have to have some unique ID for each, or way of counting children, in order to find that row again when you need to update it. Also, your table needs to be valid without those rows.
The other way to handle this would be to just add new rows dynamically. If you do this, remember the rows do not exist in DOM until you insert them there, and so you can't reference them before.
as mentioned above ajax has some methods like before and done where you have opportunity to show and hide your elements.
<table>
<thead>
<tr><th>header 1</th><th>header2</th><th>header3</th><tr>
<tr id="loadingrow"><th colspan=3>Loading Data...</th><tr>
</thead>
<tbody>....
$.ajax({
url: "http://fdafdas",
beforeSend: function( ) {
$('#loadingrow').show();
}
})
.done(function( data ) {
$('#loadingrow').hide();
//load your data
}
});
Related
I'm new to programming and I was recently playing around with APIs and AJAX. The API that I'm using grabs me website descriptions for a specified URL. I want this description to appear under a link (to that URL) upon hovering. My problem is, the link appears in a table cell and I want the URL description to appear under the link, in the same cell. What I have right now works, however, it appends <span> and <br> to a <td>. Is this bad form? Should I try something else?
HTML:
<table>
<tr>
<td class="heading">Blah</td>
<td>BlahBlah</td>
</tr>
<tr>
<td class="heading">Website</td>
<td id="website"><a href="https://www.google.com/">Google</td>
</tr>
</table>
CSS:
.urlWebsite {
font-size: 12px;
}
Javascript:
var $table = $('#website a');
$.ajax({
type:'GET',
url: "[insert API url here]",
success: function(website){
$table.hover(function(){
$table.append('<br><span class="urlWebsite">'+website.description+'</span>');
}, function(){
$table.find("span").last().remove();
$table.find("br").last().remove();
});
}
});
There's nothing wrong with that. Table rows and columns are only meant to delineate content. It doesn't matter what content that is.
You could even put a div inside the td and wrap that with an a tag and make the entire cell clickable.
Also, should be using thead and tbody inside of your table.
I have a HTML-code like this here:
<div id="overview" class="fadeable">
<table id="exportTable">
<tr>
<td style="width: 500px;"><strong>Col 1</strong></td>
<td style="width: 15px;" class="aligned_td"><strong>Col 2</strong></td>
</tr>
<% call getLocationPercentages(is_nll) %>
</table>
</div>
As you can see, I'm calling an asp-function after the first tr. The output it generates is correct (after reloading the site. However, I don't want to reload it.
For this scenario, I made a small JS-function, which works in Chrome, but not in IE (7).
Just a quick note: I can't just not support IE 7.
$(document).on("click", "#updateLocation", function() {
$.ajax({
url: "my-file.asp",
type: "GET",
scriptCharset: "utf-8",
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: data
});
$('#exportTable').load(location.href + " #exportTable");
}
I read the documentation for load and as I said, it works in chrome. IE however just "hides" the output. After submitting (or pressing this button (which is in another div, if that is important)) the table just vanishes, but the dom is correct. There is no CSS rule or what so ever what could hide that table. It would affect the other browsers as well though.
The DOM after submitting also has the correct values (so it is "reloaded", but not displayed)
Ideas? Familiar with that problem?
Update
I figured out, that the Table isn't generated properly. My HTML results in something like this:
<table id="exportTable">
<table id="exportTable">
correct content here
</table>
</table>
When I move the inner table over the other, so it is alone again, the display is correct. For some reason, instead of re-generating the content, it adds another table.
I tried to "unwrap" the 2nd occurence with this, but that didn't do the trick:
var e = $('#exportTable:last');
e.prev().insertAfter(e);
The inner table isn't selected with that, it affects only the outer one
e.unwrap()
didn't do it either
I can't even reach it with each in a loop. It is simply left behind.
I don't know why, but "reloading" a table ends up in having 2 tables with the same classes + id's, where the 1st one is just a wrapper of the 2nd one.
I wrapped a <div> around the table, changed my JS to reload that div and now it is working.
HTML
<div id="tableWrap">
<table id="exportTable" class="exportTable">
<tr>
<td style="width: 500px;"><strong>col 1</strong></td>
<td style="width: 15px;" class="aligned_td"><strong>col 2</strong></td>
</tr>
<% call getLocationPercentages(is_nll) %>
</table>
</div>
JS
$('#tableWrap').load(location.href + " #exportTable");
I am not sure if your way of doing that is correct or what do you really want to achieve.
First of all - when you create HTML table you should create it like:
<table>
<thead>
<tr>
<!-- columns descriptions here -->
</tr>
</thead>
<tbody id="ContentId">
</tbody>
</table>
And only update tbody element.
Secondly, at first start of application you should render data with ASP.NET, but then (if you want to use AJAX with jQuery) the simplest (but not the best) way of updating that data would be:
JS
$("#UpdateTBody").on("click", function () {
$.ajax({
url : "script.asp",
...,
success: redrawTBody
});
// let's say success callback receives HTML in data argument
function redrawTBody (data) {
// disclaimer : this is simple, but not the best way
// drawing table
$("ContentId").html(data);
}
});
HTML returned by script.asp
<tr> <!-- row 1 --> </tr>
<!-- following rows -->
And when it comes to changing URL better way would be to use location.assign( location.href + '#ContentId' ) or location.hash="ContentId"
I have a HTML table where each row is clickable. Here is how I have them clickable:
$(".clickable-row").click(function() {
window.document.location = "${pageContext.request.contextPath}/ActionClass";
});
<tr class="clickable-row">
<td class="text-left">some parameter</td>
...
</tr>
I am not sure how to pass the data from the clicked table row to the struts action since I am using a Javascript function to handle the click/navigation. In the past I was able to use something like:
<s:url action="ActionClass" var="actionLink" >
<s:param name="param1">${param1}</s:param>
<s:param name="param2">${param2}</s:param>
</s:url>
<s:a href="%{actionLink}">go to Action</s:a>
But I can't use the <s: tags inside the JS function. What is the best way to go about this?
Not really a duplication question. This was more specific how to get a table row parameter sent to an action by a clickable row. I was able to get a parameter to send by a column button, but never received an answer that helped with a clickable row.
You can create a column with hyper link that passes parameters to action like:
<td>
<s:a href="test.action?param1=%{param1}><s:property value="param1"/></s:a>
</td>
I decided to add a select button column that submits a form for the row the button is on.
I read a lot of things on stackoverflow, but nothing help me :(
I have this HTML table, loaded by ajax request :
<table class="table table-striped table-hover choix_annonce_table">
<thead>
<tr>
<th>Sélection</th>
<th>Visuel</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" value="45" name="idAnnonce"></td>
<td><img alt="Annonce 1" src=""></td>
</tr>
<tr>
<td><input type="radio" value="46" name="idAnnonce"></td>
<td><img alt="Annonce 2" src=""></td>
</tr>
</tbody>
</table>
I try to detect when radiobutton is checked, but no of the following issues work (in js file included on my "main" page):
$(document).ready(function() {
$("input[name=idAnnonce]").click(function(){
alert("xx");
});
});
OR
$(document).ready(function() {
$("input[name=idAnnonce]:radio").change(function () {
alert("xx");
});
});
Do you have in idea?
EDIT : when I load JS directly into my loaded table with ajax, it works.
Why ?
This happens because the .click() and .change() methods, along with all other event handlers, only watch for these events on elements that are present at the time the events are attached.
To solve this, instead of using this:
$('input[name=idAnnonce]').change(function() {
// ...
});
Use something like this instead:
/* Use 'body' or any element that will contain the form */
$('body').on('change', 'input[name=idAnnonce]', function() {
// ...
});
This will watch for click events passing up to the body, and only call the function for those that match the selector.
If your javascript is loaded directly into the html file, then it's being executed in line as the html file is loaded and parsed. When the javascript is in a separate file, it needs to be invoked. You could do this by executing an "onload" function as part of your body tag statement. That part of your html is missing, so it's unclear whether you're actually loading anything when your table is loaded. You can also execute these event monitors through a callback at the end of the ajax load.
When loading the table via ajax, you will need to bring in the javascript through the ajax call. Meaning the table that comes in should also contain the javascript that references the table. The DOM on the parent page doesn't know about the table, so the javascript on the parent page won't act on new content.
$(document).ready(function() {
$('input[type=radio][name=idAnnounce]').change(function(evt) {
console.log(evt.target.value)
});
});
The selector you were using was wrong.
The above code should help
cheers
I have a table with the following structure
<table id='table1'>
<tbody>
<tr id='rowa'>
<td><select>....</select></td>
<tr>
...
<tr id='rowx'>
<td>....</td>
</tr>
...
<tr id='rowz'>
</tr>
</tbody>
</table>
What I want to do is on clicking of a button, I want to copy the rowa and insert it before rowx.
What I am currently doing is
<script type='text/javascript'>
function copyRow() {
var row = $('#rowa').clone();
$('#rowx').before(row);
}
</script>
It seems to show the newly constructed row before the rowx but when I try to access that new row, it does not work. what I mean by does not work in that the select input item does not behave like a select item, it behaves like the static text.
elsewhere on the page I have
<a href='javascript:copyRow()'><img src='images/copyrow.png' title='Copy Row' /></a>
Sorry! I should have made it clear that the copyRow is being called when the user clicks on a link somewhere else on the page.
Check this http://jsbin.com/owivin/1/.
JS:
$(document).ready(function(){
$("#rowx").before($("#rowa").clone());
});
Your code's not working because you never call copyRow(). I put it in the document.ready() so that it would run as the document gets ready!