Fynn Fynn - 1 year ago 104
jQuery Question

Apply JS onto table, which is created after page is loaded

I have got an html page, where you can put text into a textarea, click a button and then it creates an html table.
Problem is, that i am using a JS file to make my table sortable, but this JS file is not applied to tables that are created after the page itself is created.
How can i call the JS file again after the button is clicked and the table created? Or is there any other way to apply the JS file to the new table?

My problem seems to be like this problem:
Apply jquery propieties on new element created after the page is loaded
But i can't use JQuery, is there any way without it?

Example for a created table:

<div id="artikelnr2">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="table.css">
<script src="java.js"></script>

<div class="datagrid"><table class="sortable">

I am using sorttable.js from this page:

JavaScript which is called after button is clicked (pastes the content of another page into an exisiting div container):

function getOutput(url) {
var file = selectedValue()+".csv";
var value = document.getElementById("artikelnr").value;
<!---Leerzeichen entfernen-->
value = myTrim(value);
var url = url || "verarbeitung.php?eingabe="+value+"&eingabe2="+file ;

url, // URL for the PHP file
drawOutput, // handle successful request
drawError // handle error
return false;

// handles drawing an error message
function drawError() {
var container = document.getElementById('artikelnr2');
container.innerHTML = 'Bummer: there was an error!';
// handles the response, adds the html
function drawOutput(responseText) {
var container = document.getElementById('artikelnr2');
container.innerHTML = responseText;
tempResult = responseText;
// helper function for cross-browser request object
function getRequest(url, success, error) {
var req = false;
// most browsers
req = new XMLHttpRequest();
} catch (e){
// IE
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
// try an older version
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
req.open("GET", url, true);
return req;

Answer Source

So this is a suggestion as a major part of your code is not available.

In your existing code, where you create the new table, you need to add/run the following:


The newTableObject reference you either can get straight from your existing code or by calling document.getElementById(idOfTheTableIJustAdded) after your added the new table to the DOM.

Src: http://www.kryogenix.org/code/browser/sorttable/

Update after question edit:

In this script function you should be able to do like this

function drawOutput(responseText) {
    var container = document.getElementById('artikelnr2');
    container.innerHTML = responseText;
    //tempResult = responseText;

    var newTableObject = container.querySelector(".sortable");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download