Dynamically obtaining a DIV's ID - (When the ID itself is set dynamically).

The Problem:

Given a list of elements, find the ID of the element that was clicked upon. The challenge was that the ID itself was generated dynamically.


The Solution:

As the ID is generated dynamically and must be unique, I noticed that it has a constant class attribute like "post" in  the below example. Then, one line of jQuery did the trick.

For example, the given statement was like this:

..
<div id="post_237" class="post">
..
</div>
<div id="post_238" class="post">
..
</div>

Note that the ID changes every time and I had to find the content of that DIV. But the CLASS "post" is constant. Thus, to find the ID, the corresponding jQuery statement is as follows:

var getID = $('.post').attr('id');

There you go, the variable getID now contains the ID of that dynamic element.

Loading jQuery Mobile in a dynamic environment

I was writing an RSS feed application on PhoneGap powered by jQuery Mobile. I used the default accordion provided by jQM and it worked out well.

However, I encountered a problem that the style wasn't getting applied when the number of accordion isn't known during page load time. The styles weren't applied to the dynamic elements. Here are some of the highlights of the problem I was facing:

• It is a simple RSS feed reader application.
• The number of elements (RSS news items) are not known beforehand.
• The feed is read and parsed into the page only after the page gets loaded.
• The feed items have got no styles at all, as the jQM has already loaded and set the styles for all the static elements and the dynamic elements do not get their styles set by jQM.

Thus, the solution was that I had to somehow 'refresh' jQM alone so that the styles got applied after all the dynamic content is loaded. You need to refresh the DIV that has the dynamic content once it is loaded. 

Assuming your dynamic content is appended to this node:

<div id="loaded-content" data-role="collapsible-set"></div> 

you have to do:

$('.loaded-content').collapsibleset('refresh');

Thus, you now have the dynamic content's styles and behavior using jQuery Mobile. Is there a better way to do this? Do let me know!

Accordion Expand/Collapse all in jQuery Mobile

The default behavior of the Accordion in jQuery Mobile allows you to expand or collapse only one Accordion tab at a time. I came up with a code to expand/collapse all tabs at once.

HTML:

Hello 1
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 2
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 3
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Open All Collapsible
Close All Collapsible

And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files.

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});

If you have a better way of doing this, let me know! :)

Show/hide left panel using Javascript

To show or hide a left panel, you need to keep an element (the left panel) with its CSS to be display:none so that we can make it appear to slide in from the left.

Let's assume that the ID of the left panel is #left-panel. You need the following code to make it slide from the left.

function showHideLeftPanel()
{
 $('#left-panel').toggle("slide", 
         { direction: "left"  }, 500);
}

You can customize the duration and direction of the toggle and I hope it is self explanatory from the above code. The function can be called on click, on load, etc. and it automatically toggles the state of the element.

You can read more on this here.