Get ID with onClick function and populate it on a different html

Question

I'm have a HTML page that loading a table and a dhtmlxgantt chart. The javascript function below works but now i want to load the gantt chart from a different html and display it through iframe.

How can I get the content_id from the main_page.html table and populate it on scheduler.html gantt chart

Everyone helps is much appreciated

main_page.html

<table id="project-content-datatable">
    <tbody>
        <tr>
            <td class="project_content_id">1</td>
            <td class="project_content_id">2</td>
            <td class="project_content_id">3</td>      
        </tr>
    </tbody>
</table>

<div class="col-md-12" style="padding: 3px; margin: 0px;">
     <iframe src="/dashboard/projects/scheduler.html" height="330"; width="99%" style="border:2px  solid blue; border-radius: 5px;"></iframe>
</div>

scheduler.html

<div id="my_scheduler" style='width:1567px; height:325px;'></div>

javascript

$('#project-content-datatable').on('click', 'tr', function () {
    var content_id =$(this).closest('tr').children('td.project_content_id').text();
    initializeGantt(content_id)
    });

    gantt.config.xml_date = "%Y-%m-%d";
    function initializeGantt(content_id) {
        scheduler = gantt.init("my_scheduler", new Date('2017, 01, 01'), new Date('2017, 12, 31'));
        $.get("/dashboard/ganttchart_list/"+content_id+"/?format=json", function(result) { gantt.parse(prepareData(result)); });
    }

    initializeGantt();

score 0 · Answer 1 · answered Jul 04 '17 at 10:48

An easy way to do this is call dynamically create the url that you pass to the iframe:

<div class="col-md-12" style="padding: 3px; margin: 0px;">
    <iframe id="iframe" height="330"; width="99%" style="border:2px  solid blue; border-radius: 5px;"></iframe>
</div>

and in your script:

var url = "/dashboard/projects/scheduler.html?content_id=" + content_id;
document.getElementById('iframe').src = url;

Now within the iframe you can fetch the content id from the window.hash. Extracting the id can, in this specific case, easily be done with a substring, but for a more complete approach you can use a function which extracts query parameters from a url as described here: How can I get query string values in JavaScript?

Get ID with onClick function and populate it on a different html

1 Answers1