I am new to jquery. I spent a few days studying javascript, css, and jquery, and then started programming. What I want to do is load a div from another page into my page. This works.
So on my main page, I have a set of buttons, and when I click on a button, a corresponding div gets loaded from the appropriate secondary page. For instance, if I click on a button labeled "lady Gaga", I get a bio of lady Gaga loaded into a div in my page. (The bio originates in a div on another web page on my site). So I then decided to make the bio collapsible. In other words, you could click on the title (or maybe the first 2 sentences) and the whole bio would shrink to just a few lines. Then if the user clicked on it again, it would expand again. I could then have several collapsible panels on Ms. Gaga, maybe one would be her biography, another would be her song list, and another would be reviews of her performances. The user would see them all, and could expand any one of them. Then when the user gets tired of that, he can click another button and see multiple collapsible panels on Bruce Springsteen. (all these panels are in a div called #content on 'bruceSpringsteen.htm')
So I tried a collapsible panel plugin that I found online, and it does work if I just test it in an ordinary webpage.
But the trick is, putting all those collapsible panels in a div in a webpage called "ladygaga.htm" and then in my main page, letting the user click a button that will pull in that div and have the panels collapse or expand. There doesn't seem to be a major syntax error, because the main page does load divs from the various web pages that have Biographies of people. If there was a syntax error, no javascript would work at all. However, it looks like the code that sets up the collapse panel does not work, or if it sets up the panels, something else does not execute.
So here is the blended code (from a plugin that loads divs from multiple secondary pages into one spot in a main page (one secondary page whenever a button is clicked) along with the collapsible panel code. I've commented it.
$(document).ready(function() {
/*make all the anchors on the buttons have click events: */
$('#linktable a').click(function() {
var toLoad = $(this).attr('href') + ' #content'; /*this indicates to load from href (the secondary
page, and add a suffix of #content, which is the id of the div */
/* the following function was from the collapsible panel page. Instead of 'dollar' it had '$', and I think
it ran with document.ready - in other words when the page was loaded, it automatically ran. Here
I set a variable equal to the name of the function, and I replaced '$' by 'dollar', thinking that maybe
this is a passed variable. I call it later in the code. */
var IdentifyPanels = function(dollar) {
dollar.fn.extend({
collapsiblePanel: function() {
// Call the ConfigureCollapsiblePanel function for the selected element
return dollar(this).each(ConfigureCollapsiblePanel);
}
});
};
/*=========================*/
/*more load code: */
$('#content').hide('fast', loadContent); /*this calls all the other functionss*/
/*next 3 lines are just to make a 'loading' message */
$('#load').remove();
$('#wrapper2').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#content').load(toLoad, '', showNewContent())
}
function showNewContent() {
$('#content').show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
/*the above line successfully loads in divs. from the secondary pages. But then, I added 2 more lines: */
IdentifyPanels($); /* I pass '$' to 'dollar' */
$(".collapsibleContainer").collapsiblePanel();
/*These 2 calls are not working (making the collapsible panels), which means that I see the regular content, not shrunk at all.*/
}
function ConfigureCollapsiblePanel() {
$(this).addClass("ui-widget");
// Check if there are any child elements, if not then wrap the inner text within a new div.
if ($(this).children().length == 0) {
$(this).wrapInner("<div></div>");
}
// Wrap the contents of the container within a new div.
$(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");
// Create a new div as the first item within the container. Put the title of the panel in here.
$("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));
// Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
$(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
$(".collapsibleContainerTitle", this).trigger('click'); /* GID ADDED*/
}
function CollapsibleContainerTitleOnClick() {
// The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
$(".collapsibleContainerContent", $(this).parent()).slideToggle();
}
return false;
});
});
So thats the code, and the secondary page looks like this:
<body>
<div id="wrapper2">
<div id="content">
<div class="collapsibleContainer" title="Bio of Lady Gaga">
<img align="left" alt="GagaGooGoo" src="img/ladygaga.jpg" style="margin-right:10px; " />Stefani Joanne Angelina Germanotta (born March 28, 1986), better known by her stage name Lady Gaga, is an American pop singer-songwriter. She began performing in the rock music scene of New York City's Lower East Side in 2003 and enrolled at New York University's Tisch School of the Arts.
<p>She soon signed with Streamline Records, an imprint of Interscope Records. During her early time at Interscope, she worked as a songwriter for fellow label artists and captured the attention of Akon, who recognized her vocal abilities, and signed her to his own label, Kon Live Distribution.
</p><p>
Gaga came to prominence following the release of her debut studio album The Fame (2008), which was
....etc.
</p>
</div>
<div class="collapsibleContainer" title="Songs of Lady Gaga">
<p>
paparazzi
</p>
etc.</p>
</div>
</div>
</div>
===========
The calling page looks like this:
<div id="content">
<h2>Welcome!</h2>
<p>Page is Loading</p>
</div>
</div>
</td>
</tr>
</table>
==============Any help is appreciated, and I will refer your name to the pope for sainthood.
Thanks.