jquery and data-attr not working in ie8

Question

This concerns a table where I show 5 rows at a time. The follow code is working 100 percent perfect in firefox. But in ie8, only the top row can be clicked for the editdiv to show. Whereas, in firefox I can click on any of the five rows and the editdiv loads as expected.

Line in php file that calls the function:

echo "<td><a id=\"editjq\" href=\"#\" vid='".$vid."' t1='".$db->hscadd($t1)."' page='".$page."' flag='1')\">  [edit ]  </a></td>";

The function:

$(document).ready(function() {
  $('a#editjq').click(function() {
    var petid = $(this).attr('vid');
    var t1 = $(this).attr('t1');
    var page = $(this).attr('page');
    var flag = $(this).attr('flag');
    $("#petdiv").hide(); 
    $.post("edit_lookup.php", {
      petid : petid,
      t1 : t1,
      page : page
    }, function(data){
     if (data.length>0){ 
       $("#editdiv").html(data); 
     } 
    });
    $(this).unbind(); 
    return false;
  }); 
});

Your PHP code is irrelevant; what is the HTML that it produces and sends to the browser? — Phrogz
– Phrogz, Commented Jan 2, 2011 at 4:00

Phrogz · Accepted Answer · 2011-01-02 04:03:40Z

7

Are you producing five rows which each have an anchor with the same id attribute? If so, that's your problem. It is syntactically illegal to have more than one element with the same id. Instead of id="editjq" use class="editjq" and $('a.editjq').click(...).

answered Jan 2, 2011 at 4:03

Phrogz

304k115 gold badges669 silver badges758 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phrogz Over a year ago

@user560131 As you appear to be new to stackoverflow, let me help you a little further: when you ask a question and get an answer that satisfies your needs, you should "accept" the answer (big checkmark) so that others with a similar problem know that the answer is helpful.

GuruKay · Accepted Answer · 2011-07-11 13:27:00Z

You could put this piece of jquery plugin code in your page script (just make sure that it comes after the jquery.min.js script tag);

    (function($){            
    var store = {};
    $.fn.extend({  
        collection : function(action, name, value) {
            var $this = this;

            var generate = function(){
                return "COLLECTION" + parseInt((Math.random() * 100000), 16);
            }

            var item_id;
            var methods = {
                put: function(){
                    item_id = $this.attr("id");
                    if(store[item_id]){
                        store[item_id][name] = value;
                    } else {                
                        while(store[item_id] && $(item_id).length > 0){
                            item_id = generate();
                        }                
                        $this.attr("id", item_id);                
                        store[item_id] = {};
                        store[item_id][name] = value;
                    }
                    return $this;
                },

                get: function(){
                    item_id = $this.attr("id");  
                    if(store[item_id] && store[item_id][name]){
                        return store[item_id][name];
                    }
                    else{
                        return null;
                    }
                },

                remove: function(){
                    item_id = $this.attr("id");
                    if(store[item_id]){
                        store[item_id][name] = null;
                    }
                    return $this;
                }
            }

            if(methods[action]){
                return methods[action]();
            } else{
                return alert(store.text.length);
            }
            return $this;
        }
    });     
})(jQuery);

It can be used as follows:

store a data value

$(*selector*).collection("put", *DataName*, *DataValue*);

retreive a data value

var referencing_variable = $(*selector*).collection("get", *DataName*);

delete a data value

$(*selector*).collection("remove", *DataName*);

This is a cross browser solution. Though i have only tested it with Jquery 1.5.1

Collectives™ on Stack Overflow

jquery and data-attr not working in ie8

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related