Could be an out-of-date web page. It's on DataTables Markdown. Here's the passage. Note the last line.
.....
8. DataTables Markdown
Markdown is a plain text formatting syntax, initially created by John Gruber and now widely used on the web. It is designed to provide an easy to use set of formatting rules which can be applied to a document, converting it from an easily readable and editable plain text format to HTML.
The DataTables project uses an extended form of Markdown in an number of areas:
Forum posts (note this is still in development and not yet deployed!)
.....
When I click on Column 1, it opens the row-detail view to display a configuration form. The configuration form has many dropdowns, some of them multi-select. I need to persist the settings, and thus programatically set them them on startup. I can't get it to work. Here's my code snippet.
var document = JSON.parse(row.data().applicationConfiguration);
row.child(formatConfiguratorUI(row.data(), document)).show();
tr.closest('#ModelsNameFinder').val(document.ModelsNameFinder.split('|'));
tr.addClass('shown');
What am I missing to have the dropdowns automatically display their prior settings?
I've not followed this thread I'm sorry to say, but I did just see the comment about the forum posts. Thanks for pointing that out - I'd forgotten to update that page when I enabled Markdown for the forum (years ago now!). I've fixed it now.
I was able to get this to work. So I can generate a Form as HTML text, add it as a child row, which when opened, is fully realized DOM, which I can then map to with an [on ('click'...)] event listener to respond to widget clicks, like a Drop Down Multi-select. Almost there. More details yet to work through.
I was able to capture the checkbox clicks to register and deregister configuration changes, using OnSubmit event to push click updates into the SEND ajax call, so this item (config form dropdown multiselect in row-detiail) is now closed.
I added the Transaction Menu and used Sparklines to show swarm server load telemetry data. I used the jQuery Sparkline Library which works like a charm - easy to use. Rich feature set. You will need to unwrap the object passed the sparkline chart call to expose the innerHTML property so it can get the sparkline classname, which it uses to register the array you are passing it from Datatables
function getSparkLineArray(o, className) {
var slArray = [];
for (var i = 0; i < o.length; i++) {
if (has(o[i].className, className)) {
slArray.push(o[i].innerHTML.split(','));
}
}
return slArray;
}
Finally, I added a Calendar UI edit View to the config menu row-detail expansion. The code is being generated properly, and I used callback like I did for DDL widgets and the sparklines, but I can't get the Calendar view to render as a DOM object. I will create a JSBin to see if I can isolate.
Doesn't look like you are running any of the JS that is needed to initialize the events and the calendars. You will need to use some or maybe all the code in the JS panel of the Codepen example you provided.
Yes - sorry about the <link> in place of <script>.
I was trying to use the minimal coding to isolate. I removed too much. So I decided to simplify even more, to build from the bottom up, so I isolate as I build. I removed all the Datatables detail - a clean slate. And added the code in the CodePen site verbatim. There are no errors in console, or in Chrome Debugger. In this JSBin, the calendar is placed in a table cell, but the effect is the same if it's not.
There is more detail showing, but still only parts of the calendar. No borders. It looks like it is missing or conflicting CSS detail. But all the CSS detail is in place, and all the Datatables CSS is removed. Here's the JSBin.
I verify that it's not the DataTables customization of JSBin that was causing the issue, I created a pure JSBin (jsbin.com). The same effect. Could it be an issue with JSBin?
I decided to isolate even more, I downloaded the JSBIn and ran it on OSX under Safari. I get the same lack of borders in the pure browser, not running in JSBin.
CONCLUSION?
I think this means, even though I copied all the detail from the Codepen site, including references from the SETTINGs panels, there is still something missing. Its not a JSBin issue, or my DataTables implementation. The issue is with the code from the CodePen site, where it runs apparently because of some other code I don't have access to. Is my conclusion valid?
So I copied that code into a DataTables implementation of JSBin, cleared all the code, and pasted the code from the working JSBin.com verbatim, and I get the same issue - a partially displayed calendar, like I get from the other implementations in <live.datatables.com> and on my Dev Machine.
So is it possible there is something in the <live.datatables.net> JSBin, with the runner code implementation, not exposed to the JSBin interface, that is causing the issue?
I noticed an additional script in the HTML I had copied in, which was specific go the download from the export, so I commented it out and I got the calendar displayed in <live.datatables.net>
The JSBin icon continues to spin in this version, and the drag and drop doesn't work. So it's not yet usable. But now it at least does display. I'll do some more work to see if I can clean the codepen export version get it working in <live.datatables.net>
This is a long thread.....Looking forward to closing it.
On my dev network, I am using Angular. This is creating layered dependency issues. For Calendar insertions, others have gotten the same error I am getting and there are solutions. It seems to be hinged around Angular using jqLite instead of the full jQuery, Reordering scripts can sometimes solve the issue. If not, an edit on Calendar init seems to do the trick, per this link. This will be my next focus, having gotten this far by building from the bottom up:
...back on the form Submission..I tried all ways of intercepting the Form Submit. Javascript, HTML, and jQuery methods, and none worked. I got it to work by using the following Form tag parameter.
"<form action=\"javascript:UpateParameters();\">"
There is a lot of fussy work to making it all fit...not on the part of Datatables, which is very well behaved, but on the other layers - each which behaves within their own framework, but often don't play well together.
From there I'll use the UpdateParameters() javascript method to push the click updates down to the server through an Ajax call.
...
Once I complete this feature, then the last issue to resolve in the UI is getting jQuery FullCalendar widget to work under AngularJS. There is a conflict between Angular and FullCalendar, including it's usage of moment.js, that I haven't yet been able to resolve. None of the solutions on the forums have worked for me...
More and more i identify with Ben Farrell (Web Components In Acton), that its easy to get Framework Fatigue. I'm living in a lot of layers that can bump in to each other. it's sorting through the Framework behaviours, keeping them straight, each having their own version of jQuery, Javascript and CSS, which tools like Bower and NPM help but don't always resolve. Double that when you spend a lot of time on Hub middleware and backend Swarm servers in an integrated .NET environment. It feels like whiplash when I surface to UI.
My preference, would be Web Components with DataTables and DCJS.D3, and dump AngularJS at this point.
I finally got the Dropdown Multi-select click changes captured and merged into the form data, packaged and shipped thru Ajax to the server to update mongodb. That completes this row-detail view.
One more widget left (Transaction Management View) - resolving the library conflict of FullCalendar with AngularJs. Once that's resolved, this thread can close.
Thank you for all your help as I navigated through the framework layers. I continue to think that flattening all the framework layers through Web opponents to remove all the side-effects will be project in the near future.
Answers
You needed to put the three ticks at the end of you code too. See above.
Kevin
Could be an out-of-date web page. It's on DataTables Markdown. Here's the passage. Note the last line.
.....
8. DataTables Markdown
Markdown is a plain text formatting syntax, initially created by John Gruber and now widely used on the web. It is designed to provide an easy to use set of formatting rules which can be applied to a document, converting it from an easily readable and editable plain text format to HTML.
The DataTables project uses an extended form of Markdown in an number of areas:
Forum posts (note this is still in development and not yet deployed!)
.....
When I click on Column 1, it opens the row-detail view to display a configuration form. The configuration form has many dropdowns, some of them multi-select. I need to persist the settings, and thus programatically set them them on startup. I can't get it to work. Here's my code snippet.
What am I missing to have the dropdowns automatically display their prior settings?
Bain
I should add that i also tried table.draw() after the update:
var document = JSON.parse(row.data().applicationConfiguration);
row.child(formatConfiguratorUI(row.data(), document)).show();
tr.closest('#ModelsNameFinder').val(document.ModelsNameFinder.split('|'));
tr.addClass('shown');
table.draw();
I've not followed this thread I'm sorry to say, but I did just see the comment about the forum posts. Thanks for pointing that out - I'd forgotten to update that page when I enabled Markdown for the forum (years ago now!). I've fixed it now.
Allan
I am at the point where I can put all of this in the JSBin, so I'll start that process now
I should also add that I'm doing all this within AngularJS 1, which throws lots of events.
I was able to get this to work. So I can generate a Form as HTML text, add it as a child row, which when opened, is fully realized DOM, which I can then map to with an [on ('click'...)] event listener to respond to widget clicks, like a Drop Down Multi-select. Almost there. More details yet to work through.
```js
drawCallback: function () {
$('.' + graphType).sparkline(getSparkLineArray($('span.' + graphType).toArray(), graphType), sparklineGraphSpecs[graphType]);
}
function getSparkLineArray(o, className) {
var slArray = [];
for (var i = 0; i < o.length; i++) {
if (has(o[i].className, className)) {
slArray.push(o[i].innerHTML.split(','));
}
}
return slArray;
}
Still not able to get markdown to work in the comment box. See above markdown preface code in front of the code block.
Finally, I added a Calendar UI edit View to the config menu row-detail expansion. The code is being generated properly, and I used callback like I did for DDL widgets and the sparklines, but I can't get the Calendar view to render as a DOM object. I will create a JSBin to see if I can isolate.
Three back-ticks, new line, code block, new line, three back-ticks.
Ahh. I didn't close the 3 backpacks. So its like a tag.
Tx
Here is the JSBin I created to display a calendar UI in the Detailed Row. The calendar UI is only partially rendered. What am I missing?
http://live.datatables.net/jegeqoro/1/edit#J:L128
Here's the link to the widget
//https://codepen.io/subodhghulaxe/pen/myxyJg?editors=1111
I log the Calendar UI Html generated to the console, so you can see that its exactly as required by the Widget. Here is is for your reference
Looks like there are a few issues in your example code. You are loading the fullcalendar and moment JS files incorrectly. You have:
They should be loaded with
scripttags:Doesn't look like you are running any of the JS that is needed to initialize the events and the calendars. You will need to use some or maybe all the code in the JS panel of the Codepen example you provided.
Kevin
Yes - sorry about the <link> in place of <script>.
I was trying to use the minimal coding to isolate. I removed too much. So I decided to simplify even more, to build from the bottom up, so I isolate as I build. I removed all the Datatables detail - a clean slate. And added the code in the CodePen site verbatim. There are no errors in console, or in Chrome Debugger. In this JSBin, the calendar is placed in a table cell, but the effect is the same if it's not.
There is more detail showing, but still only parts of the calendar. No borders. It looks like it is missing or conflicting CSS detail. But all the CSS detail is in place, and all the Datatables CSS is removed. Here's the JSBin.
http://live.datatables.net/disaxepa/1/edit
I verify that it's not the DataTables customization of JSBin that was causing the issue, I created a pure JSBin (jsbin.com). The same effect. Could it be an issue with JSBin?
http://jsbin.com/sutaqapezu/edit?output
I decided to isolate even more, I downloaded the JSBIn and ran it on OSX under Safari. I get the same lack of borders in the pure browser, not running in JSBin.
CONCLUSION?
I think this means, even though I copied all the detail from the Codepen site, including references from the SETTINGs panels, there is still something missing. Its not a JSBin issue, or my DataTables implementation. The issue is with the code from the CodePen site, where it runs apparently because of some other code I don't have access to. Is my conclusion valid?
One more step to isolate. I signed into CodePen and exported the code. it ran perfectly in Safari on OSX.
I created a pure JSBIn with the code that works in Safari on OSX, and it worked as well.
http://jsbin.com/sutaqapezu/edit?html,css,js,output
So I copied that code into a DataTables implementation of JSBin, cleared all the code, and pasted the code from the working JSBin.com verbatim, and I get the same issue - a partially displayed calendar, like I get from the other implementations in <live.datatables.com> and on my Dev Machine.
http://live.datatables.net/niruhejo/1/edit
So is it possible there is something in the <live.datatables.net> JSBin, with the runner code implementation, not exposed to the JSBin interface, that is causing the issue?
Hmmm. Lots of moving pieces.
I noticed an additional script in the HTML I had copied in, which was specific go the download from the export, so I commented it out and I got the calendar displayed in <live.datatables.net>
The JSBin icon continues to spin in this version, and the drag and drop doesn't work. So it's not yet usable. But now it at least does display. I'll do some more work to see if I can clean the codepen export version get it working in <live.datatables.net>
This is a long thread.....Looking forward to closing it.
Here is the code I commented out.
and the css
That works, even when in a table cell, but with no Datatables code yet.
For the Drag and Drop to work, you must close all the code windows [HTML,CSS,Javascript]
Now I will add the Datatables code back in, building up to where I was before, to isolate what caused it to not work.
Found it. its the 'prefetch' that makes the difference in the calendar js libraries
On my dev network, I am using Angular. This is creating layered dependency issues. For Calendar insertions, others have gotten the same error I am getting and there are solutions. It seems to be hinged around Angular using jqLite instead of the full jQuery, Reordering scripts can sometimes solve the issue. If not, an edit on Calendar init seems to do the trick, per this link. This will be my next focus, having gotten this far by building from the bottom up:
https://github.com/angular-ui/ui-calendar/issues/267
...back on the form Submission..I tried all ways of intercepting the Form Submit. Javascript, HTML, and jQuery methods, and none worked. I got it to work by using the following Form tag parameter.
There is a lot of fussy work to making it all fit...not on the part of Datatables, which is very well behaved, but on the other layers - each which behaves within their own framework, but often don't play well together.
From there I'll use the UpdateParameters() javascript method to push the click updates down to the server through an Ajax call.
...
Once I complete this feature, then the last issue to resolve in the UI is getting jQuery FullCalendar widget to work under AngularJS. There is a conflict between Angular and FullCalendar, including it's usage of moment.js, that I haven't yet been able to resolve. None of the solutions on the forums have worked for me...
More and more i identify with Ben Farrell (Web Components In Acton), that its easy to get Framework Fatigue. I'm living in a lot of layers that can bump in to each other. it's sorting through the Framework behaviours, keeping them straight, each having their own version of jQuery, Javascript and CSS, which tools like Bower and NPM help but don't always resolve. Double that when you spend a lot of time on Hub middleware and backend Swarm servers in an integrated .NET environment. It feels like whiplash when I surface to UI.
My preference, would be Web Components with DataTables and DCJS.D3, and dump AngularJS at this point.
I finally got the Dropdown Multi-select click changes captured and merged into the form data, packaged and shipped thru Ajax to the server to update mongodb. That completes this row-detail view.
One more widget left (Transaction Management View) - resolving the library conflict of FullCalendar with AngularJs. Once that's resolved, this thread can close.
Thank you for all your help as I navigated through the framework layers. I continue to think that flattening all the framework layers through Web opponents to remove all the side-effects will be project in the near future.