Generate unique ID

Discussion in 'Javascript' started by jaapkramer@gmail.com, Jul 22, 2005.

  1. Guest

    I have a page with 641 images in it. Each image can be clicked with as
    result that the image source will be changed. For this the images need
    to have a unique ID. But to do this manually for 641 is just too much.
    Is there a way to give each image his own unique id without setting
    them myself?

    The image:

    <img src="images/hokje.gif" id=""
    onClick="javascript:veranderKeuze(this.id);" alt="">
     
    , Jul 22, 2005
    #1
    1. Advertising

  2. wrote:


    > Is there a way to give each image his own unique id without setting
    > them myself?
    >
    > <img src="images/hokje.gif" id=""
    > onClick="javascript:veranderKeuze(this.id);" alt="">


    I don't think you need an id at all, simply pass the image object itself
    to the function e.g.
    <img onclick="veranderKeuze(this);"
    and then
    function veranderKeuze (img) {
    img.src = 'whatever.gif';
    }
    Or what exactly do you need the id for in your function? You haven't
    shown that.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jul 22, 2005
    #2
    1. Advertising

  3. Robert Guest

    wrote:
    > I have a page with 641 images in it. Each image can be clicked with as
    > result that the image source will be changed. For this the images need
    > to have a unique ID. But to do this manually for 641 is just too much.
    > Is there a way to give each image his own unique id without setting
    > them myself?
    >
    > The image:
    >
    > <img src="images/hokje.gif" id=""
    > onClick="javascript:veranderKeuze(this.id);" alt="">
    >


    It is possible to get all images in a document using
    getElementsByTagName and then iterating over them and seting a unique
    id. However looking at your example I don't see why you need the id. How
    about using the event in the 'veranderKeuze' function and getting the
    target or srcElement to do something with the image?

    PS
    It is better to use onclick instead of onClick.
    And remove the javascript: in the event.
     
    Robert, Jul 22, 2005
    #3
  4. JAPIO Guest

    Let me explain:

    Each image will represent an field in a database.
    When one image is clicked the image source will be changed and a update
    request will be send to the database (probably a iframe location
    refresh somewhere).
    So i need the id to update the field which it belongs too.
     
    JAPIO, Jul 22, 2005
    #4
  5. JAPIO wrote:


    > Each image will represent an field in a database.
    > When one image is clicked the image source will be changed and a update
    > request will be send to the database (probably a iframe location
    > refresh somewhere).
    > So i need the id to update the field which it belongs too.


    But if you have server side code and that stuff comes from a data base
    then you should easily be able to generate the ids on the server, there
    is certainly no need to to it "manually" as your first post said.
    Of course you can loop through all images on the client and generate ids
    there ( e.g.
    var images = document.images, length = images.length;
    for (var i = 0; i < length; i++) {
    images.id = 'image' + i;
    }
    ) but I don't see how that helps then to get the ids necessary to relate
    to your data base fields, that is information you have available on the
    server and consequently you should simply generate the needed ids there.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jul 22, 2005
    #5
  6. Baconbutty Guest

    Baconbutty, Jul 22, 2005
    #6
  7. RobG Guest

    JAPIO wrote:
    > Let me explain:
    >
    > Each image will represent an field in a database.
    > When one image is clicked the image source will be changed and a update
    > request will be send to the database (probably a iframe location
    > refresh somewhere).
    > So i need the id to update the field which it belongs too.
    >


    Presumably your page is generated at the server, so why not generate
    the id there? Any ID generated at the client will likely be
    meaningless to the server, it will just the position in the images
    array - and if JavaScript is not available, no IDs will be assigned.

    You could add the database key as a query string on the end of the
    image's href (again, server generated). But be aware users have a
    habbit of spoofing this kind of stuff.

    An ID must start with a letter, but can include numbers, hypens &
    underscores (and other characters too) so you could just generate an
    ID like 'id-x' or 'id_x' or 'id:x' where 'x' is just a sequential number.



    --
    Rob
     
    RobG, Jul 22, 2005
    #7
  8. J.J.SOLARI Guest

    JAPIO <> wrote:

    > Let me explain:
    >
    > Each image will represent an field in a database.
    > When one image is clicked the image source will be changed and a update
    > request will be send to the database (probably a iframe location
    > refresh somewhere).
    > So i need the id to update the field which it belongs too.


    JAPIO,

    Let's have the HTML like:

    <img src="some_image.png"
    <!-- class="clickable" if needed (see below) -->
    width="W" height="H" alt="">

    Then this JS (supposing that there is only one image to substitute for
    all 641 images - that is a set of 641+1 images - otherwise, IMO, a set
    of 2*641 images for one page is NOT reasonable):

    <script type="text/javascript">

    // stop event propagation
    function stopBubble( e )
    {
    // DOM W3C
    if( e.stopPropagation )
    {
    e.stopPropagation();
    }
    // DOM Microsoft
    else if( window.event )
    {
    window.event.cancelBubble = true;
    }
    }

    // perform some action on image src
    function changeSrcClick( e )
    {
    // get event according to W3C or Microsoft DOM
    e = ( e ) ? e : ( (window.event) ? window.event : null);

    // if no event return
    if ( !e ) return;

    // stopBubble( e );

    var node = ( e.target ) ? e.target : e.srcElement;

    // bubbling bug workaround
    if ( node.nodeType == 3 ) node = node.parentNode;

    // image substitution like this
    node.src = substitutedImage.src;

    // some necessary action
    ...

    }

    function init()
    {
    // array of *all* images in document
    IMGS = document.getElementsByTagName( "img" );

    /* ================ NOTE ====================

    If you need to exclude some image(s) from this set of clickable images,
    you can do whether, depending of your document structure:

    - put clickable images in a div with id="clickable"
    IMGS = document.getElementById("clickable").getElementsByTagName("img");

    - give them a particular class like class="clickable"; in this case, in
    next code, instead of direct method setting, just have a condition like:

    if( IMGS.className == "clickable" )
    { IMGS.onclick = changeSrcClick; }

    =========================================== */

    for ( i=0; i < IMGS.length; i++ )
    {
    IMGS.onclick = changeSrcClick;
    }
    }
    var IMGS = new Array();
    var substitutedImage = new Image( W, H );
    substitutedImage.src = "image_to_substitute.png";

    window.onload = init;

    </script>

    hih,

    JJS.
    --
    Anti-spam : <http://public.xdi.org/=jj.solari>
     
    J.J.SOLARI, Jul 22, 2005
    #8
  9. Randy Webb Guest

    Robert said the following on 7/22/2005 8:38 AM:
    > wrote:
    >
    >> I have a page with 641 images in it. Each image can be clicked with as
    >> result that the image source will be changed. For this the images need
    >> to have a unique ID. But to do this manually for 641 is just too much.
    >> Is there a way to give each image his own unique id without setting
    >> them myself?
    >>
    >> The image:
    >>
    >> <img src="images/hokje.gif" id=""
    >> onClick="javascript:veranderKeuze(this.id);" alt="">
    >>

    >
    > It is possible to get all images in a document using
    > getElementsByTagName and then iterating over them and seting a unique
    > id.


    It is even easier, and thus probably more efficient, to use the
    document.images collection.

    > PS
    > It is better to use onclick instead of onClick.


    Why? There is no difference.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Jul 22, 2005
    #9
  10. JAPIO Guest

    At the moment i use the script given by J.J.SOLARI.
    document.getElementsByTagName gives an error, so i used document.images
    instead. This is working fine.

    Thank you all for now!
     
    JAPIO, Jul 25, 2005
    #10
  11. Randy Webb Guest

    JAPIO said the following on 7/25/2005 3:28 AM:

    > At the moment i use the script given by J.J.SOLARI.


    The advice given by Martin Honnen will take you way further in the end.

    > document.getElementsByTagName gives an error, so i used document.images
    > instead.


    document.images collection is a lot more efficient than
    getElementsByTagName, if for no other reason than the overhead involved
    in invoking one method to produce an array that already exists in the
    other collection.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Jul 26, 2005
    #11
  12. JAPIO Guest

    I've got it working now. I now have a page with over 600 images wich
    are all clickable. When an image is clicked it will be stored in a db
    according to its own id. And if clicked again, it will be removed.

    Now i can regenerate the page from the db so that all the clicked
    images wil be visible again.

    Thanks again.
     
    JAPIO, Jul 26, 2005
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ronald
    Replies:
    6
    Views:
    7,077
    Andy Mortimer [MS]
    Feb 23, 2004
  2. Max
    Replies:
    5
    Views:
    32,820
    Sudsy
    Feb 28, 2004
  3. Mullin
    Replies:
    3
    Views:
    5,544
  4. ToshiBoy
    Replies:
    6
    Views:
    885
    ToshiBoy
    Aug 12, 2008
  5. Token Type
    Replies:
    9
    Views:
    391
    Chris Angelico
    Sep 9, 2012
Loading...

Share This Page