IC SunsetThe developerWorks Connections platform will be sunset on December 31, 2019. On January 1, 2020, this forum will no longer be available. More details available on our FAQ.
Topic
  • 4 replies
  • Latest Post - ‏2014-09-20T11:58:51Z by jitupkp
JavaGuyKy
JavaGuyKy
1 Post

Pinned topic Dynamic image data

‏2011-02-24T00:40:30Z |
I am very new to ajax and jQuery and have a specific challenge I need to resolve. I am trying to begin using some of the dynamic processes provided by ajax and jQuery and get way from some of the traditional methods I have used in the past.

I have a form where a user specifies a mathematical formula in that will result in image of a graph of that formula being generated dynamically. I could let them put in the information, click on submit and then do error checking, etc and either return the image or an error message. The following code works fine as far as getting a new image displayed:

HTML

<form id=
"myform" action=
"..." > <input id=
"mydata" size=
"80" name=
"formula" /><br /> <input type=
"button" id=
"verify" name=
"Verify" /><br /> <input type=
"submit" id=
"submit" disabled value=
"submit" /><br /> <img id=
"imgid" src=
"/genimage.jsp?newdata=<%=formula %>" /> </form>


JavaScript

function reloadImage() 
{ var nd = document.getElementById(
'formula').value; document.getElementById(
'imgid').src = 
'/genimage.jsp?newdata='+nd; 
}


genimage.jsp generates the image and returns it with content type image/png. But if the formula has errors it returns a status 500.

I would like to execute the module, check the status code and take specific actions based on the status. If it is a success I want to display the new image and activate a submit button so the user can save the information. If it is a failure I want to display a message and leave the original image on the page.
I tried the following code:


function reloadImage() 
{ var nd = document.getElementById(
'formula').value; $.ajax(
{ type:   
"GET", url:    
"/genImage.jsp", data:   nd, success:     function(newImg) 
{ $(
'#imgid').attr(
'src',newImg); 
}, failure:     function() 
{ alert(
"It failed"); 
} 
}); 
});


This code DOES execute the module on the server with the new information. I have traced it that far. But nothing happens when control gets back to the client. What do I do to get the new image to actually replace the old one? I realize it is the actual binary data, not a URL. I have spent 2 days searching for a solution. I keep getting information that skirts around the solution. So far I keep coming up short. Can I accomplish this with ajax/jQuery?
Updated on 2011-07-02T13:49:13Z at 2011-07-02T13:49:13Z by SystemAdmin
  • sCOTTYgAV
    sCOTTYgAV
    4 Posts

    Re: Dynamic image data

    ‏2011-03-09T01:22:57Z  
    I have to much time on my hands...

    I don't know jQury but this is the plain JS solution... (i hope)
    You still have to update the jQury call to newImg.

    Hope I'm in the ballpark.

    ////////////////////////////////////////////////////////////////
    function reloadImage()
    {
    var url = "/genImage.jsp";
    var req = initRequest();

    req.onreadystatechange = function()
    {
    if (req.readyState == 4)
    {
    if (req.status == 200)
    {
    alert("Success!");

    //you will have to fix this...
    function(newImg) {$('#imgid').attr('src',newImg);

    }
    else if (req.status == 500)
    {
    alert("Huston!");//try again
    reloadImage();

    }
    else if (req.status == 204)
    {

    }
    else
    {

    }
    }
    };

    req.open("GET", url, true);
    req.send(null);
    document.close();
    }

    ...
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: Dynamic image data

    ‏2011-07-02T13:49:13Z  
    html 4 doesnot support img by post method.
  • jitupkp
    jitupkp
    104 Posts

    Re: Dynamic image data

    ‏2014-09-20T11:58:25Z  

    see more

    http://techgurulab.com/course/ajax-quiz-online/

  • jitupkp
    jitupkp
    104 Posts

    Re: Dynamic image data

    ‏2014-09-20T11:58:51Z  
    • sCOTTYgAV
    • ‏2011-03-09T01:22:57Z
    I have to much time on my hands...

    I don't know jQury but this is the plain JS solution... (i hope)
    You still have to update the jQury call to newImg.

    Hope I'm in the ballpark.

    ////////////////////////////////////////////////////////////////
    function reloadImage()
    {
    var url = "/genImage.jsp";
    var req = initRequest();

    req.onreadystatechange = function()
    {
    if (req.readyState == 4)
    {
    if (req.status == 200)
    {
    alert("Success!");

    //you will have to fix this...
    function(newImg) {$('#imgid').attr('src',newImg);

    }
    else if (req.status == 500)
    {
    alert("Huston!");//try again
    reloadImage();

    }
    else if (req.status == 204)
    {

    }
    else
    {

    }
    }
    };

    req.open("GET", url, true);
    req.send(null);
    document.close();
    }

    ...

    see more

    http://techgurulab.com/course/ajax-quiz-online/