Dynamically load image with different GET parameters

Question

I'm trying to load an image (created with PHP) with jQuery and passing a few variables with it (for example: picture.php?user=1&type=2&color=64). That's the easy part.

The hard part is that I've a dropdown which enables me to select background (the type parameter) and I'll have an input for example to select a color.

Here're the problems I'm facing:

If a dropdown/input hasn't been touched, I want to leave it out of the URL.
If a dropdown/input has been touched, I want to include it in the url. (This won't work by just adding a variable "&type=2" to the pre-existing string as if I touch the dropdown/input several times they'll stack (&type=2&type=2&type=3)).
When adding a variable ("&type=2" - see the code below) to the pre-existing URL, the &-sign disappears (it becomes like this: "signature.php?user=1type=2").

Here's the code for the jQuery:

<script>
    var url = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";

    $(document).ready(function() {
        window.setTimeout(LoadSignature, 1500);
    });

    $("#signature_type").change(function() {
        url += "&type="+$(this).val();

        LoadSignature();
    });

    function LoadSignature()
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(url, function() {
            $("#loadingsignature").css("display", "none");
        });
    }
</script>

Here's the code where I load the image:

<div id="loadsignature">
    <div id="loadingsignature" style="display: block;"><img src="img/loading-black.gif" alt="Loading.."></div>
</div>

I don't know how more further I could explain my problem. If you have any doubts or need more code, please let me know.

Thank you for your help!

EDIT:

Here's the current code:

<script>
    var url = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";

    $(document).ready(function() {

        window.setTimeout(LoadSignature, 1500);

    });

    $("#signature_type").change(function() {
        url = updateQueryStringParameter(url, 'type', $(this).val());

        LoadSignature();
    });

    function LoadSignature()
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(url, function() {
            $("#loadingsignature").css("display", "none");
        });
    }

    function updateQueryStringParameter(uri, key, value)
    {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
        separator = uri.indexOf('?') !== -1 ? "&" : "?",
        returnUri = '';

        if (uri.match(re))
        {
            returnUri = uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else
        {
            returnUri = uri + separator + key + "=" + value;
        }

        return returnUri;
    }
</script>

EDIT2:

Here's the code for signatureload.php

<?php
    $url = "signature.php?";

    $count = 0;
    foreach($_GET as $key => $value)
    {
        if($count > 0) $url .= "&";
        $url .= "{$key}={$value}";
    }

    echo "<img src='{$url}'></img>";
?>

Still having issues? Still no & in the generated url? How do the current code look when generated? (that is not the server side code) — NiKiZe
– NiKiZe, Commented Aug 27, 2013 at 21:44
@NiKiZe @noam signatureload.php generates a <img> code with help from the parameters and here are the outputs from it after I've changed the select in the dropdown: <img src="signature.php?user=1type=6"> — Magnus
– Magnus, Commented Aug 28, 2013 at 8:45
But this is the .php script, how does it look when you do view source in the browser? (I want to know where the & is lost, is it when the page is generated or is it something else when the javascript is executed) — NiKiZe
– NiKiZe, Commented Aug 28, 2013 at 12:36
It looks exactly like what I posted above. I guess it's when the javascript is executed or inside the php script. I've updated the question with the code in signatureload.php — Magnus
– Magnus, Commented Aug 28, 2013 at 13:42
Would it not be more effective to set the img src with jquery? Other then that a $count++; in the foreach loop would probably fix this last issue of yours. — NiKiZe
– NiKiZe, Commented Aug 28, 2013 at 15:01

Community · Accepted Answer · 2017-05-23 12:21:30Z

2

If I understood your question correctly, it comes down to finding a proper way of modifying GET parameters of the current URI using JavaScript/jQuery, right? As all the problems you point out come from changing the type parameter's value.

This is not trivial as it may seem though, there are even JavaScript plugins for this job. You could use a function like this and in your signature_type change event listener,

function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
        separator = uri.indexOf('?') !== -1 ? "&" : "?",
        returnUri = '';

    if (uri.match(re)) {
        returnUri = uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
        returnUri = uri + separator + key + "=" + value;
    }

    return returnUri;
}

$('#signature_type').change(function () {

    // Update the type param using said function
    url = updateQueryStringParameter(url, 'type', $(this).val());

    LoadSignature();
});

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Aug 26, 2013 at 17:50

federicot

12.3k19 gold badges71 silver badges111 bronze badges

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

7 Comments

Magnus Over a year ago

It won't create the parameter if it doesn't exist, will it?

federicot Over a year ago

@MagnusBurton Yes, it will. If it doesn't exist it will create it. If it does, it will just change it's value.

Magnus Over a year ago

It doesn't seem like it's setting the url variable to the variable with the added parameter. Therefore, I modified it abit and now it still won't add the &-sign: url = updateQueryStringParameter(url, 'type', $(this).val());

federicot Over a year ago

@MagnusBurton Yes, I forgot to assign the value to the url variable. Also, I think the function had some errors. Check if it works with the updated version.

Magnus Over a year ago

I appreciate your help but the & still doesn't show up. Am I doing something weird or? Updated the question with what my current code looks like.

|

NiKiZe · Accepted Answer · 2013-08-27 21:38:07Z

1

Here is a variant where all the data is keept in a separate javascript array

<script>
    var baseurl = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";
    var urlparams = {};

    $(document).ready(function() {
        window.setTimeout(LoadSignature, 1500);
    });

    $("#signature_type").change(function() {
        urlparams['type'] = $(this).val();

        LoadSignature();
    });

    function LoadSignature()
    {
        var gurl = baseurl; // there is always a ? so don't care about that.
        for (key in urlparams) {
            gurl += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(urlparams[key]);
        }

        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(gurl, function() {
            $("#loadingsignature").css("display", "none");
        });
    }
</script>

With this color or any other parameter could be added with urlparams['color'] = $(this).val();

answered Aug 27, 2013 at 21:38

NiKiZe

1,46316 silver badges28 bronze badges

3 Comments

NiKiZe Over a year ago

If this still do not generate & on the correct place try using "\u0026" instead of '&'. But in that case there is something more to this that is the root issue.

Magnus Over a year ago

This was a really neat solution to the problem, thank you! The only problem left is the '&' which keeps dissappearing.

NiKiZe Over a year ago

And you have also tested with gurl += "\u0026" + encodeURIComponent(key) + '=' + encodeURIComponent(urlparams[key]); instead ? (but please note that you should find the cause for why it disapears, even if it is out of scope of this question)

Dexa · Accepted Answer · 2013-08-26 17:55:51Z

1

Why don't you try storing your selected value in a variable, and then using AJAX post data and load image. That way you ensure there is only one variable, not repeating ones. Here's example

var type= 'default_value';

    $("#signature_type").change(function() {        
        type = $(this).val();
    });

then using ajax call it like this (you could do this in your "change" event function):

$.ajax({
    type: 'GET',
    url:    'signatureload.php', 
    data: {
        user: <?php echo $_SESSION['sess_id']; ?>,
        type: type,
        ... put other variables here ...
    },
    success: function(answer){ 
        //load image to div here
    }
});

answered Aug 26, 2013 at 17:55

Dexa

1,65110 silver badges25 bronze badges

Comments

noamtcohen · Accepted Answer · 2013-08-27 20:53:48Z

1

Maybe something like this:

<script>
    var baseUrl = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";

    $(document).ready(function() {
        window.setTimeout(function(){
            LoadSignature(baseUrl);
        }, 1500);
    });

    $("#signature_type").change(function() {
        var urlWithSelectedType = baseUrl + "&type="+$(this).val();
        LoadSignature(urlWithSelectedType);
    });

    function LoadSignature(urlToLoad)
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(urlToLoad, function() {
            $("#loadingsignature").css("display", "none");
        });
    }
</script>

edited Aug 27, 2013 at 20:53

answered Aug 26, 2013 at 19:07

noamtcohen

4,6302 gold badges22 silver badges14 bronze badges

5 Comments

Magnus Over a year ago

It would work but upon change it'd just add another &type= to the url instead of replacing the current one.

noamtcohen Over a year ago

Actually you wouldn't be adding/appending another &type= because you are not changing the baseUrl, the LoadSignature function will always receive a clean url that is the baseUrl plus the &type=, there is no accumulating concatenation.

Magnus Over a year ago

Oh okay, sorry then. Javascript isn't my top language as you might notice. I've tried your solution and the '&'-sign keeps dissappearing.

noamtcohen Over a year ago

That's strange, maybe there is something in the sess_id? can you post an example baseUrl

noamtcohen Over a year ago

Are you setting $_SESSION['sess_id'] somewhere in your code?

Collectives™ on Stack Overflow

Dynamically load image with different GET parameters

4 Answers 4

7 Comments

3 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related