Search the forum...
Type to search...
Other Modals questions
Trevor R
Trevor R
Hi, I've installed Modals pro and the inline code works perfectly except when I place it within datatables as a rendered result:
'url' will work within datatables but I can not get the modal to popup using "text" or "html" as it does outside of datatables. When the link is clicked, it appends the url with the modal link and does not popup.
Any suggestions?
Thanks
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Modals will convert the {modal} tags to <a> tags with the necessary attributes.
The Modals javascript will look for those <a> tags on pageload and add the modal functionality.
If you are adding links to your page content via javascript after (HTML) pageload, then Modals will probably not see these when it initially runs.
If this is the case, you need to re-initialize Modals after the new links are added to the HTML DOM. You can do that with:
Trevor R
Trevor R
I havent been able to re-initalize modals. Is there a specific location I should call the function?
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Sorry, it is outside my support to try and figure out for you how 3rd party scripts work and how you should use them.
Forum
Modal with datatables
Trevor R
Trevor R
{ data: "services.name_kroll",
render: function(data, type, row) {
return '{modal text='test'}'+row.services.name_kroll+'{/modal}';
}
},Any suggestions?
Thanks
Peter van Westen
ADMIN
Peter van Westen
ADMIN
The Modals javascript will look for those <a> tags on pageload and add the modal functionality.
If you are adding links to your page content via javascript after (HTML) pageload, then Modals will probably not see these when it initially runs.
If this is the case, you need to re-initialize Modals after the new links are added to the HTML DOM. You can do that with:
RegularLabs.Modals.init();
Please post a rating at the
Joomla! Extensions Directory
Trevor R
Trevor R
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" language="javascript"
<script type="text/javascript" language="javascript" src="../../Editor-PHP-2.0.9/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type="text/javascript" src="../../Editor-PHP-2.0.9/js/editor.jqueryui.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
dom: 'Bfrtip',
ajax: {
url: '.../../Editor-PHP-2.0.9/test/admin_services.php',
type: 'POST'
},
"language": {
"search": "Filter records:"
},
"table": "#example",
"fields": [ {
"label": "id:",
"name": "services.id"
}, {
"label": "test_id:",
"name": "services.test_id"
}
]
} );
$(document).ready(function() {
'use strict';
var table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: {
url: "../../Editor-PHP-2.0.9/test/admin_services.php",
type: "POST"
},
serverSide: true,
columns: [
{ data: "services.id",
visible: false
},
{ data: "services.pharmacy_id",
visible: false
},
{ data: "p.name",
visible: false
},
{ data: "services.category",
visible: false
},
{ data: "services.subcat",
visible: false
},
{ data: "services.file_kroll" ,
visible: false
},
{ data: "services.pin",
visible: false
},
{ data: "services.service_kroll",
visible: false
},
{ data: "services.name_kroll",
render: function(data, type, row) {
return '{modal html='test'}'+row.services.name_kroll+'{/modal}';
}
},
{ data: "services.allow_kroll",
className: "dt-body-center",
render : function (data, type, row) {
return '<a class"btn btn-primary" href="https://test.ca/" target="_blank"><button class="btn btn-large btn-block btn-primary" type="button">BOOK</button></a>';
}
},
{ data: "services.test10",
visible: false
},
{ data: "services.test10",
visible: false
},
{ data: "services.test9",
visible: false
},
{ data: "services.test8",
visible: false
},
{ data: "services.test7",
visible: false
},
{ data: "services.test6",
visible: false
},
{ data: "services.test5",
visible: false
},
{ data: "services.cvd",
visible: false
},
{ data: "services.test4",
visible: false
},
{ data: "services.test3",
visible: false
},
{ data: "services.test2",
visible: false
},
{ data: "services.fee", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ),
visible: false
},
{ data: "services.funding_status",
visible: false
},
{ data: "services.about",
visible: false
},
{ data: "services.tags",
visible: false
}
],
buttons: [ {
extend: 'columnsToggle',
columns: '.col2'
} ]
} );
} );
} );
</script>
</head>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>id</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>DESCRIPTION</th>
<th></th>
<th>LENGTH</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>phm_id</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
You can only post on the extension support forum if you have an active subscription and you
log in
Buy a Pro subscription
Buy a Pro subscription