Include a table in each div that appends body - javascript

I am developing a web-site where i will need to get some json data for some places that will include images, titles, information etc and i need to present them to a website.
I have developed a prototype where i user the HTML5 classic template and i successfully appended my "article" with 10 <div>Example div</div> divs using a for statement and i am able to give them a unique id using the counter i.
My code for this is
<script type="text/javascript">
$(document).ready(function () {
for (var i=1; i<10; i++){
$("article").append("<div id=myid"+i+">Example div</div");
}
});
</script>
This works great but the thing is that i want to append the article using seperate divs with unique ids and will each include a table that will be filled with the json data i will recieve in the future.
But when i try to write my code and place inside the div tags the below code i get a syntax error...
<table width="597" border="1"><tr><td rowspan="2"> </td><td rowspan="3"> </td><td> </td></tr><tr><td> </td></tr><tr><td> </td><td> </td></tr></table>
Any thougts?

I finally got it together the correct way was to add:
$("article").append("<table id="+i+" width="+597+" border="+1+"><tr><td rowspan="+2+"> </td><td rowspan="+3+"> </td><td> </td></tr><tr><td> </td></tr><tr><td> </td><td> </td></tr></table>");
i just ad to add "+the numeric value for the table content+" and that way it works thanks all for the comments and suggestions! :)

Related

Need to display javascript value in anchor tag of jsp

I need to pass the userid variable through anchor tag .. Here I attached code for that.
Code :
<td colspan="2" align="right"><div align="center">User Id</div></td>
<td><input class="textbox" type="text" id="userid" ><a href="access.jsp?userid='+userid'"
"></a></td></tr>
Javascript :
var userid ="MK";// this value is getting fetched correctly using document.getElementByName
Just I need to display in anchor tag.How can I do this?
Please, try to be more clear with your Question.
You should show all related parts of your code so people can figure out what exactly you need.
Also Stackoverflow provides some markup so you can insert blocks of code - very useful, I recommend looking it up :)
Assuming you already have the anchor <a> tag
HTML
JS
// your code (fetching data) ...
document.getElementById('anchor').setAttribute('href', 'google.com?userid=" + userid)

How to select specific button with jquery?

I have a situation here . i am fetching some data from DB and i iterate it in a JSP page in a HTML table and so wverything is dynamic . Since there are multiple entries so i am confused how to select particular entry via jquery selector and then do some basic stuff
JSP code :
<td height="40px" class="td" bgcolor="#CCCCCC"><a href=" <%=contextName%>/jsp/knowledgeBase/kbDetails.jsp?kbaseID=<%=kbaseID%>&app=<%=motsID%>&env=<%=env%>&env=<%=env%>&ptitle"=<%=pTitle%>><%=kbaseID%></a></td>
<td height="40px" class="td" bgcolor="#CCCCCC"><%=motsName%></td>
<td height="40px" class="td" bgcolor="#CCCCCC"> <%=problemDescription%></td>
<td height="40px" class="td" bgcolor="#CCCCCC"><%=solution%><button value="Expand" id="Exp">Expand</button></td>
Since i have dynamic variables in this how do i write the jquery code to pic up the particular button and display result in particular <td>
Basically i want to use the accordion functionality
below is the screen shot
By giving each button a different class, and then doing $(.classname)
(or give them an id and use $(#idname)
EDIT: (thanks, Sebastian S)
By giving each button a different id, and then doing $(#classname)
Either use different id for every cell, or if it is more appropriate, you can use HTML5 data-* attributes instead.
Usage
If you are using id, you can get the particular buttons by
document.getElementById('myId'); // vanilla JS
$('#myId'); // jquery
In case of data-* attributes:
document.querySelector('td[data-myAttr=myVal]'); // vanilla JS
$('td[data-myAttr=myVal]'); // jquery
Data attributes make better sense, if the particular cells are not identified by a single identifier, but multiple fields.

Javascript Alternative to Iframe?

I am an admin on an online roleplaying game, and we recently made the transition from some sort of Frankencode to javascript. While I have the basics down, there is a problem I have encountered that I am not sure how to fix.
We have macros on the game, where you can move multiple rooms by typing the direction with a space, a semi-colon, and another space between directions. I've created an atlas that has a long list of macros to help the players of the game move around faster and more efficiently. My main problem is, everything worked with the Frankencode, but Javascript is not recognizing the iframe in my new code.
I would really like an alternative to iframes where I don't have to rely on an outside website for this script, but my journey into that hopeful line of thought just led to a bunch of bright red, angry errors and the command breaking. I substituted the iframe for a contentedtable and the game just was not having it!
Below is my code. Keep in mind that everything works except the iframe.
Thanks in advance! :)
var macaroni = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
var macaroons = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
function command(person, totalcommand) {
if (person.isAttribute("macaroons"))
{
person.personal(macaroons);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
person.personal(macaroni);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
The alternative to iframes is AJAX(Asynchronos Javascript and XML) which lets you load pages and data from a server and you can handle the results for that and insert the response back into your page.
The best pages for learning about Javascript are from the Mozilla Developer Network and this link especially will help you learn more about ajax.
However there are libraries you can download, such as jQuery that help simplify a lot of tasks including loading and storing html and more.
If you need to store a website you can do the following:
Include jQuery in the HEAD:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Create a div(or other container for storing) with any id you want(should be unique):
<div id="loadingArea"></div>
Include a script at either the end of the page or end of the head to ensure that jQuery has loaded
<script>
$(document).ready( //Will run the following function when the html document is ready
function() {
var url = "http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm"; //Load the page you want.
var portion = "body >" //select the portion of the page you need to eliminate duplicate html, head, and body tags
//This is a jQuery selector similar to css meaning select all children (>) of body
//Here we tell jQuery to select the element with id(#) loadingArea and load the
//portion of the url.
$('#loadingArea').load(url+" "+portion);
}
); //End of ready call
</script>

Javascript Manipulation on included DOM element

Basically what I am doing is dynamically loading external HTML files depending on a drop-down selection in classic ASP. It's an old system for someone I work for, so there's not really many choices I have except to figure this out. The included HTML is only a table of data such as this;
<table cellspacing="0" cellpadding="0" style="vertical-align:top; width:100%; ">
<tr style="line-height:14px;" >
<td width="150"><b style="color:#888888;">Symbol<b></td>
<td ><b style="color:#888888;">Security</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Amount</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Mkt Value</b> </td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Est.Next Date</b></td>
</tr>
<tr style="line-height:14px; background-color: #f0f0e8;">
<td>QPRMQ</td>
<td>BANK DEPOSIT SWEEP PRGRAM FDIC ELIGIBLE</td>
<td style="text-align:right;">100.00%</td>
<td style="text-align:right;">$191.77</td>
<td style="text-align:right;" id="NextSWPDate">11/15/2010</td>
</tr>
</table>
I want to run a function on the TD element with the ID of "NextSWPDate", but since this is "included" html I just receive the error of;
Unable to set value of the property 'innerHTML': object is null or undefined
My function is just generic right now trying to do any manipulation on the object I can, after I get that set, I can write the real logic quickly and easily.
function SetNextSWPDate(){
document.getElementById("NextSWPDate").innerHTML = "this is a test";
}
Thank you,
NickG
Your tag mentioned jQuery, so I hope a jQuery solution is acceptable. A standard $("#NextSWPDate").text("whatever"); worked just fine for me. http://jsfiddle.net/pCx9K/
In case of included HTML or generated HTML, you might want to wait with executing javascript until the DOM is fully loaded.
To do so, try using the window.onload of javascript or the $(document).ready function of jQuery.
The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE,
TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Colin's work-around (setting innerText on the td instead of innerHTML on the tr)
is a good one in your case. If your needs become more complex, you'll have to
resort to The Table Object Model.
Source from Why is document.getElementById('tableId').innerHTML not working in IE8?
Refer http://msdn.microsoft.com/en-us/library/ms533899%28v=vs.85%29.aspx
Ok, so you must implement a callback function to your jQuery.load function : $("#yourDiv").load("youExternalFile",function(){//your stuff here ... }); see api.jquery.com/load/#callback-function – mguimard 3 hours ago

Print each loop of <c:foreach> individually using javascript

Currently I'm printing the whole page with print icon using following code:
<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" />
</a>
I am reading a list of objects in JSP and displaying the object details using <c:foreach>.
I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.
I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?
Edit:
Example:
<c:forEach var="case" items="${distributions}">
<table>
<tr>
Print case details
</tr>
</table>
</c:foreach>
If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.
I have not done the following but theoretically it should work:
1) define a print stylesheet, with:
body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}
2) define an event listener, e.g. with jQuery
$(".detail-item .print").click(function(e) {
$("body").addClass("detail-print");
$(this).closest(".detail-print").addClass("current");
window.print();
});
This should only print what is visible in your print stylesheet.
The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...
In your block you could put the data in a td then use the method described in this post to print the contents of that td.
<script type="text/javascript">
$(function(){
$(".printable").each(function(){
var $td = $(this);
var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
$td.parent().append($printIconTD);
$printIconTD.click(function(){
Popup($td.html());
});
});
});
</script>
....
<c:forEach var="case" items="${distributions}">
<table>
<tr>
<td class="printable">Print case details</td>
</tr>
</table>
Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know
A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.

Categories

Resources