How To Popup a Dialog

Tsokotsa

Hi There, i would like to get dynamical data displayed on a Jquery Dialog. I want that to be triggered when i click on datatable row. Can someone please give an example on how to on this.

allan

This example shows how you can use a click event. Then use row().data() to get the data for the row, and use whatever the API is of your popup to show and populate it.

Allan

Tsokotsa

Hi Allan

Thank you for your reply. I sow the example however my bad i might have explained wrong what i want to achieve. When i click on DT row, i want to get some content from the database based on the ID of the user listed on the DT. So the data retrieved from the database will then be displayed on the Jquery dialog. Because i am using a Laravel, i want to return the data to a diferent view and must be a dialog or a modal. Hope it makes sense.

allan

Sure - that makes sense. In that case, use the click event listener to get the id from the from (still row().data()) and then make your Ajax call to the server using jQuery.

Allan

tangerine

@ Tsokotsa : no doubt you have reasons for using a modal, but for similar usage you could look at DataTables' "master/detail" process:
https://datatables.net/examples/api/row_details.html

Tsokotsa

Hi Allan and Tangerine

Apologize for my late reply. Thank you for your assistance and i did managed to get it working the way i wanted. So i creatted a fn.callback as follows:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData.id;
// alert (id);
var url = "<?= URL::to('/');?>" +"/user/" +id +"/edit";
// alert(url);
var ref = url;
$(nRow).attr("title","View Detail - " +aData.name +' ' +aData.surname );
$(nRow).attr("href",ref);
$(nRow).attr("data-toggle","modal");
$(nRow).attr("data-target","#modal-edit");
$(nRow).addClass('ui-pointer');
$(nRow).addClass('popup-edit');
// return nRow;
}

So with the attributes on the row, to trigger a modal, it was very easy because when i click on row it already triggers the modal-edit.
So on my controller i have

public function edit ($id)
{

    $res = User::findOrFail($id);
    $course = $res->course;
    return View('admin.users.popupedit',['res' => $res, 'course' => $course]);

}

so i return the result of the query to my popupedit view. So on that view i have the HTML code as well as the PHP to populate the values. In my case the $res contains all values i want.

you may close this discussion.