I am trying to implement a button that will delete events from a users selected set of events. For troubleshooting sakes right now I have 5 events hard coded in the page, but eventually they are called from localStorage. The delete button is supposed to delete elements from localStorage as well as the page. My problem is it throws an error when the Remove buttons are not clicked in order. Any and all help is appreciated. To see the errors please open console. Here's a fiddle: http://jsfiddle.net/roob/65j6ktnL/
here's a shorter version of the code:
<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" ><b>map</b></span>
<span class="premove hidden" rel="0">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" > <b>map</b></span>
<span class="premove hidden" rel="1">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit"><b>map</b></span>
<span class="premove hidden" rel="2">Remove</span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}
$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});
$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>
You are adding rel=(number) to each item in the list and using that number to get its reference in the array defined by document.getElementsByClassName("eventer") - each time you remove an item the array gets shorter because the removed item is now gone and you redefine it with each click of the remove button. What happens is you eventually start looking for item #4 and it isn't there because only two items exist in the list.
Another way to do this would be to look for the element closest to your button and remove it.
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();
Related
This question already has answers here:
How to get text node after element?
(4 answers)
Closed 3 years ago.
I have a table like so:
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
I am currently using jquery get extract all the names from the data attributes.
However, I also need to see how many times it's referenced (x3, x2 or x1) which are standalone text nodes.
Here is my loop:
jQuery(".child-row123 a[data-name]").each(function(){
var dataname = jQuery(this).data('name');
//Alert
if(!jQuery.isNumeric(dataname)){
alert(dataname);
}
});
Using jQuery, is it possible to get the data-name alongside the text node of x3, x2 or x1? I'm trying figure it out logically and I'm guessing I need to look at the end of each anchor tag?
Try using the DOM function .nextSibling to pick the next node and use nodeValue to get the "referenced (x3, x2 or x1)"
Source: How to get text node after element?
jQuery(".child-row123 a[data-name]").each(function() {
var dataname = jQuery(this).data('name');
var nodetext = jQuery(this)[0].nextSibling.nodeValue;
//Alert
if (!jQuery.isNumeric(dataname)) {
console.log("Data: " + dataname + "\nreferenced: " + nodetext);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
You can get the info with .nextSibling
jQuery(".child-row123 a[data-name]").each(function() {
var name = this.getAttribute("data-name"), // as the name is a string we don't really need the magic from jQuerys .data()
refs = this.nextSibling.textContent;
console.log(name, refs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
What I would do and what you could do if possible. Is wrap your texts inside a span and then get the text with next(). With this solution, instead of having floating texts you have a more structured html.
$(".child-row123 a[data-name]").each(function() {
var dataname = $(this).data('name');
//Alert
if (!$.isNumeric(dataname)) {
console.log(dataname + " " + $(this).next().text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> <span>x3</span><br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> <span>x2</span><br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> <span>x1</span><br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> <span>x3</span><br>
</td>
</tr>
</tbody>
</table>
I have issue in storing the value from div id to local varible in javascript.
I have a table which generate a dynamic div tags. So somehow using the table Id i can get the dynamic div tags in the variable. I can see those div tags using the alert(variable.innerHTML). I need the values from that inner HTML.
Following is my alert output.
I need to get the values of dates so that i can find the number of days.
<iframe src="javascript:false;" id="FilterIframe33" name="FilterIframe33" style="display:none" height="0" width="0" filterlink="?">
</iframe>
<table summary="Active Projects " o:webquerysourcehref="url;XMLDATA=1&RowLimit=0&View={A6F61185-B2B2-4A3C-8401-FDCCA1D9673D}" width="100%" border="0" cellspacing="0" dir="none" onmouseover=" EnsureSelectionHandler(event,this,33) " cellpadding="1" id="{CD556AFD-0460-4DA1-8103-07AFB43D0847}-{A6F61185-B2B2-4A3C-8401-FDCCA1D9673D}" class="ms-listviewtable ms-basictable " xmlns:o="urn:schemas-microsoft-com:office:office" handledeleteinit="true">
<thead>
<tr valign="top" class="ms-viewheadertr ms-vhltr">
<th nowrap="" scope="col" onmouseover="OnChildColumn(this)" class="ms-vh2">
<div sortable="" sortdisable="" filterdisable="" filterable="FALSE" filterdisablemessage="" name="Project_x0020_Name" ctxnum="33" displayname="Proj...-presence-disconnected-10x10x32" title="" showofflinepawn="1" src="/_layouts/15/images/spimn.png?rev=23" alt="No presence information" sip="email.iD" id="imn_7094,type=smtp"></span>
</a>
</span>
<span class="ms-noWrap ms-imnSpan"><a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabindex="-1">
<img name="imnmark" class="ms-hide" title="" showofflinepawn="1" src="/_layouts/15/images/blank.gif?rev=23" alt="" sip="emailID" id="imn_7095,type=smtp">
</a>
<a class="ms-subtleLink" onclick="GoToLinkOrDialogNewWindow(this);return false;" href="/_layouts/15/userdisp.aspx?ID=11">Brad Griggs
</a>
</span>
</span></td><td class="ms-vb2">
<div align="right">61 %</div>
</td><td class="ms-vb2">
<div><img src="/SiteAssets/On%20Track.png"></div>
</td><td class="ms-vb2">Jody Standifer</td>
<td class="ms-vb2">
<nobr>10/25/2016</nobr>
</td>
<td class="ms-vb2">
<nobr>8/11/2017</nobr>
</td><td class="ms-vb2">
<nobr>4/21/2017 2:30 PM</nobr>
</td>
</tr>
</tbody>
</table>
you can use jquery as the comments suggest. you can also stick to plain javascript if your audience is on atleast IE9. surely won't work if this is NOT on a local intranet company application, then learn jquery, it will help you to do things quicker in the long run.
i would get rid of the "nobr" usage first. use css to handle whitespace.
the values in your class=ms-vb2 don't seem to be consistent, in that, they are not always dates so careful with using the class selector here.
var n = document.getElementsByClassName("ms-vb2").length;
for (var i=0, n; i < n; i++) {
console.log(document.getElementsByClassName("ms-vb2").item(i).firstChild.nodeValue)
}
I need to resize columns in a table where each element has a lot of parent divs and classes. These js functions allow me to resize the header / rows in the column once, but not multiple times. HTML tag is at the bottom. Is there a better way to do this?
//This section is to resize columns
var pressed = false;
var start = undefined;
var content = undefined;
var startX, startWidth;
var left, right;
function mouseDownResize(a,b,c,d,e)
{
//function will recieve the correct th id of the div selected and the content div and the divs on either side of the event and the event
start = document.getElementById(a);
content = document.getElementById(b);
//this is getting the div from the td above the selected div. This will diable the urCursorClickable class so that doesn't
//steal the focus of the resize
left = document.getElementById(c).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
pressed = true;
startX = parseInt(e.pageX);
startWidth = parseInt(start.style.width);
}
function mouseMoveResize(a,b,e)
{
//function will recieve the correct th id of the div selected and the event
start = document.getElementById(a);
content = document.getElementById(b);
if (pressed) {
start.style.width = parseInt(startWidth + (e.pageX - startX)) + "px";
content.style.width = start.style.width;
}
}
function mouseUpResize(c,d)
{
if (pressed) {
pressed = false;
//this is getting the div from the td above the selected div. This will enable the urCursorClickable class
left = document.getElementById(c).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
}
}
<tbody id="21.125-content">
<tr vpm="mrss-hdr" role="row" style="height:20px;">
<td valign="top" role="gridcell" class="urST5OuterOffBrd urBorderBox urStd" colspan="4" style="background-color:transparent!important;border-left-width:1px;border-top-width:1px;border-right-width:2px;border-bottom-width:1px;">
<div id="21.125-mrss-hdr-left" hpm="left" vpm="mrss-hdr" segcc="3" segrc="1" segori="0" segoci="0" class="urSTSHL1 urST4LbHdrBg" style="height:20px;width:100%;overflow:hidden;white-space:nowrap;">
<div bisposelement="X" class="urBorderBox" ioffsettop="0" ioffsetleft="0" style="position:relative;top:0px;float:left;left:0px;">
<table border="0" cellpadding="0" cellspacing="0" class="urST5OuterOffBrd urBorderBox" id="21.125-mrss-hdr-left-content" style="empty-cells:show;table-layout:fixed;width:1px;border-right-width:2px;">
<colgroup>
<col etype="SELECTIONCOLUMN" style="width:21px;">
<col id="Status_Column" iidx="1" style="width:27px;">
<col id="Item_Column" iidx="2" style="width:34px;">
</colgroup>
<tbody irowindexoffset="0" irowsfragmentlength="1">
<tr rr="0" sst="4" rt="2" style="height:21px;">
<th id="grid#21.125#0,0" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="0" hasselmenu="X" acf="CSEL" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricSelCol urST5L urST5HCColorLvl1 urST4LbHdrBg" style="height:20px;padding:0px;text-align:center;">
<div acf="SELMNUOPN" tabindex="0" ti="0" selmenuid="cnt20_SelectionMenu" id="grid#21.125#0,0-menu" class="urSTColHdrSelPopupIcon" title="Table selection menu">
</div>
</th>
<th id="grid#21.125#0,1" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="1" title="Status" captionid="grid#21.125#0,1#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:center;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="center" tabindex="0" ti="0" title="Status" class="urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,1-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,1#cp" ct="CP" title="Status">Status</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,1-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<!--Column Resize for Status Column-->
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;" onmousedown="mouseDownResize('Status_Column','Status_Content_Column','grid#21.125#0,1-CRESIZE','grid#21.125#0,2-CRESIZE',event);" onmousemove="mouseMoveResize('Status_Column', 'Status_Content_Column', event);" onmouseup="mouseUpResize('grid#21.125#0,1-CRESIZE','grid#21.125#0,1-CRESIZE');"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</th>
<th id="grid#21.125#0,2" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="2" title="Item of Requisition" captionid="grid#21.125#0,2#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:right;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="right" tabindex="0" ti="0" title="Item of Requisition" class=" urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,2-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,2#cp" ct="CP" title="Item of Requisition">Item</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,2-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;"> </div>
I am using a Powerschool database for my school. It is a non profit educational institution and it uses a SIS to holds students information, Grades, etc. I need this webpage to be automatically emailed to all of the parents email accounts every friday of the week. The parents email accounts are already setup in their user profiles on the SIS.
Is there a way to allow a user to submit their email address on this webpage and then, automatically schedule this webpage to be emailed to the user every friday of the week using Javascript ?
I am really sorry about the shopping list, but my knowledge is very limited to none in Javascript.
This is my basic HTML page that displays my students grades. It works when the student and parent login to their profile in Powerschool (my SIS).
<!DOCTYPE html>
<html>
<head>
<title>~[text:psx.html.guardian.scores.class_score_detail_]</title>
~[wc:guardian_header]
~[if.gpv.termgrades=true][else]
~[SetPostValue:selectedTab=GradesAndAttendance]
~[if.prefschool.sgshowpa=1]~[SetPostValue:showSGFGradebook=false][else]~[SetPostValue:showSGFGradebook=true][/if.prefschool.sgshowpa=1]
~[brij_render:common-ps;:GuardianHomeTabs]
[/if]
<!-- start of title and student content -->
<h1>~[text:psx.html.guardian.scores.class_score_detail]</h1>
<!-- title -->
<div class="box-round">
<!-- start student content -->
<table border="0" cellpadding="0" cellspacing="0" width="99%" class="linkDescList">
<tr class="center">
<th>~[text:psx.html.guardian.scores.course]</th>
<th>~[text:psx.html.guardian.scores.teacher]</th>
<th>~[text:psx.html.guardian.scores.expression]</th>
<th>~[text:psx.html.guardian.scores.final_grade]<sup>1</sup></th>
</tr>
<tr class="center">
<td>~[sectioninfo:~(sectionid);coursename]</td>
<td>~[sectioninfo:~(sectionid);teachername]</td>
<td>~(*class_expression frn="~(relsectionfrn)")</td>
<td>~[if.~[dbval;table=termbins;field=suppressltrgrd;*storecode=~ [gpv:fg];*termid=~(termid;absolute);*schoolid=~(schoolid)]#true]
~[code.localize:GradeScaleItem,param:~[decode;~(frn);031#;~(grade);~ (final.grade;~[gpv:fg])],param:~[decode;~(frn);031#;~(grade);~(final.grade;~ [gpv:fg])],param:column=name]
[/if]
~[if.~[dbval;table=termbins;field=SuppressPercentScr;*storecode=~ [gpv:fg];*termid=~(termid;absolute);*schoolid=~(schoolid)]=0]
<script type="text/javascript">
if ("~[decode;~(frn);031#;~(grade);~(final.grade;~ [gpv:fg])]"=="--") {
document.write(" ");
} else {
document.write("~[decode;~(frn);031#;~ (percent;format=numeric);~(final.pct;~[gpv:fg])]% ");
}
</script>
[/if] </td>
</tr>
</table>
<!-- The following row has 2 paragraphs - only one is visible at a time -- >
<!-- 4D's parser breaks on ; or : in comment fields passed to 'decode'-->
<p><strong>~[text:psx.html.guardian.scores.teacher_comments]</strong></p>
<div class="comment">
~[if.~(decode;~(frn);031#;true;false)=true]
<pre>~(comment)</pre>
[else]
<pre>~(final.comment;~[gpv:fg])</pre>
[/if]
</div>
<p><strong>~[text:psx.html.guardian.scores.section_description]</strong> </p>
<div class="comment">
<pre>~([03]teacherdescr)</pre>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="99%">
<tr>
<th>~[text:psx.html.guardian.scores.due_date]</th>
<th>~[text:psx.html.guardian.scores.category]</th>
<th>~[text:psx.html.guardian.scores.assignment]</th>
<th class="center" colspan="5">~[text:psx.html.guardian.scores.codes] </th>
<th class="center">~[text:psx.html.guardian.scores.score]</th>
<th class="center">~[if.~ [dbval;table=termbins;field=SuppressPercentScr]=0]%[/if]</th>
<th class="center">~[if.~ [dbval;table=termbins;field=suppressltrgrd]#true]~ [text:psx.html.guardian.scores.grd][/if]</th>
</tr>
<tr bgcolor="#edf3fe">~[x:studentscores]
<td>[duedate]</td>
<td>[category]</td>
<td>[assignment]</td>
<td width="14">[code_collected]</td>
<td width="14">[code_late]</td>
<td width="14">[code_missing]</td>
<td width="14">[code_exempt]</td>
<td width="19">[code_excluded]</td>
<td align="center"><span class="bold-underline">[score]</span></td>
<td align="center">[percent]</td>
<td align="center">[grade]</td>
</tr>
</table>
</div>
<div id="legend">
<h3>~[text:psx.html.guardian.scores.legend]</h3>
<p class="center">~[if.~(frn)=031#]~ [text:psx.html.guardian.scores.grade_stored_on,param:~(datestored)][else]~ [text:psx.html.guardian.scores.grades_last_updated_on,param:~(LastGradeUpdate)] [/if]</p>
<p class="center"> <img src="/images/icon_check.gif" alt="Collected">~ [text:psx.html.guardian.scores._collected]<img src="/images/icon_late.gif" alt="Late">~[text:psx.html.guardian.scores._late]<img src="/images/icon_missing.gif" alt="Missing">~ [text:psx.html.guardian.scores._missing]<img src="/images/icon_exempt.gif" alt="Exempt">~[text:psx.html.guardian.scores._score_is_exempt_from_final_grade] <img src="/images/icon_excluded.gif" alt="Excluded">~ [text:psx.html.guardian.scores._assignment_is_not_included_in_final_grade]</p>
<p><strong>1</strong>~ [text:psx.html.guardian.scores._this_final_grade_may_include_assignments_that_ar e_not_yet_p]~ [text:psx.html.guardian.scores.special_weighting]~ [text:psx.html.guardian.scores.used_by_the_teacher]</p>
</div>
<!-- end student content -->
<input id="activeNav" type="hidden" value="~[if.gpv.termgrades=true]#btn- gradesHistory[else]#btn-gradesAttendance[/if]"/>
~[wc:guardian_footer]
</body>
</html>
I want to append multiple div’s one after another.
In my scenario I retrieve data from SharePoint and from that I get some variable values like this
Variable :- StartTime, EndTime, MeetingTitle , RoomNo.
$(xData.responseXML).find("z\\:row, row").each(function() {
var StartTime = $(this).attr("ows_EventDate");
var EndTime = $(this).attr("ows_EndDate");
var MeetingTitle = $(this).attr("ows_Title");
var BuildingName = $(this).attr("ows_BuildingName");
var RoomNo = $(this).attr("ows_Facilities");
}
After getting variable value every iteration of loop, I want to append those variable value in div’s one after another. And create page body.
In the div I want to assign the value at below position
span id – RoomNo - RoomNo (Variable value)
span id – StartTime - StartTime (Variable value)
span id – EndTime - EndTime (Variable value)
td id= MeetingTitle – MeetingTitle (Variable value)
Div is look like below,
<div class="box" style="float:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="acqabold">Room No.</span><br />
<span class="numberbold" id="RoomNo">01</span></td>
<td align="right"><span class="smacqabold" id="Today">YYYY<br>
DD Month </span><br>
<span class="bluebold" id="StartTime">08.00</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">10.00</span></td>
</tr>
</table>
</td>
<tr>
<td align="center" class="bluehead" id="MeetingTitle">
XYZ Meeting.
</td>
</tr>
</table>
</div>
<div class="box" style="float:left">
//same as above
</div>
<div class="box" style="float:left">
//same as above
</div>
<div class="box" style="float:left">
//same as above
</div>
.............
.
.
The number of div's equals to loop iteration.
So please suggest me how to implement it.
Many thanks and Regards,
Digambar Kashid
If you could give the container box an Id (for this example id="container") you could use jQuery:
$("#container").append("<div ...");
Add one parent Container id i named parentContainer in this below example
var boxLength = $( ".box" ).length();
for(var i=0;i<=boxLength;i++){
$("#parentContainer") . append ('<div class="box" style="float:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="acqabold">Room No.</span><br />
<span class="numberbold" id="RoomNo">' + RoomNo + '</span></td>
<td align="right"><span class="smacqabold" id="Today">YYYY<br>
DD Month </span><br>
<span class="bluebold" id="StartTime">' + StartTime + '</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">'+EndTime+'</span></td>
</tr>
</table></td>
<tr>
<td align="center" class="bluehead" id="MeetingTitle">
'+ MeetingTitle +'</td>
</tr>
</table>
</div> ');
}