JSTL based nested iteration - iterator

Assume you have the following code:
<c:if test="${fn:length(myIterator) > 0}">
<span>blabla</span>
<c:forEach var="myVar" items="${myIterator}" varStatus="status">
// some stuff
</c:forEach>
<br />
</c:if>
Note that myIterator is an Iterator (surprise, surprise *g).
The problem is that I do not end up in the each loop and do not see "// some stuff" to happen. I think the reason is that fn:length(myIterator) has already iterated over the Iterator to determine its size so that we have already reached the end when arriving at the forEach loop.
I have not seen any elegant way to reset the iterator manually or so.
Of course I could try using scriptlet code (something like <% myIterator.reset() %>, but I would like to avoid that.
I have also tried something like:
<c:if test="${not empty myIterator}">
But that did not work either (did not even enter the if-clause's body).
Any elegant suggestions?
Thanks.

Why are you referring to an Iterator. That should be a Collection like an ArrayList or something.
an iterator can only be iterated once
[EDIT]
IMHO, the cleanest approach is to change the Java controller to give you a Collection. However, based on your feedback that you dont want to or can't...
Change the Java code
Use Java scriptlets in your JSP
You can solve this with some Javascript/DHTML. Consider this JSP code
<script type="text/javascript">
var loopHasContent = false;
</script>
<div id="loop-content" style="display:none">
<span>blabla</span>
<c:forEach var="myVar" items="${myIterator}" varStatus="status">
<script type="text/javascript">
loopHasContent = true;
</script>
// some stuff
</c:forEach>
<br />
</div>
<script type="text/javascript">
if(loopHasContent) {
document.getElementById("loop-content").style.display = "block";
}
</script>
You only reference the Iterable once so your issue goes away. The div is not displayed by default. As long as your forEach loop executes at least once then the javascript variable loopHasContent is set to true, otherwise it remains false. The final javascript trailing the div will only show your loop-content if it has to.

Related

Add class to parent of <img> with certain class name or certain source

My HTML looks like this, and I'm working with the YUI library:
<div>
<img class="smallimage" src="host/smallimage.jpg">
</div>
<div>
<img src="host/bigimage.jpg">
</div>
I would like to know how to (1) add a class to the container off all images with the class of .smallimage as well as (2) add a class to the container of all images with the string 'big' in the source tag. :)
So that the output is like this:
<div class = "small">
<img class="smallimage" src="host/smallimage.jpg">
</div>
<div class = "big">
<img src="host/bigimage.jpg">
</div>
Thanks very much fellas!
UPDATE:
Fellas I think I have figured this out now, but would still apprecate if someone could maybe just look if its solid:
1)
YUI().use('node', function(Y)
var node = Y.one(".smallimage")
Y.one(".smallimage").get('parentNode').addClass("small");
});
2)
YUI().use('node', function(Y)
var node = Y.one("img[src*='big']")
Y.one("img[src*='big']").get('parentNode').addClass("big");
});
Thanks!
Your solution is correct, but as the function says using Y.one will affect only one element. If you have multiple images you should use Y.all.
Also, keep in mind that you can do everything inside one YUI().use() call.

JavaScript .innerHTMLworking only when called manually

I've got a very simple function, of replacing the innerHTML of a element. I've been trying to debug this for hours but simply can't, and it's infuriating.
When called from a button press the JavaScript (as follows) works well, but when called from another function it doesn't work. I am totally lost as to why this might be, and its a fairly core part of my app
// This loaded function in my actual code is a document listener
// checking for when Cordova is loaded which then calls the loaded function
loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
Button press and HTML to replace
<div id="main">
<input type='button' onclick='changeText()' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
It is also here in full on JSFiddle
You are already changed the innerHTML by calling the function loaded(); on onLoad.
Put this in an empty file and same as .html and open with browser and try. I have commented the function loaded();. Now it will be changed in onclick.
<div id="main">
<input type='button' onclick='changeText();' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
<script>
//loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
The problem here is, that the element you're trying to manipulate is not yet existing when you are calling the changeText() function.
To ensure that the code is only executed after the page has finished loading (and all elements are in place) you can use the onload handler on the body element like this:
<body onload="loaded();">
Additionally you should know, that it's very bad practice to manipulate values by using the innerHTML property. The correct way is to use DOM Manipulations, maybe this can help you.
You script loads before the element (boldStuff) is loaded,
Test Link - 1 - Put the js in a seperate file
Test Link - 2 - put the js at the very end, before closing the <body>

How to add id using dojo.query to search element

I'm trying to add id to a element using dojo.query. I'm not sure if it's possible though. I trying to use the code below to add the id but it's not working.
dojo.query('div[style=""]').attr("id","main-body");
<div style="">
content
</div>
If this is not possible, is there another way to do it? Using javascript or jquery? Thanks.
Your way of adding an id to an element is correct.
The code runs fine for me in Firefox 17 and Chrome 23 but I have an issue in IE9. I suspect you may have the same issue.
In IE9 the query div[style=""] returns no results. The funny thing is,it works fine in compatibility mode!
t seems that in IE9 in normal mode if an HTML element has an inline empty style attribute, that attribute is not being preserved when the element is added to the DOM.
So a solution would be to use a different query to find the divs you want.
You could try to find the divs with an empty style attributes OR with no style attribute at all.
A query like this should work:
div[style=""], div:not([style])
Take a look at the following example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");//just for the innerHTML() function
dojo.addOnLoad(function () {
var nodeListByAttr = dojo.query('div[style=""], div:not([style])');
alert('Search by attribute nodeList length:' + nodeListByAttr.length);
nodeListByAttr.attr("id", "main-body");
var nodeListByID = dojo.query('#main-body');
alert('Search by id nodeList length:' + nodeListByID.length);
nodeListByID.innerHTML('Content set after finding the element by ID');
});
</script>
</head>
<body>
<div style="">
</div>
</body>
</html>
Hope this helps
#Nikanos' answer covers the query issue, I would like to add, that any query returns an array of elements, in case of Dojo it is dojo/NodeList.
The problem is you are about to assign the same id to multiple DOM nodes, especially with query containing div:not([style]). I recommend to use more specific query like first div child of body:
var nodes = dojo.query('body > div:first-child');
nodes.attr("id", "main-body");
To make it more robust, do not manipulate all the nodes, just the first node (even through there should be just one):
dojo.query('body > div:first-child')[0].id = "main-body";
This work also in IE9, see it in action: http://jsfiddle.net/phusick/JN4cz/
The same example written in Modern Dojo: http://jsfiddle.net/phusick/BReda/

Safari resends same form after redirect

I am currently experiencing a bug that only occurs in the current version of Safari (5.1.5) and was wondering if anyone here could come up with any workarounds for it. I tested it in 5.1.2 and it worked fine there, I'm not sure about 5.1.3 and 5.1.4 as I don't have access to those releases.
The bug requires three pages, I'll show the source of them and then explain what is going on:
FirstPageWithForm.htm
<form id="theForm" action="ActionHandler.ashx" method="post">
<input type="hidden" name="differentField" value="1234"/>
<input type="hidden" name="sameField" value="1111"/>
</form>
<script type="text/javascript">
var theForm = document.getElementById("theForm");
theForm.submit();
</script>
SecondPageWithForm.htm
<form id="theForm" action="ActionHandler.ashx" method="post">
<input type="hidden" name="differentField" value="5678"/>
<input type="hidden" name="sameField" value="1111"/>
</form>
<script type="text/javascript">
var theForm = document.getElementById("theForm");
theForm.submit();
</script>
ActionHandler.ashx
public void ProcessRequest(HttpContext context)
{
var referrer = context.Request.UrlReferrer;
var differentField = context.Request["differentField"];
context.Response.Write(differentField);
if (differentField == "1234")
{
if (referrer.ToString().Contains("Second"))
context.Response.Write("Failure");
else
{
context.Response.Redirect("SecondPageWithForm.htm");
}
}
else
context.Response.Write("Success");
}
As you notice both forms have the same field name but one of the fields has a different value. However, in Safari when this code is run, the value "1234" is sent as differentField instead of "5678". I do not believe this bug has anything to do with .NET but I don't have an easy way to test another language to be sure about that.
Things I already tried:
Putting the form submission code in a function and then calling that.
Requiring Jquery and calling it in the $(document).ready() function.
Putting the function call in a setTimeout().
Replacing the function with a button that I press.
Copying the Handler and sending the second form to the copy instead.
Every single one of these methods had the same effect, which is to print "Failure" instead of Success.
I will be filing this bug on the Safari forums (I don't have an Apple Developer account and it's not working to create a new one at the moment), but I was hoping that someone could help me come up with a suitable workaround for this problem until they fix it.
EDIT: The Safari forum bug report: https://discussions.apple.com/thread/3921507
NicolasIgot on my safari forum figured out a solution to my problem.
I just added autocomplete="off" to the form tag on the second form and everything started working again. I haven't tried it on my real problem, but it works on my simple test case, so I have confidence in it.

jQuery: Select elements with Incrementing ID names?

and thanks in advance for your help!
Here's my situation: I have a set of divs whose IDs have an incrementing number applied to the end of the name using PHP. Each of these divs are added dynamically with PHP (They are a series of FAQ questions with a hidden div container with the answers, that slide down when the question is clicked.) [Live Example][1]
There is no limit to the number of questions that appear on the page, because this is being used for a Wordpress theme and my client wants to add new questions as they go along.
Here's an example of the structure for each FAQ question using the PHP:
<?php var $faqnum = 0; $faqnum++; ?>
<div id="faqwrap<?php $faqnum; ?>">
<h4>What data is shared?</h4>
<div id="faqbox<?php $faqnum; ?>" class="slidebox">
<p>Data sharing is defined by the type of service:</p>
<ul class="list">
<li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li>
<li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li>
<li>Participation in a service requires the member to provide associated data<br />
</ul>
</div>
</div>
Now this is what I have currently in jQuery, and it works, but only if I add a new one every time my client wants to add a new question.
$(document).ready(function() {
$('.slidebox*').hide();
// toggles the slidebox on clicking the noted link
$("#faqwrap1 a:not(div.slidebox a)").click(function() {
$("#faqbox1.slidebox").slideToggle('normal');
$('div.slidebox:not(#faqbox1)').slideUp('normal');
return false;
});
});
I thought of maybe doing something with a declared variable, like this:
for (var x = 0; x < 100; x++;) {
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')...
}
I hope this is clear enough for you! Again, I thank you in advance. :)
The best way to handle this is to not use the IDs, but use classes for the outer element. So your PHP would be altered like this:
<?php var $faqnum = 0; $faqnum++; ?>
<div id="faqwrap<?php $faqnum; ?>" class="question">
<h4>What data is shared?</h4>
<div id="faqbox<?php $faqnum; ?>" class="slidebox">
<p>Data sharing is defined by the type of service:</p>
<ul class="list">
<li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li>
<li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li>
<li>Participation in a service requires the member to provide associated data<br />
</ul>
</div>
</div>
Your JQuery would be rewritten with the selector for the class "question".
$(document).ready(function() {
$('.slidebox*').hide();
// toggles the slidebox on clicking the noted link
$(".question a:not(div.slidebox a)").click(function() {
/* close everything first */
$('div.slidebox').slideUp('normal');
/* selects and opens the the slidebox inside the div */
$(".slidebox", this).slideToggle('normal');
return false;
});
});
This will get you the effect you are looking for. The key differences in the JQuery is the way you get the slidebox inside the question that got clicked. I'm using the scoped selection $(".slidebox", this) to get just the slidebox inside the clicked ".question" element.
The subtle visual difference is that the slideUp() happens before the slideToggle(). This will essentially close any open queries before it opens the desired one. If you keep your animations fast, this will be more than fine. The advantage of this approach is that you don't have to worry about the count of questions on a page, and the selectors are most likely more optimized than the for loop.
Edit
I adjusted the PHP code to use a class for "slidetoggle" instead of an id. It's technically an HTML error to have multiple IDs that are the same. It can throw off some assistive technologies for people with dissabilities. I'm assuming that section of code was repeated several times on the page.
Without changing your current markup, this would work:
// toggles the slidebox on clicking the noted link
$("div[id=^faqwrap]").each(function () {
var $faqwrap= $(this);
$faqwrap.find("h4 > a").click(function () {
var $currentSlidebox = $faqwrap.children(".slidebox");
$currentSlidebox.slideToggle('normal');
$('div.slidebox').not($currentSlidebox).slideUp('normal');
return false;
});
});
Maybe you can find a few suggestions in the above code that help you.
Like #Berin, I'd also recommend giving a separate CSS class to the outer DIV and using that as a selector, instead of $("div[id=^faqwrap]").