Techy Things » jquery

jQuery prevent uploading too large file in Frontend

frank — Tue, 09 May 2017 21:39:17 +0000

afterRender:
      // Only works on HTML5
      $('#file').on('change', function() {
        $("#upload-package").prop("disabled",  false);
        var sizeLimit = 90;
        if (this.files && this.files.length && this.files[0].size > sizeLimit*1024*1024) {
          notifier.error_x("File size exceeds limit of "+sizeLimit+"MB");
          $("#upload-package").prop("disabled",  true);
          return;
        }
        if (this.files && this.files.length && this.files[0].name && this.files[0].name.match(/makitox_dec_v[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}-[0-9]{1,4}\.hai$/) === null) {
          notifier.error_x(this.files[0].name + " is not a valid makitox decoder package");
          $("#upload-package").prop("disabled",  true);
          return;
        }
      });

cleanup:
      $('#file').off('change');

The post jQuery prevent uploading too large file in Frontend appeared first on Techy Things.

data.responseText is undefined when using jQuery ajax with iframe-transport

frank — Thu, 21 May 2015 10:06:34 +0000

Legacy code that fails with jQuery > 1.9

$.ajax(app.bannerSettings.url, {
  files: self.$("#upload-file"),
  iframe: true
}).complete(function(data) {
  if(data.status === 200)
  {
    var response = $.parseJSON(data.responseText);
    (...)
  }
  else
  {
    notifier.error_x(data.responseText);
  }
});

Corrected code for jQuery >= 1.10

$.ajax(app.bannerSettings.url, {
  files: self.$("#upload-file"),
  iframe: true,
  dataType: "json"
}).complete(function(data) {
  if(data.status === 200)
  {
    var response = $.parseJSON(data.responseText);
    (...)
  }
  else
  {
    notifier.error_x(data.responseText);
  }
});

Notice that the .complete() handler is used. In that case the responseText is available unparsed. Using complete() is suggested by the plugin author.

Plugin: jquery.iframe-transport.js
Sources: https://github.com/cmlenz/jquery-iframe-transport
Documentation: https://cmlenz.github.io/jquery-iframe-transport/

The documentation does not mention using dataType: "json". I tested using it with the old version of jQuery 1.9.1 and it still works so I would suggest updating the documentation to use dataType: "json" in all cases.

Related links on similar issues:
https://github.com/jakerella/jquery-mockjax/issues/95

The post data.responseText is undefined when using jQuery ajax with iframe-transport appeared first on Techy Things.

jQuery move element to another parent

frank — Tue, 10 Mar 2015 11:07:43 +0000

Using jQuery .detach() function to remove the item from its original position and .append() to insert it back in the page. Actually you would not even need detach() since append() is geared to do this by itself if you pass it an element already on the page - however for clarity the detach call doesn't hurt.

On the HTML markup I use span to encompass the moving element.

Javascript:

if (toggleElement.hasClass("off"))
{  $("#section-streaming").collapse("hide");
   var tsSettingsButton = $("#ts-over-settings").detach();
   $("#ts-setting-location-recording").append(tsSettingsButton);
}
else 
{  $("#section-streaming").collapse("show"); 
   var tsSettingsButton = $("#ts-over-settings").detach();
   $("#ts-setting-location-stream").append(tsSettingsButton);
}

HTML:


  
 
(...)

The post jQuery move element to another parent appeared first on Techy Things.