Category: jquery

Get Etherpad Pad contents in Javascript

Posted on by John McLear 
function getElementByIdInFrames(id, base) {
  var el;
  if(el = base.document.getElementById(id)) {
    return el;
  }

  for(var i = 0, len = base.frames.length; i < len; i++) {
    if(el = getElementByIdInFrames(id, base.frames[i])) {
      return el;
    }
  }
}
getElementByIdInFrames("innerdocbody", window).innerHTML;

This means you can also do…

getElementByIdInFrames("innerdocbody", window).innerHTML = "Superducky";

And if you want to use jQuery a one liner will sort you out..

console.log($('iframe[name="ace_outer"]').contents().find('iframe').contents().find("#innerdocbody"));

NOTE: Due to a change in the jQuery API a . after iframe was removed — 10/02/2013

Means you can do..

$('iframe[name="ace_outer"]').contents().find('iframe').contents().find("#innerdocbody").html("Superducky");

Thanks to Mark Fisher for the jQuery example

Ajax CSV upload to a Table with jQuery and PHP

Posted on by John McLear

So I had to write a new user importer for School Email and I was looking for a simple plugin in solution but didn’t find one so here is a simple way of uploading a csv file that is uploaded to a file and rendered to a table..

Projects used: CsvToTable & jQuery File Upload & Editable Grid *optional for live edits.

Grab those two projects, grab the below files and put them in a /js folder then put the .js files into your head..

Put the jQuery-File-Upload folder in your root, we will be uploading files to here.. You may want to add a layer of security in front of the upload function.

<head>
<script src="/js/csvToTable.js"></script>
<script src="/js/jquery.iframe-transport.js"></script>
<script src="/js/jquery.fileupload.js"></script>
</head>

At the bottom of your body add..

<div id="csvToTable"></div>
<div id="fileupload"></div>
<script>
var loggedIn = 1; // you will want to modify this if you require auth
$(function () {
  if(loggedIn == "1"){
    $('#fileupload').fileupload({
      dataType: 'json',
      acceptFileTypes: '/(csv)$/i',
      url: '/jQuery-File-Upload/php/index.php',
      done: function (e, data, Users) {
        $.each(data.result, function(index, file){
          $('#csvToTable').html("");
          $('#csvToTable').CSVToTable(file.url).bind("loadComplete",function() {
            console.log("Loaded data into table");
            /*

            Call functions to manipulate data here

            */
          });;
        });
      }
    });
  }
});
</script>

Want to make your table editor like the rest of the cool kids? Check out this jQuery plugin