0
$(function () {
    $('.referral').on('click', function () {
        $('#hold').html($(this).find('DIV').html());
        $('#hold').dialog();
    });
});

$(function getTableData() {
    $.ajax({
        url: 'interface_API.php',
        data: "",

        dataType: 'json',
        success: function (data) {
            setTimeout(function () {
                getTableData()
            }, 1000);
            var body = document.getElementById('tbody');
            body.innerHTML = '';
            for (var i in data) {
                var row = data[i];
                var customerCode = row.CustomerCode;
                var phone = row.PhoneNumber;
                var thetime = row.TimeStamp;

                var tr = document.createElement('TR');
                tr.className += " " + "referral";
                body.appendChild(tr);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(customerCode));
                tr.appendChild(td);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(phone));
                tr.appendChild(td);

                var td = document.createElement('TD');
                td.appendChild(document.createTextNode(thetime));
                tr.appendChild(td);

                var tr2 = document.createElement('TR');
                body.appendChild(tr2);

                var td2 = document.createElement('TD');
                var divE = document.createElement('DIV');
                divE.className += " " + "extra";
                var text = document.createTextNode("sage, extra, etc");
                divE.appendChild(text);
                td2.appendChild(divE);
                tr2.appendChild(td2);
            }

        }
    });
});

I have data from a JSON api that is imported using ajax. This is displayed to a table, of which the rows are created using JS.

With each row, there is an additional row of 'additional' data that is hidden from the user. on click of a row, i wish for a dialog to appear displaying this 'additional' data.

Initally i tryed todo this with writing out the rows in "raw format" (var row = "<tr><td>...</td></tr>" etc) however i read that this does not work well with javascript functions like the one i am trying to execute as the DOM has already been set (i'm not 100% sure about that). This is why i use JS to create each element & do it correctly, to some respect.

However, i am still unable to get the dialog to appear

Notes. below the table (html hard coded) is a empty div which is used as a holder for when a dialog is to appear.

I have had success before when the data is static & ajax is not involved

5
  • i can confirm that the ajax/json data is correct
    – Simon.
    Jul 22, 2014 at 14:56
  • Are you including jquery-ui in your page?
    – Hackerman
    Jul 22, 2014 at 14:57
  • yup, 1.9.2/themes/ui-darkness/jquery-ui.css aswell as the .min
    – Simon.
    Jul 22, 2014 at 14:58
  • As 2 seperate tasks, the ajax to table works just fine. and the dialog from table works just fine. Its just this combo of dialog from table from ajax that is causing an issue
    – Simon.
    Jul 22, 2014 at 14:59
  • 1
    Have you stepped through it to see where it fails?
    – isherwood
    Jul 22, 2014 at 15:55

1 Answer 1

0

I found the solution. It seems that the JS .on('click', function() was not being called, or registered at the right point. i checked on the DOM properties using chrome dev tools & .referral's onclick property was null.

Instead, i set the onclick attribute of each <TR> with the function clicks() like so:

var tr = document.createElement('TR');
tr.setAttribute("onclick", "clicks(this)");

With,

function clicks(param){
        $('#hold').html($(param).find('DIV').html());
        $('#hold').dialog();
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.