Using jquery ajax to update dynamically created image by GET

Question

My current working situation looks something like this:

<!-- collect user info -->
<form method="GET">
    <input name="param1" type="text" />
    <input name="param2" type="text" />
    <input type="submit" />
</form>

<!-- display image based on user info -->
<img src="color.php?param1=<?php echo $_GET['param1']; ?>param2=<?php echo $_GET['param2']; ?>" alt="" />

This is working perfectly. Now I would like only the image being updated by ajax, while the rest of the HTML remains unchanged. I tried this:

<form method="GET" id="formId">
    <input name="param1" type="text" />
    <input name="param2" type="text" />
    <input type="submit" />
</form>

<div id="result"></div>

<script type="text/javascript">
    var frm = $('#formId');
    frm.submit(function(){
        $.ajax({
            type: 'GET',
            success: function () {
                $('#result').html('<img src="color.php?' + frm.serialize() + '" />');
            }
        });
        return false;
    });
</script>

In fact this solution works more or less. However, I have some issues here:

Is this good jquery / ajax code or is it silly (yes, I am new to jquery)?
The field "result" does update only if one of the fields changes. Can I make it update whenever the submit button is being klicked?
I would like to display a spinning load.gif while the color.php calculates the picture. I tried it this way, without success:

var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />');

Thank you!

Daniel Aranda · Accepted Answer · 2013-05-11 16:00:19Z

3

To the jQuery ajax call add the parameter cache : false, to force to refresh the image. To use the loader, just play with the attributo src. Copy / paste the code:

<form method="GET" id="formId">
    <input name="param1" type="text" />
    <input name="param2" type="text" />
    <input type="submit" />
</form>

<div id="result">
     <img id="preview" src="img/load.gif" />
</div>

<script type="text/javascript">
    var frm = $('#formId');
    frm.submit(function(){
        $('#preview').attr('src', 'img/load.gif' );
        $('#preview').attr('src', 'color.php?' + frm.serialize() + '&_' + new Date().getTime() );
        return false;
    });
</script>

edited May 11, 2013 at 16:00

answered May 11, 2013 at 15:01

Daniel Aranda

6,5722 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

g000ze Over a year ago

Thank you for you help. I tried it, but it appears that there is still something wrong. With "cache: false," and the additional "<img" tag enabled only the index.php reloads, but there is no reload of the picture (color.php). Thus the load.gif doesn't show up either. Any ideas?

Daniel Aranda Over a year ago

I just figured that your ajax call does not have url. check my updated answer.(looks like you do not need the ajax request)

g000ze Over a year ago

Very nice, thank you! Almost perfect, just the color.php still loads only after making changes to the form.

Daniel Aranda Over a year ago

Right, you could fix adding this after frm.serlialize() "+ '&_' + new Date().getTime()" to make the browser think is a new request. (check my updated answer)

Collectives™ on Stack Overflow

Using jquery ajax to update dynamically created image by GET

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related