Question

I have a server size image stream where you pass “fileid”, width and height to and it streams an image to client. I’m using CKEditor, and would like to add jquery function that changes it’s url when height or width changes in the textboxes.

As you see here on the pic its a specific format:

/Content/Image/{digit}/{width}/{height} rest is optional in string.

Lets say id’s of them textboxes are “txtwidth” and “txtheight”, how would you add jquery functionality to it that replaces width and height in url textbox, and only if it matches string starting with /Content/Image/{digit}/{width}/{height}?

Thanks in advance

/Lasse

Answer 1

You can do this easily by using regexp to match the string and to replace the corresponding parts. As you mentioned that you’d want to do this with jQuery I am assuming you have jQuery already on your site, but if you don’t I wouldn’t recommend adding it for this.

Instead of explaining further what to do, I’ve pasted the code below and commented each step, which should make it quite clear what’s going on:

// bind onchange and keypress events to the width and height text boxes
$('#txtwidth, #txtheight').bind('change keypress', function(){

    // define the regexp to which to test with, edit as needed
    var re = /\/Content\/Image\/([0-9]+)\/[0-9]+\/[0-9]+\//,
        // store url and its value to a variable so we won't have to retrieve it multiple times
        url = $('#url'),
        val = url.val();

    // test if regexp matches the url
    if (!re.test(val)) {
        // doesn't match
         return;    
    }

    // we got this far, so it did match

    // replace the variables in the regexo
    val = val.replace(re, "/Content/Image/$1/" + $("#txtwidth").val() + "/" + $("#txtheight").val() + "/");

    // put it back into the input field
    url.val(val);

});

example: http://jsfiddle.net/niklasvh/wsAcq/