We Keep Coding

Get text/URL inside a DIV

I am trying to get the text and URL of a div when a user clicks in it. I am going to pass off the data to a PHP so that I can create a page that shows some other information.
<div class="superman">
<h3>Text</h3>
<h2>Info</h2>
<h4 class="partnum">PN123456</h4>
<h4 class="model">Product 456</h4>
<img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
<h3>Text</h3>
<h2>Info</h2>
<h4 class="partnum">PN234567</h4>
<h4 class="model">Product 123</h4>
<img src="http://company.com/123.jpg" id="thumb">
</div>
I need to grab the part number, model, and the image URL for each div (class=superman). I have been successful at getting the part number and model, but things fall apart when I try to grab the image URL within the same function. When I can get the image URL, I am not able to retrieve the part number and/or model.
As an example, I've used this to grab the URL (I append as sort of an alert).
$('img').click(function() {
$(this).parent().append($(this).attr('src'));
});
I've also tried the getElementById constructions, but those only grab the info in the very first div; if someone clicks on a div further down the page, it still only grabs the first one. I am working on about 5,000 divs, so I don't know if assigning an ID to each div makes sense. I also tried some sort of the (this) construction, but I am too much of a rookie to get things going.
I've seen some questions with answers that approach what I want to do, but, like I said, it's either the part number and/or model, or the URL, but never both. Thanks in advance for the help.

If you're having a hard time getting the partnum or model associated with an image, you can retrieve the sibling elements with jQuery's siblings() method.
Then, for example, you can concatenate the values and display them.
$('img').click(function() {
var img = $(this);
var partnum = img.siblings('.partnum').text();
var model = img.siblings('.partnum').text();
var url = img.attr('src');
var text = 'partnum: ' + partnum + '<br>' +
'model: ' + model + '<br>' +
'url: ' + url + '<br>';
img.closest('.superman').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="superman">
<h3>Text</h3>
<h2>Info</h2>
<h4 class="partnum">PN123456</h4>
<h4 class="model">Product 456</h4>
<img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
<h3>Text</h3>
<h2>Info</h2>
<h4 class="partnum">PN234567</h4>
<h4 class="model">Product 123</h4>
<img src="http://company.com/123.jpg" id="thumb">
</div>
To make the entire div clickable, just change the event handler's selector and use the div as the context of all of the selectors within its function:
$(function() {
$('.superman').click(function() {
var superman = $(this);
var partnum = $('.partnum', superman).text();
var model = $('.model', superman).text();
var url = $('img', superman).attr('src');
var text = 'partnum: ' + partnum + '<br>' +
'model: ' + model + '<br>' +
'url: ' + url + '<br>';
superman.append(text);
});
});

Links not working in IE and Firefox with jquery generated markup

I'm writing a javascript app that dynamically generates buttons that lead users to links about different products.
They look like this:
The problem is when they're generated the links contained within them work in chrome but not in IE or Firefox.
Here's the HTML:
HTML
<div class="row">
<div class="button-class">
</div>
</div>
This is the code I use to generate them:
JQUERY
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].link + " rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].review + " target='_blank'>Read The Review</a></button></li>");
}
},
buttons is part of an object called display and is called by display.buttons();
The two if statements check to see if certain types of links exist within a product's object and then appends them to the UL if the ydo.
The buttons generate correctly but they don't open up the links when clicked in Firefox and IE (maybe Safari but I haven't checked).
What's more confusing to me is that the html being generated looks semantically correct.
For example this is the html shown in the Firefox debugger that's not working:
Doesn't make sense to me.
If you want to go to a live version of the page you can see it here: superfood picker
Then go to the last section that reads "Click On A Product's Detail Page To Learn More" and looks like this:
Click on one of the products and it'll take you to the buttons that I'm talking about.

It's not semantically correct because you need to wrap in quotes the href
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href='" + state.greens[num].website + "' target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].link + "' rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].review + "' target='_blank'>Read The Review</a></button></li>");
}
},
Note that's it's best if you change double quotes instead single quotes and viceversa.

Displaying a Jquery image list

I'm having a problem with the JQuery imagelist. When opening the page for the first time, the list displays correct, the image is shown, title is shown...
Pressing the back button and re-opening the page gives a normal list, no longer the jquery listview?
I'm using a DIV element in my page like this:
<div id="dataDiv">
<ul data-role='listview' id='listing' data-theme='c'>
</ul>
</div>
This gets filled with information retrieved from an api call:
function listApiInfo() {
clearDataDiv();
var parsed = makeApiCallGet("http://someSite/SomeApi");
i = 0;
for (i; i < 15; i++) {
$("#listing").append("<li>"
+ "<img src='" + imageUrl + "' alt='img' class='ui-li-thumb' />"
+ "<h1>" + parsed[i].info + "</h1>"
+ '</a></li>'
);
}
}
on loading the div, i make sure it's an empty list item:
function clearDataDiv() {
$("#dataDiv").html(
"<ul id='listing' data-role='listview' data-theme='c'></ul>");
}
Edit: As suggested by Wibble in the comments, i did look at the cache as the problem.
Giving the div the following option solved the problem:
<div id="dataDiv" onblur='window.location.reload()'>
<ul data-role='listview' id='listing' data-theme='c'>
</ul>
</div>
I'm still not sure if this is the most elegant solution though, it gives a blank screen for a split second.

Javascript - Dynamically added tabs not seen as tabs in Kendo panelbar

Ok, first off I read in an encrypted file as my DataSource, which is then converted to an XML String.
The data displays properly in my grids, except that the panels which are dynamically added to the panelbar does not seem to act as such as seen in this fiddle.
They are added to:
<ul id='panelbar'>
<li id='patDet' class='k-state-active'>
<span class='k-link k-state-selected'><input type='checkbox' id='cPatientDetails' /><label for='cPatientDetails'><a href='#' id='cbSelect'></a>Patient Detail</label></span>
<div id='patTab'></div>
</li>
</ul>
like so:
$("<li id = '"+ liID +"' class='k-item k-state-default' role='menuitem' aria-expanded='false' aria-hidden='true'><span class='k-link k-header'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><a href='#' id='cbSelect''></a>" + liTitle + "</label></span></li>").appendTo("#panelbar");
$("<div id = 'gridGenerate" + x + "' width='400px;' aria-hidden='true'></div>").appendTo("#" + liID);
The reason for the span and link is so that styling can be used on my checkbox which can be found in this fiddle.
At first I used a hard coded DataSource, which worked perfectly, but when I switched over to fetching the data using a request, where all the data displays as it should, except for the panelbar.
This is what it looks like:
when only the first tab should be open. I created the panelbar like so:
$("#panelbar").kendoPanelBar(
{
expandMode: "single"
});
EDIT
I've made it now that the panelbar and grids are only created once the data is retreived and converted, but the issue remains.
Any idea why this is happening?

When KendoUI adds a tab, it does much more than just adding HTML tags. That's why you have methods for adding tabs on demand.
Instead of adding the HTML by hand try using:
var panelbar = $("#panelbar").data("kendoPanelBar");
panelbar.append([
{
text: "<label for='c" + x + "'>" +
"<a href='#' id='cbSelect''></a>" +
"" + liTitle + "" +
"</label>",
encoded: false,
content: "<div>text</div>"
}
]);
Click here to see it in JSFiddle.

Answer:
It seems like when I ask a question, it helps me to find the answer. Just found it.
I created the panelbar before adding the extra panels, so I just moved the:
$("#panelbar").kendoPanelBar(
{
expandMode: "single"
});
to the end of my method. The all the content is added, then I create the panelbar.

jQuery Mobile: How to navigate between dynamically generated pages

Using jQuery Mobile the code below does the following...
1) It generates menu items and adds them to the index page.
2) It creates actual pages for the menu items.
Now when I click on a menu item it does not seem to move to that page? I can see in the markup the pages exist with the correct id's.
This is what I have so far.
$.each(siteData["pages"], function(i,v) {
$.mobile.activePage.find('[data-role=content]').append('' +
'' + v["name"] + '').trigger('create');
// Prepare your page structure
var newPage = $("<div data-role='page' id=>" + v["id"] +
"<div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
markup
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3></h3>
</div>
<div data-role="content" class="navlist"></div>
</div>
How do I navigate between dynamically generated pages?
Could someone give me an example using my code. Thank you.

Unfortunately you have few errors.
Take a look at my working example, it is made out of your code: http://jsfiddle.net/Gajotres/3kPTf/
$(document).on('pagebeforeshow', '#index', function(){
$.mobile.activePage.find('[data-role=content]').append('Second').trigger('create');
var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
First error, close an a tag inside a button and give it a # tag.
Your dynamic page div is not closed properly