SitePoint Sponsor

User Tag List

Results 1 to 25 of 29

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Urgent: how to change image url retrieve by ajax to display as a image?

    hi
    i am using ajax to retrieve the img url path how am i going to use the img url path i retrieve and display as a image and i using javascript language
    anyone know?
    if can show me example of how to do that
    i try the follow way but don't work what wrong?
    Code:
        
     var descIg = "";
    descIg += rssent[i].descImg;
     var placeImg = document.createElement('img');
        placeImg.src = descIg;

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    placeImg is an image, but it's floating free at the moment. You haven't attached it to the DOM yet.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    placeImg is an image, but it's floating free at the moment. You haven't attached it to the DOM yet.
    then how to create a img with the img url retrieve by the ajax???

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    then how to create a img with the img url retrieve by the ajax???
    You have already created the image. All that you need to do now is to attach that image to the DOM.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You have already created the image. All that you need to do now is to attach that image to the DOM.
    u mean the img url is what u mean as has created the img? to the dom?can show me an example

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    u mean the img url is what u mean as has created the img?
    The createElement part is what creates the image element. The src part is where you associate an image with the image element.

    Quote Originally Posted by cutexxbaby View Post
    to the dom?can show me an example
    One example is where you gain a reference to the parent of where the image will be. A simple example of that is:

    Code javascript:
    var parent = document.getElementById('container');
    parent.appendChild(placeImg);

    How you will do it though, depends entirely on where in the DOM you want the image to be placed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Indenting the code is important to help you see how to access different parts of it.

    Code javascript:
    {
        "infos": {
            "info": [
                {
                    "startYear": "1900",
                    "endYear": "1930",
                    "timeZoneDesc": "daweerrewereopreproewropewredfkfdufssfsfsfsfrerewrBlahhhhh..",
                    "timeZoneID": "1",
                    "image": {
                        "images": [
                            {
                                "id": "1",
                                "thumb": "images/bird.jpg",
                                "large": "images/bird.jpg",
                                "title": "Bird",
                                "imgDesc": "i can fly"
                            }, {
                                "id": "2",
                                "thumb": "images/dog.jpg",
                                "large": "images/dog.jpg",
                                "title": "Dog",
                                "imgDesc": "i can bark"
                            }, {
                                "id": "3",
                                "thumb": "images/bird.jpg",
                                "large": "images/bird.jpg",
                                "title": "Bird",
                                "imgDesc": "i can fly"
                            }
                        ]
                    }
                }
            ]
        }
    }


    I fixed the missing comma in the second image, after the large image name too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Indenting the code is important to help you see how to access different parts of it.

    Code javascript:
    {
        "infos": {
            "info": [
                {
                    "startYear": "1900",
                    "endYear": "1930",
                    "timeZoneDesc": "daweerrewereopreproewropewredfkfdufssfsfsfsfrerewrBlahhhhh..",
                    "timeZoneID": "1",
                    "image": {
                        "images": [
                            {
                                "id": "1",
                                "thumb": "images/bird.jpg",
                                "large": "images/bird.jpg",
                                "title": "Bird",
                                "imgDesc": "i can fly"
                            }, {
                                "id": "2",
                                "thumb": "images/dog.jpg",
                                "large": "images/dog.jpg",
                                "title": "Dog",
                                "imgDesc": "i can bark"
                            }, {
                                "id": "3",
                                "thumb": "images/bird.jpg",
                                "large": "images/bird.jpg",
                                "title": "Bird",
                                "imgDesc": "i can fly"
                            }
                        ]
                    }
                }
            ]
        }
    }


    I fixed the missing comma in the second image, after the large image name too.
    the how to call the title?
    cause when i call the title i try this
    var detail = eval....
    then for loop it
    inside should be
    var title=""
    startyear += ...[i].image.images.title
    but it give me error of is null or not an object

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    the how to call the title?
    cause when i call the title i try this
    var detail = eval....
    then for loop it
    inside should be
    var title=""
    startyear += ...[i].image.images.title
    but it give me error of is null or not an object
    Do you in the indented code, how that images object contains an array?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Do you in the indented code, how that images object contains an array?
    what do you mean by indented code?
    what array?
    Code:
    mygetrequests.onreadystatechange = function() {
    
                if (mygetrequests.readyState == 4) {
                    if (mygetrequests.status == 200 || window.location.href.indexOf("href") == -1) {
                        var detail = dojo.fromJson("(" + mygetrequests.responseText + ")");
                        var rssent = detail.infos.info;
    for (var i = 0; i < rssent.length; i++) {
    var title = "";
    title += rssent[i].image.images.title
    document.getElementById("txtHint").innerHTML = title // the txtHint is div created

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    what do you mean by indented code?
    See post #11

    Quote Originally Posted by cutexxbaby View Post
    what array?
    See the square brackets, highlighted in blue

    Code:
    "images": [
        {
            ...
            ...
        }
    ]
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •