Get image name when clicked

[leonardo]

Hello Marina! Thanks. It's getting closer, but I'm still stuck. This is what I have done;
ol
liDefined 2 global variables on the Filtered Page -- namesData and clicked -- namesData to store the data and click to store the name./li
liIn the Rest Service success event of Filtered Page I added the code: code window.namesData = data.names.person;/code/li
liSet clicked=name or image clicked (Rodrigo, in this case)
/liliI tested with codealert(window.namesData);/code/li
/ol
What i got back was:
[object Object],[object Object],[object Object]

So the [object Object] represents the 3 persons in the data. You can tell I'm very green at this for now. How do I get the text for namesData and then for clicked (Rodrigo)?

[Maryna Brodina]

Hi, sorry for delay. Working on it...

[leonardo]

Great Marina. Thanks so much!

[Maryna Brodina]

1) On page Filtered - restservice2 - Success - Run JavaScript change
code namesData = data.names.person;/code to
code window.namesData = data.names.person;/code
delete line alert(namesData.val()); - it leads to error, because namesData doesn't have val method.

2) on page Filtered add filterGrid - Click - Run JavaScript:
codewindow.clicked = {};
var allItems = window.namesData, clickedName = $(this).text();
for(var i = 0, len = allItems&#46;length; i < len; i++) {
if (clickedName == allItems["fn"]) {
window&#46;clicked = allItems;
break;
}
}/code

also on filterGrid - Click add Navigate to page -- Detail

3) on page Detail delete call service and service restservice3 (all data stored in window.clicked)

4) on Detail page change panelDetail type to span

5) on Detail - Page show - Run JavaScript add next code:
codevar storyHtml = "&quot
storyHtml += "<h1>" + window&#46;clicked["story"]["H1"] + "<&#47;h1>&quot
for(var i = 0, len = window&#46;clicked["story"]["p"]&#46;length; i < len; i++) {
storyHtml += "<p>" + window&#46;clicked["story"]["p"] + "<&#47;p>&quot
}
Tiggzi('panelDetail')&#46;html(storyHtml);/code

After it will be done on click on entire div (name or image) Detail should be opened with the corresponding information

[leonardo]

Marina, great job! Thanks a million. Beautiful, beautiful! I'll make the adjustments.

[leonardo]

Hi Marina:
It worked beautifully. Thanks again. I had to make a minor adjustment. It didn't show anything at first, until I changed in 2. code
var allItems = window&#46;namesData, clickedName = $(this)&#46;text();/code to codevar allItems = window&#46;namesData;/code
After that...it was a thing of beauty!

I would appreciate your help on some minor necessary adjustments:

1. If you type "g" into the search, it brings up 2 names but the noItemsLabel that shows that there is no match pops up incorrectly, but it works fine in some other cases.

2. The html from the panelDetail leaves too much gap to the top. The text starts too low on the page.

3. I need to put a picture of each person, dimension 100 x 100, to the left of each first paragraph after H1. The text of the paragraph needs to wrap to the right and below the picture. I wonder how I can achieve these.

   Thanks again, Marina. You are a champ!

[Maryna Brodina]

Hello! Glad it's working!

1) Could you clarify what do you mean on "pops up incorrectly" and what are the other cases?

2) try to change padding/margin

3) you should use CSS code, and it should be coded by you.

[leonardo]

1. The noItemsLabel is supposed to show up if there is no match for the search. It works like this in most cases, especially if there is no match at all. But in other cases where there are 2 or 1 results from the search, the noItemsLabel shows up, when it shouldn't.

   1. Just tried that without any change.

   2. I already have a "custom css" created for the navbar. Should this go there as well or do I need to create a separate css for panelDetail?

      Thanks a bunch.

[Maryna Brodina]

1

a) On page Filtered delete events:
filteredThumb - Click - Run JavaScript and
filteredName - Click - Run JavaScript

b) On page startScreen delete events:
nameThumb - Click - Run JavaScript and
fName - Click - Run JavaScript

c) On page Filtered (filterGrid - Click - Run JavaScript) replace
codevar allItems = window&#46;namesData; /code with
codevar allItems = window&#46;namesData, clickedName = $("[dsid=filteredName]",this)&#46;text(); /code

d) On page startScreen (startScreen на nameGrid - Click - Run JavaScript) replace codevar allItems = window&#46;namesData; /code with
codevar allItems = window&#46;namesData, clickedName = $("[dsid=fName]",this)&#46;text(); /code

e) On page Filtered before Filtered-Load-Invoke service add next JS
codewindow&#46;foundItems = 0;/code

f) On page Filtered in mapping to filteredName.text add next JS:
codeif(value&#46;indexOf(localStorage&#46;getItem("sid")) === -1) {
element&#46;closest("table")&#46;hide();
}else {
window&#46;foundItems ++;
}
return value;/code

delete any other JS

g) On page Filtered (restservice2-Success-Run JavaScript) replace
codeif(foundItems == 0) {/code with
codeif(window&#46;foundItems == 0) {/code

2 Tag H1 has big margin by default, you can delete it in CSS, the gap will be reduced.

3 to add img after first paragraph on Detail screen ( Detail-Page show-Run JavaScript) change JS:

codevar storyHtml = "&quot
storyHtml += "<h1>" + window&#46;clicked["story"]["H1"] + "<&#47;h1>&quot
for(var i = 0, len = window&#46;clicked["story"]["p"]&#46;length; i < len; i++) {
storyHtml += "<p>" + window&#46;clicked["story"]["p"] + "<&#47;p>&quot
if (i === 0) {
storyHtml += "<img src='" + Tiggzi&#46;getImagePath(window&#46;clicked["th"]) + "' style='width:100px;height:100px;float:left;margin:5px;'>&quot
}
}
Tiggzi('panelDetail')&#46;html(storyHtml);/code

[leonardo]

Wow, Marina! Thanks!! Anytime you're in town, lunch is on me!☺