0

I have the following:

editCity: "/Admin/Citys/Edit?pk=0001I&rk=5505005Z"

$('#editCity')
    .attr('title', "Edit City " + rk)
    .data('disabled', 'no')
    .data('href', editCity)
    .removeClass('disabled');

When I check the HTML with developer tools I see this:

<div class="button dialogLink" id="editCity" 
data-action="EditCity" data-disabled="yes" 
data-entity="City" title="Edit City 5505005Z" ></div>

Everything is updated except the href. Anyone have an ideas what I am doing wrong?

  • It'd be better to set the "title" property with `.prop()` instead of `.attr()` if you're using at least version 1.6 of jQuery. – Pointy Oct 09 '12 at 13:26

3 Answers3

1

Use

var editCity = "/Admin/Citys/Edit?pk=0001I&rk=5505005Z";

What you did was a labeled statement, consisting only of a string literal and missing a semicolon.

Btw, jQuery's .data() method is not to be used for data-attributes, but just for associating JS objects with DOM elements.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Sorry maybe I was not clear. I do use var but the output I showed was from the debug when I hover over editCity. –  Oct 09 '12 at 13:26
  • 2
    @Anne when you use `.data()` to store properties with a DOM element, you won't see those in the debugger. They're stored in a map object internal to jQuery. – Pointy Oct 09 '12 at 13:27
  • @Bergi - Now I am really confused. I thought .data("xxx","thedata") was the same as .attr("data-xxx","thedata"); –  Oct 09 '12 at 13:27
  • @Bergi - As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object (from the documentation) – billyonecan Oct 09 '12 at 13:29
  • @Anne: No, it is not. There is no serialisation, it stores any js objects as "properties of the DOM element" (but in a memory-leak-save way). It uses the data-attributes only as a fallback if nothing associated is found. – Bergi Oct 09 '12 at 13:30
  • [related question](http://stackoverflow.com/q/12803196/1048572) about how `.data` works – Bergi Oct 09 '12 at 18:13
1

I think jQuery stores the data internally if they don't exist the first time you set them. If you really want to force it:

$("#editCity").attr("data-href",editCity)
Marcus Johansson
  • 2,626
  • 2
  • 24
  • 44
  • yes jQuery stores data on the Dom element and thats not reflected in the live html. the fact that jQuery do fall back to the data attributes in some cases do worry me – VeXii Oct 09 '12 at 13:27
  • @VeXii jQuery only *reads* values from `data-foo` attributes. It does not update those attribute values. – Pointy Oct 09 '12 at 13:31
  • that is "some cases" in my book, seen alot of confusion about that – VeXii Oct 09 '12 at 13:32
  • @VeXii the library does not store values on DOM elements ever, unless code explicitly asks it to with `.attr()` or `.prop()`. Fetching from `data-foo` attributes is not risky. – Pointy Oct 09 '12 at 13:37
  • and just how much "better" is it getting data attribues whith .data() then .prop() or .attr()? and is it worth the confusion? – VeXii Oct 09 '12 at 13:40
-1

You cannot set a href attribute to a div. you could use data-href instead, or use a a-tag instead of a div.

besluitloos
  • 269
  • 1
  • 7
  • 1
    He's not setting an "href" attribute. He's setting a "data" property, and those are not implemented as attributes. – Pointy Oct 09 '12 at 13:25
  • Well does my use of .data not try to set it as data-href ? –  Oct 09 '12 at 13:25
  • 1
    @Anne no absolutely not - the `.data()` mechanism will *read* initial values from `data-xyz` attributes, but it will *never* update those attributes. The `.data()` mechanism is completely internal to jQuery. – Pointy Oct 09 '12 at 13:30