Tag Archives: jQuery

jQuery: How to extract a tag from an HTML response

Making a website, and using ajax for some things. Sometimes things fail and return custom error pages. I made them to be helpful, but since you can only see them in the browser developer console, they were a bit of a hassle to look at.

To see what the error was much easier, I figured I could just parse the returned HTML, extract the message I knew was there, and insert it into the page that way.

And you’d think the following would work fine:

$(document).ajaxError(function(event, jqxhr, settings, error)
{
    // Find the message in the response HTML
    var m = $(jqxhr.responseText)
        .find('#message');

    // Except .find() doesn't find anything

    // And we replace our DOM with nothing
    $('#content')
        .replaceWith(m);
});

But… No… Apparently, since the response was a complete HTML page, i.e. including html, head and body tags, jQuery was getting a bit tricked up when trying to parse it. Actually not sure if it’s jQuery or native browser parsing behind that’s causing it, but where there’s a will, there’s a way:

$(document).ajaxError(function(event, jqxhr, settings, error)
{
    // Find the inner HTML of the body tag
    var body = /<body.*>([\s\S]+)<\/body>/
        .exec(jqxhr.responseText);

    // Parse the HTML
    body = $.parseHTML(body[1])

    // Append the HTML to a non-special root tag
    body = $('<output>').append(body);

    // And *now* we can finally find our message
    var message = body.find('#message');

    // And add it to our DOM
    $('#content')
        .replaceWith(m);
});

¯\_(ツ)_/¯

Measure upload time and speed with PHP and Javascript

Stumbled upon a question on StackOverflow the other day which got me curious. The question was about how to measure how long it takes to upload a file to a PHP script. This is what had been tried out:

$upload_time = time() - $_SERVER['REQUEST_TIME'];

This pretty much always returns zero, even though the uploading actually took many seconds, because the request start time is after the server has received the post data. That we actually just get how long the script took to run, which of course is pretty close to zero seconds. So, what can we do?

  1. Right before data is posted, nudge the server with an AJAX call which stores the current timestamp in a session variable
  2. Post the data
  3. Compare current timestamp with the one stored in step 1

Wasn’t sure how it would work, but seems to work pretty well. There will of course be a very tiny difference since the AJAX request will be a bit part of the time, but compared to the upload time it shouldn’t matter much. Anyways, here’s how you could do it 🙂

Continue reading Measure upload time and speed with PHP and Javascript