js_injects

js_injects.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:ba3f86da22c99d2f5b191b9a98715a1fcba64d66b8e527dd1c023aa5eb57ae81"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "element.append(\"<h1>Hello World!</hl>\");"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "element.append(\"<h1>Hello World!</hl>\");"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f061419ab10>"
       ]
      }
     ],
     "prompt_number": 34
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "$.getScript('/static/custom/jquery.dynatable.js');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript('/static/custom/jquery.dynatable.js');"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f061419ac90>"
       ]
      }
     ],
     "prompt_number": 105
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "window.callback = function(msg) {\n",
      "    //console.log(msg);\n",
      "    if (msg.msg_type==\"pyout\") {\n",
      "        console.log(element);\n",
      "        console.trace()\n",
      "        element.append(\" stuff \" + element);\n",
      "        window._msg = msg;\n",
      "    }\n",
      "}\n",
      "IPython.notebook.kernel.execute('json.dumps(data)', {iopub: {output: callback}}, {silent: false});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "window.callback = function(msg) {\n",
        "    //console.log(msg);\n",
        "    if (msg.msg_type==\"pyout\") {\n",
        "        console.log(element);\n",
        "        console.trace()\n",
        "        element.append(\" stuff \" + element);\n",
        "        window._msg = msg;\n",
        "    }\n",
        "}\n",
        "IPython.notebook.kernel.execute('json.dumps(data)', {iopub: {output: callback}}, {silent: false});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f061419a9d0>"
       ]
      }
     ],
     "prompt_number": 106
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython import utils\n",
      "from IPython.core.display import HTML\n",
      "import os\n",
      "def css_styling():\n",
      "    \"\"\"Load default custom.css file from ipython profile\"\"\"\n",
      "    base = utils.path.get_ipython_dir()\n",
      "    styles = \"<style>\\n%s\\n</style>\" % (open(os.path.join(base,'profile_default/static/custom/jquery.dynatable.css'),'r').read())\n",
      "    return HTML(styles)\n",
      "css_styling()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style>\n",
        "/*\n",
        " * jQuery Dynatable plugin 0.3.1\n",
        " *\n",
        " * Copyright (c) 2014 Steve Schwartz (JangoSteve)\n",
        " *\n",
        " * Dual licensed under the AGPL and Proprietary licenses:\n",
        " *   http://www.dynatable.com/license/\n",
        " *\n",
        " * Date: Tue Jan 02 2014\n",
        " */\n",
        "th a {\n",
        "  color: #fff;\n",
        "}\n",
        "th a:hover {\n",
        "  color: #fff;\n",
        "  text-decoration: underline;\n",
        "}\n",
        "\n",
        ".dynatable-search {\n",
        "  float: right;\n",
        "  margin-bottom: 10px;\n",
        "}\n",
        "\n",
        ".dynatable-pagination-links {\n",
        "  float: right;\n",
        "}\n",
        "\n",
        ".dynatable-record-count {\n",
        "  display: block;\n",
        "  padding: 5px 0;\n",
        "}\n",
        "\n",
        ".dynatable-pagination-links span,\n",
        ".dynatable-pagination-links li {\n",
        "  display: inline-block;\n",
        "}\n",
        "\n",
        ".dynatable-page-link,\n",
        ".dynatable-page-break {\n",
        "  display: block;\n",
        "  padding: 5px 7px;\n",
        "}\n",
        "\n",
        ".dynatable-page-link {\n",
        "  cursor: pointer;\n",
        "}\n",
        "\n",
        ".dynatable-active-page,\n",
        ".dynatable-disabled-page {\n",
        "  cursor: text;\n",
        "}\n",
        ".dynatable-active-page:hover,\n",
        ".dynatable-disabled-page:hover {\n",
        "  text-decoration: none;\n",
        "}\n",
        "\n",
        ".dynatable-active-page {\n",
        "  background: #71AF5A;\n",
        "  border-radius: 5px;\n",
        "  color: #fff;\n",
        "}\n",
        ".dynatable-active-page:hover {\n",
        "  color: #fff;\n",
        "}\n",
        ".dynatable-disabled-page,\n",
        ".dynatable-disabled-page:hover {\n",
        "  background: none;\n",
        "  color: #999;\n",
        "}\n",
        "\n",
        "</style>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 109,
       "text": [
        "<IPython.core.display.HTML at 0x7f06141fef90>"
       ]
      }
     ],
     "prompt_number": 109
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "%%html\n",
      "<div id=\"my-div\"><table id=\"the-final-table1\"><thead><th>Band</th><th>Song</th>\n",
      "</thead><tbody></tbody></table><input id=\"my_button\" type=\"button\" value = \"update\"/></div>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"my-div\"><table id=\"the-final-table1\"><thead><th>Band</th><th>Song</th>\n",
        "</thead><tbody></tbody></table><input id=\"my_button\" type=\"button\" value = \"update\"/></div>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x7f06141b5510>"
       ]
      }
     ],
     "prompt_number": 126
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "//update dynamically\n",
      "$(\"#my_button\").off(\"click\");\n",
      "$(\"#my_button\").on(\"click\",function(e) {\n",
      "    var t = $(\"#the-final-table1\");\n",
      "    console.log(t);\n",
      "    var d = t.data('dynatable')\n",
      "//d.records.getFromTable()\n",
      "\n",
      "    var data = [{\n",
      "        \"band\": \"Weezer\",\n",
      "        \"song\": \"El Scorcho\"\n",
      "      },\n",
      "      {\n",
      "        \"band\": \"Chevelle\",\n",
      "        \"song\": \"Family System\"\n",
      "      },\n",
      "      {\n",
      "        \"band\": \"Chevelle\",\n",
      "        \"song\": \"Family System\"\n",
      "      }         \n",
      "      ];\n",
      "    console.log(d.settings);\n",
      "    d.settings.dataset.records = data;\n",
      "    d.settings.dataset.queryRecordCount = data.length;\n",
      "    d.dom.update()\n",
      "    });\n",
      "\n",
      "\n",
      "//d.records.count()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "//update dynamically\n",
        "$(\"#my_button\").off(\"click\");\n",
        "$(\"#my_button\").on(\"click\",function(e) {\n",
        "    var t = $(\"#the-final-table1\");\n",
        "    console.log(t);\n",
        "    var d = t.data('dynatable')\n",
        "//d.records.getFromTable()\n",
        "\n",
        "    var data = [{\n",
        "        \"band\": \"Weezer\",\n",
        "        \"song\": \"El Scorcho\"\n",
        "      },\n",
        "      {\n",
        "        \"band\": \"Chevelle\",\n",
        "        \"song\": \"Family System\"\n",
        "      },\n",
        "      {\n",
        "        \"band\": \"Chevelle\",\n",
        "        \"song\": \"Family System\"\n",
        "      }         \n",
        "      ];\n",
        "    console.log(d.settings);\n",
        "    d.settings.dataset.records = data;\n",
        "    d.settings.dataset.queryRecordCount = data.length;\n",
        "    d.dom.update()\n",
        "    });\n",
        "\n",
        "\n",
        "//d.records.count()"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f06141b59d0>"
       ]
      }
     ],
     "prompt_number": 141
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript \n",
      "\n",
      "$.dynatableSetup(\n",
      "    {\n",
      "    features: {\n",
      "        search: false,\n",
      "    },\n",
      "    });\n",
      "\n",
      "var data = [{\n",
      "    \"band\": \"Weezer\",\n",
      "    \"song\": \"El Scorcho\"\n",
      "  },\n",
      "  {\n",
      "    \"band\": \"Chevelle\",\n",
      "    \"song\": \"Family System\"\n",
      "  }];\n",
      "\n",
      "$('#the-final-table1').dynatable({\n",
      "  dataset: {\n",
      "      records: data\n",
      "    }\n",
      "});\n",
      "\n",
      "var t = document.querySelector(\"#the-final-table1>thead\");\n",
      "var d = document.getElementById(\"my-div\");\n",
      "d.style.background=\"grey\";\n",
      "d.style.display=\"block\";\n",
      "d.style.border=\"solid\";\n",
      "d.style.padding=\"30px\";\n",
      "t.style.background = \"blue\";"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "$.dynatableSetup(\n",
        "    {\n",
        "    features: {\n",
        "        search: false,\n",
        "    },\n",
        "    });\n",
        "\n",
        "var data = [{\n",
        "    \"band\": \"Weezer\",\n",
        "    \"song\": \"El Scorcho\"\n",
        "  },\n",
        "  {\n",
        "    \"band\": \"Chevelle\",\n",
        "    \"song\": \"Family System\"\n",
        "  }];\n",
        "\n",
        "$('#the-final-table1').dynatable({\n",
        "  dataset: {\n",
        "      records: data\n",
        "    }\n",
        "});\n",
        "\n",
        "var t = document.querySelector(\"#the-final-table1>thead\");\n",
        "var d = document.getElementById(\"my-div\");\n",
        "d.style.background=\"grey\";\n",
        "d.style.display=\"block\";\n",
        "d.style.border=\"solid\";\n",
        "d.style.padding=\"30px\";\n",
        "t.style.background = \"blue\";"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f06141b5610>"
       ]
      }
     ],
     "prompt_number": 127
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "data = [{\n",
      "    \"band\": \"Weezer\",\n",
      "    \"song\": \"El Scorcho\"\n",
      "  },\n",
      "  {\n",
      "    \"band\": \"Chevelle\",\n",
      "    \"song\": \"Family System\"\n",
      "  }]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 142
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import json"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 143
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "json.dumps(data)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 87,
       "text": [
        "'[{\"band\": \"Weezer\", \"song\": \"El Scorcho\"}, {\"band\": \"Chevelle\", \"song\": \"Family System\"}]'"
       ]
      }
     ],
     "prompt_number": 87
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "//update dynamically\n",
      "var t = $(\"#the-final-table1\");\n",
      "var d = t.data('dynatable')\n",
      "//d.records.getFromTable()\n",
      "\n",
      "var data = [{\n",
      "    \"band\": \"Weezer\",\n",
      "    \"song\": \"El Scorcho\"\n",
      "  },\n",
      "  {\n",
      "    \"band\": \"Chevelle\",\n",
      "    \"song\": \"Family System\"\n",
      "  },\n",
      "  {\n",
      "    \"band\": \"Chevelle\",\n",
      "    \"song\": \"Family System\"\n",
      "  }         \n",
      "  ];\n",
      "\n",
      "\n",
      "\n",
      "//d.records.resetOriginal()\n",
      "//d.settings.dataset.originalRecords = d.records.getFromTable()\n",
      "//d.records.updateFromJson(data)\n",
      "//d.dom.update()\n",
      "//d.settings.dataset.records = data\n",
      "//d.dom.update()\n",
      "\n",
      "//d.records.count()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "var t = $(\"#the-final-table1\");\n",
        "var d = t.data('dynatable')\n",
        "//d.records.getFromTable()\n",
        "\n",
        "var data = [{\n",
        "    \"band\": \"Weezer\",\n",
        "    \"song\": \"El Scorcho\"\n",
        "  },\n",
        "  {\n",
        "    \"band\": \"Chevelle\",\n",
        "    \"song\": \"Family System\"\n",
        "  },\n",
        "  {\n",
        "    \"band\": \"Chevelle\",\n",
        "    \"song\": \"Family System\"\n",
        "  }         \n",
        "  ];\n",
        "\n",
        "\n",
        "\n",
        "//d.records.resetOriginal()\n",
        "//d.settings.dataset.originalRecords = d.records.getFromTable()\n",
        "//d.records.updateFromJson(data)\n",
        "//d.dom.update()\n",
        "//d.settings.dataset.records = data\n",
        "//d.dom.update()\n",
        "\n",
        "//d.records.count()"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f061419a5d0>"
       ]
      }
     ],
     "prompt_number": 101
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "s = HTML(\"<h1>aa</h1>\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 118
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 123,
       "text": [
        "'<h1>aa</h1>'"
       ]
      }
     ],
     "prompt_number": 123
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}