SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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,526
    Mentioned
    83 Post(s)
    Tagged
    3 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
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The createElement part is what creates the image element. The src part is where you associate an image with the image element.



    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.
    i want to put the img in the dojo content pane
    which is like
    var c1 = new dijit.layout.ContentPane({
    content: "placeImg"
    })
    if this way how am i going to use it?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    i want to put the img in the dojo content pane
    which is like

    if this way how am i going to use it?
    With "placeImg" it will only be that text string that is added as content. You should use placeImg without the quotes to use the image that you created.

    You may have to ask at other placed for dojo-specific info though. There are some dojo forums that can be of more help with dojo-related issues.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    With "placeImg" it will only be that text string that is added as content. You should use placeImg without the quotes to use the image that you created.

    You may have to ask at other placed for dojo-specific info though. There are some dojo forums that can be of more help with dojo-related issues.
    okay can i ask you regarding ajax
    how am i going to call the title
    because normally if you call start year is like
    var detail = eval....
    then for loop it
    inside should be
    var start year=""
    startyear += ...[i].startyear
    something like this but how am i going to call the title inside the images?
    Code:
    {
    "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"
    }
    }
    ]
    }
    }

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 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

  11. #11
    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

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 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

  13. #13
    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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 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

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    See post #11



    See the square brackets, highlighted in blue

    Code:
    "images": [
        {
            ...
            ...
        }
    ]
    okay , then ? i want to go from the to the title? so how shld i write i know you say indented code is impt...this is hw it look lk the json? cause i gt the var detail = eval(...reponseText)...then i want to get to the title, so i write this detail.infos.info.image.images.title ....is this the indenting ?but i got a error which is null or not a object
    what you mean by how that obj contain a array
    can just tell me why i got this error ? and how should i solve it?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    but i got a error which is null or not a object
    what you mean by how that obj contain a array
    can just tell me why i got this error ? and how should i solve it?
    You are getting the error because images contains an array, but you are trying to instead access a property of images called title.
    Because it is an array, no property called title exists.

    What you need to do instead is to access one of the three array indexes, each of which contains (among other properties) the title property.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    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 are getting the error because images contains an array, but you are trying to instead access a property of images called title.
    Because it is an array, no property called title exists.

    What you need to do instead is to access one of the three array indexes, each of which contains (among other properties) the title property.
    what you mean by array indexes?
    can show me how it done?

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    what you mean by array indexes?
    can show me how it done?
    This is an array.

    Code javascript:
    var items = ['apple', 'banana', 'citrus'];

    The items in the array are accessed using an array index, starting from 0 for the first item. For example:

    Code javascript:
    var item = items[1];
    // item is 'banana'

    The [1] part is the array index.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    This is an array.

    Code javascript:
    var items = ['apple', 'banana', 'citrus'];

    The items in the array are accessed using an array index, starting from 0 for the first item. For example:

    Code javascript:
    var item = items[1];
    // item is 'banana'

    The [1] part is the array index.
    but is this still like json format if i change to this way?
    if i change how should it look like and how am i going to get it the title

    p.s sorry that i keep asking , cause this is my first time learning this

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    but is this still like json format if i change to this way?
    if i change how should it look like and how am i going to get it the title
    Which title do you want? There are three images in your JSON data.

    Is it only the first one that you ever way to use, or will you be doing things with all three of the image titles?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Which title do you want? There are three images in your JSON data.

    Is it only the first one that you ever way to use, or will you be doing things with all three of the image titles?
    i will be using the three image title

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    i will be using the three image title, so basically , using the for loop can call the three image?
    Yes. You would use a for loop to loop through each of the items in the images array.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes. You would use a for loop to loop through each of the items in the images array.
    so how shld i write?....the json data you saw is only one part, the three part of the same attribute ...but different data content...is it mean i have a big loop then a small loop ...can show me how am i going to write out with the ajax

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cutexxbaby View Post
    so how shld i write?....the json data you saw is only one part, the three part of the same attribute ...but different data content...is it mean i have a big loop then a small loop ...can show me how am i going to write out with the ajax
    I cannot due to having to go shortly, but perhaps if you're having trouble writing a loop, that might be an indication that someone else should do it for you instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I cannot due to having to go shortly, but perhaps if you're having trouble writing a loop, that might be an indication that someone else should do it for you instead?
    don't worry i need to know only by tomorrow, the problem is i don't know how to call images.image the title...ps really need your help in this, cause all my friend don't really know ajax or json, especially javascript, i also first time using it


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
  •