Search code examples
phphtmldrupal-6query-string

What does data attribute stand for in anchor(<a>) tag in PHP?

I'm using Drupal CMS. I'm a newbie in Drupal and PHP. In one of my *.tpl.php file I've a PHP code snippet as follows:

<div class="form-section">
                    <h3>Job Alerts: jobs delivered to your inbox! <strong>(optional) </strong> <span class="info-ico"><em><?php echo bfstring('tooltip_register_job_alerts'); ?></em></span></h3>                    
                    <?php $alerts = bevforce_get_user_option($user->uid, 'alert', false); ?>
                    <ul class="jobs-alerts-list">
                        <?php foreach ($alerts as $a) : ?>
                            <li><?php echo $a['value']['alert_name']; ?> <a href="#" class="edit-link tip-open"  data-oid="<?php echo $a['oid']; ?>">edit</a></li>
                        <?php endforeach; ?>
                    </ul>
                    <p><!--<a class="popup-loader" href="<?php echo url(); ?>?bf-ajax=create-job-alert&page=register"><strong>Create Job Alert</strong></a>-->
                    <a class="popup-loader" href="/?bf-ajax=create-job-alert&amp;page=register">Create New Job Alert</a>
                    </p>
                </div>

I'm not getting what's the purpose of data-oid="<?php echo $a['oid']; ?>" in anchor tag(<a>). I've never seen such attribute anywhere in <a> tag. Following is another code snippet from my PHP code :

<li><a class="popup-loader" href="/?bf-ajax=delete-job-alert&amp;eid=&amp;oid=0">Remove</a></li>

If I hover the mouse cursor over the hypertext Remove, I'm getting the following URL:

 xyz.com/bf-ajax=delete-job-alert&oid=3805462

How could this happen that I'm passing the value oid=0 in query string but it is showing some different value when I hover the hypertext? Is this happening due to the data-oid attribute we used in <a> tag above? So in short my doubt is what's the purpose of attribute data-oid in <a> tag and how the value is getting changed from the value I set in the code? Can anyone clear my above doubts? Thanks in advance.

Solution

  • The data-* attribute is primarily for JavaScript in HTML 5. See: http://html5doctor.com/html5-custom-data-attributes/

    Using the jQuery library, it's really easy to reference a data attribute: $("#someLink").data("name") for something like <a href="#" id="someLink" data-name="my cool link">Click Me</a> -- the .data("name") is simply for data-name.