ansaurus

Question

Answer 1

A:

This part is odd:

$('#next2_btn'.value)

The problem is likely in there...

Koen 2010-06-09 15:23:47

Perhaps @Kelly comes from php where `.` puts two strings together, in which case replace it with a `+` and you may have cracked the case!

gnarf 2010-06-09 15:27:57

Answer 2

A:

I'm not sure I understand the complete mechanics of what you want to accomplish, but this is invalid:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

This would ask jQuery to first find the #next2_btn element (i.e., $('#next2_btn')) and would then try to call the .$() function on the result. That function does not exist.

Further, the expression '#next2_btn'.value tries to access the .value property of the string '#next2_btn' which also does not exist.

So we've got two errors floating around just in that middle bit, each of which would be enough to derail the entire statement.

Perhaps you meant:

$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">');

This simply finds the #next2_btn and sets the HTML inside to be that <area> tag. This is valid only if #next2_btn is an element other than an input. If it's an input, you can't change its HTML; you can only change its value with the .val('...') method. (Or replace it entirely with the .replaceWith() method.)

VoteyDisciple 2010-06-09 15:25:11

Likely the second example would be correct if you used `replaceWith()` instead of `html()`. @Kelly did mention trying that function also... You should further stress the invalidness of `$('#next2_btn').$(...)` - It is likely to cause a `$('#next2_btn').$` is not a function error...

gnarf 2010-06-09 15:30:02

Answer 3

+1 A:

I am guessing this is the line (which is invalid) that is supposed to change the id:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

Here is a working sample of changing an id attribute of an area inside of a map - tested and confirmed working in Firefox, Chrome and IE8 (you will need to copy a 1.jpg image to the location of the .html file containing this code in order to see it work):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html>
<head>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#next2_btn').click(function() {
                // find current element
                var element = $(this);

                // get id
                var id = element.attr('id');

                // find the number portion of the id using regular expressions
                var findNumberRegex = /next(\d+)_btn/;
                var idNumber = parseInt(id.replace(findNumberRegex, "$1"));

                // increment the number
                idNumber++;

                // re-assign the area id
                element.attr('id', 'next' + idNumber + '_btn');
            });

            $('#showAreaId').click(function() {
                alert('current id of area is ' + $('map[name="Map"]').find('area').attr('id'));
            });
        });
    </script>
</head>

<body>
    <img src="1.jpg" usemap="#Map" width="300" height="300" />
    <map name="Map">
        <area shape="rect" coords="0,0,300,300" id="next2_btn" alt="next2_btn" href="#" />
    </map>
    <button id="showAreaId">Show current ID of area</button>
</body>
</html>

On a side note, the line below may not be doing exactly what you want - once this runs, #statusGraphic will no longer exist.

$('#statusGraphic').replaceWith('<img src="state2_138x28.gif">');

I'm not sure what type of element #statusGraphic is, but if it is already an image, you could do:

$('#statusGraphic').attr('src', 'state2_138x28.gif');

If it is not already an image, perhaps append an image instead:

$('#statusGraphic').append('<img src="state2_138x28.gif" />');

Which can be later removed:

$('#statusGraphic').empty();

Nate Pinchot 2010-06-09 15:26:46

Answer 4

A:

Sorry, I had posted some 'testing' code... that line isn't there.

I want to change the id of a link so that I can use that link again, only load something else. So my html is:

<map name="Map">
<area shape="rect" coords="826,935,906,971" id="next2_btn" href="#">
</map>

and after they click this, the previous code runs to fade an existing div, show a hidden one, and initiate a certain animation on three graphics. So, after that, I want the id to change so that I can write new animations and replace graphics with the same link. This is all to avoid refreshes.

So, I'm just trying to see if it's possible to change the initial ID on a link. I first tried by selecting the div and rewriting the entire html you see above. Then, I tried selecting the ID and using the attribute as suggested above, but nothing has worked yet.

Thanks

kelly johnson 2010-06-09 19:50:09

I made you a working sample (in my answer above) of changing the ID of an area tag - check it out. Changing the ID using .attr() definitely works, not sure what is hanging up for you. Hopefully the example will help out.

Nate Pinchot 2010-06-09 20:49:52

Thanks Nate, it did help me out!

kelly johnson 2010-06-10 03:20:52

Answer 5

A:

The id does change, it is just that the code has already been assigned to the element regardless of its future id value..

you should use the live method to bind the click event ..

$('#next2_btn').live('click', function(){
           ../*code for the button with id next2_btn which will change the id of the clicked element to anotherID*/...
           // at some point run the following command
           $(this).attr('id','anotherID');
 });
$('#anotherID').live('click', function(){../*code that will run from elements that have #anotherID no matter when they get this id*/...});

check a live example here : http://www.jsfiddle.net/6mFht/

Gaby 2010-06-09 20:19:15

ansaurus

tags:

views:

answers:

dynamically changing the selector text

related questions