I'm using datatables, a plugin in JavaScript to sort, filter, search... of records in a table.
Searching in some foruns, I saw if I set this line below in config/enviroments/production.rb
config.serve_static_assets = false
to true
config.serve_static_assets = true
worked and really worked.
But I do not do that, because another JavaScripts works and that way is not recommended.
So, I tested another way, I copied all content in datatables.js and cut directly in my view.
The firts line are the firsts line of datatables.js.
<script type="text/javascripts">
(function(i,zap,p){i.fn.dataTableSettings=[]; var D=i.fn.dataTablesSettings;i.fn...
...etc...
$("#ranking").dataTable({
sPaginationType: "full_numbers",
iDisplayLength: 20,
bFilter: true,
aLengthMenu: false,
bLengthChange: false,
bAutoWidth: false,
/* fixa os valores da primeira coluna (index) */
fnDrawCallback: function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered ){
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ){
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
aoColumnDefs: [
{ bSortable: false, aTargets: [ 0 ] },
{ aTargets: [ 14 ], bVisible: false }
],
aaSorting: [[ 13, 'desc' ]],
oLanguage: {
sUrl: "/javascripts/i18n/data_tables_lang.json"
}
});
</script>
And again, did not works in production.
I wanna know what does not work in production, well, I copied the code, I'm not using anyother gem like Jammit.
Why does not working?
If that is your exact code, your script tag appears to be incorrect:
<script type="text/javascripts">
should be
<script type="text/javascript">
Remove the "s" from the end of "javascripts," and see if that works.
Related
I am using highchart export server for exporting the highchart as psd in itextsharp.
I have created a handler that will give me the highchart as png image this image is rendered into the itext pdf.
So my rendering is: Convert the highchart to image using json file that will be used for rendering it into the pdf.
Expected: http://jsfiddle.net/9owxLgm9/1/
The problem is I am not able to add the code that will prevent the rendering of 0 values in the highchart pdf
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.percentage, 0) + ' %';
}
},
so my pdf images render something like this
http://jsfiddle.net/9owxLgm9/2/
ie it also shows the 0 values.
Is there any way i can remove the 0 based values in the json file
I don't know if it's really the result you want, but you can remove empty values / stats labels from the pie chart with this simple formatter:
formatter: function() {
if (this.y != 0) {
return this.y +'%';
} else {
return null;
}
}
Your updated demo here.
The above code will output the percentages as label value, so if you want to keep the names as label, you simply need to replace return this.y +'%'; by return this.point.name;
Here's another example with names as label (also following your fiddle).
The solution was to add a formatter function
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {
"enabled": true,
"formatter": "function () {if (this.y != 0) { return Highcharts.numberFormat(this.percentage, 0) + ' %';} }",
"format": "{point.percentage:.2f} %",
"distance": 4,
"filter": { "property": "percentage", "operator": ">", "value": 1}
},
"showInLegend": true
}
I have this code
$(function() {
$(window).on("swipeleft", jqmForward).on("swiperight", jqmBack);
});
function jqmBack(e) {
var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
if (prevpage.length > 0)
$.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}
function jqmForward(e) {
var nextpage = $('div.ui-page-active').nextAll('div[data-role="page"]');
if (nextpage.length > 0)
$.mobile.changePage($(nextpage[0]), "slide", false, true);
}
But the forward function never works because apparently jqm deletes the latest div.ui-page when you go back.
Is there a way to keep the div.ui-page to let you go forward after you accidentally swipe right (ie. go back)?
I am using jQuery Mobile 1.4.0
The solution is to have
$(function () {
$.mobile.page.prototype.options.domCache = true;
});
(see Caching pages in DOM). But that rises another problem.
Here is the script:
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/upload2.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : false,
'onError' : function (event,ID,fileObj,errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
},
'fileExt' : '*.wma;*.mp3',
'fileDesc' : 'Audio Files',
'scriptData' : {'fileID':'20541','hash':'2e1177c09a6503d11b1a401177022de50409e96279a2dbb11c5aef5783d231c975da22e2ddfd480b5e050f4fb09d9b7caa47a71ab0150b7c462b06d06e61e664','hashit':'fe458d423c6d1c18248b73dad776a9d4a6ff1ac9fc4b07674b3715b4992a80b9d2b4e3a340973642497d66ac8e8d57d7aa737f8911a784888b164e84961f177a'},
'onComplete' : function(eventID,ID,fileObj,response,data) {
window.location = "http://www.messageshare.com/welcome/file_farm/20541/fe458d423c6d1c18248b73dad776a9d4a6ff1ac9fc4b07674b3715b4992a80b9d2b4e3a340973642497d66ac8e8d57d7aa737f8911a784888b164e84961f177a";
}
});
});
// ]]>
</script>
I need to change 'auto' from false to true.
Since all those scriptData values seem liable to change from page load to page load, what you'd want to do is intercept that <script> node on the fly, clone it and only change 'auto' to true, using RegEx.
On Firefox Greasemonkey, you can do that with the stupefyingly brilliant (^_^) checkForBadJavascripts utility. Like so:
// ==UserScript==
// #name _Modify JS as it's loaded
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://gist.github.com/raw/2620135/checkForBadJavascripts.js
// #run-at document-start
// #grant GM_addStyle
// ==/UserScript==
/*- The #grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
function replaceTargetJavascript (scriptNode) {
var scriptSrc = scriptNode.textContent;
scriptSrc = scriptSrc.replace (
/'auto'\s+\:\s+false/,
"'auto' : true"
);
addJS_Node (scriptSrc);
}
checkForBadJavascripts ( [
[false, /'auto'\s+\:\s+false/, replaceTargetJavascript]
] );
$("#ddl").change(function () {
var strSelected = "";
$("#ddl option:selected").each(function () {
strSelected += $(this)[0].value;
});
if (strSelected.length != 0) {
var url = "/Reseller/MailPartial/?resellerId=" + strSelected;
$("#mail").empty();
$("#mail").load(url);
}
this is code I use to load partial in my View (partial is only 1 label and 1 editorfor,the one that should load tinymce). I have [UIHint("tinymce_jquery_full"), AllowHtml] in my model and tinymce editor loads perfectly normal in other views. But when I use partial views it comes back as plain text area. How to fix this?
thanks
EDIT:
I figured it out,ijaz was almost correct ;)
I needed to reinit tinymce like ijaz said but even when I called INitTinyMCE like ijaz said it wouldn't have mattered because the element hasn't loaded yet to html and I have no idea why. Solution was to call initTinyMce after the element has loaded to the page.
I tried to use
$("#mail").load(url, InitTinyMCE());
but it didn't work.
Any ideas how to call InitTinyMCE() after the element has loaded? It's working now but it's relying on pressing another button to trigger InitTinyMCE()
EDIT again
I changed code to pure ajax,no more .load()
sorry for being so messy :)
In the above code,it seems that [UIHint] is not applied properly. so get things work, kindly initialize the TinyMCE manualy, i mean change you code as ,
$("#ddl").change(function () {
var strSelected = "";
$("#ddl option:selected").each(function () {
strSelected += $(this)[0].value;
});
if (strSelected.length != 0) {
var url = "/Reseller/MailPartial/?resellerId=" + strSelected;
$("#mail").empty();
$("#mail").load(url);
**Re-Init TinyMCE**
InitTinyMCE();
}
function InitTinyMCE()
{
$('##ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({
// Location of TinyMCE script
script_url: '#Url.Content("~/Scripts/tinymce/tiny_mce.js")',
theme: "advanced",
height: "170",
width: "240",
verify_html : false,
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1: "undo, redo,pasteword,|, bold, italic, underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,image, emotions" ,
theme_advanced_buttons2: "charmap, bullist, numlist,|,formatselect,fontselect,fontsizeselectcode, |,tiny_mce_wiris_formulaEditor, fullscreen",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "#Url.Content("~/Scripts/tinymce/css/content.css")",
convert_urls : false,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
});
}
I want to create "CRUD" functions by calling a modal form by clicking on a row in Datatables.
I've been at this for hours traversing through each step of my code and it seems I'm getting a conflict between my JQ-UI and Datatables. I found several examples, including the Datatables example for "live" functions, where you can initialize a table and call a simple jquery function.
I'm using:
code.jquery.com/jquery-1.9.1.js
code.jquery.com/ui/1.10.2/jquery-ui.js
../DataTables-1.9.4/media/js/jquery.dataTables.js
This example will give me the cursor, then makes the table "jump" across the page.
Does anyone have a working example or a fiddle I can experiment with?
function openDialog() {
$("#dialog-modal").dialog({
height: 140,
modal: true
});
}
/* Init DataTables */
$('#example').dataTable();
/* Add events */
$('#example tbody tr').on('click', function () {
$('#example tbody tr').css('cursor', 'pointer');
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
/*
if (sGrade == "A")
sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
else if (sGrade == "C")
sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
else if (sGrade == "X")
sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser + ' will provide an undefined level of CSS support.';
*/
openDialog();
//alert( sTitle )
});
A little sleep and another stab at this yielded a solution that at least solves the Datatable Dialog issue, I'll have to assume that any other issues I was having lies the other add-ins that I included. So to me this is solved.
The answer was 99% in this post - thanks to the author for the great working example.
I modified their link solution, combined with Datatables "live" solution example with variables, and was able to successfully pass data to a working dialog that works with pagination as the previous link explains.
This set up would allow me to create JQuery-UI Modal Forms, pass the ID from mySQL table column, and execute the form that's handing the Server Side PHP CRUD functions I needed.
(I can't take credit for any part of this, other than time spent making sure it worked).
The working example is taken straight from Datatables "live events" example, should be easy to drop in if you remove the sAjaxsource and go with a plain Datatable..
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"bStateSave": true,
"sPaginationType": "full_numbers",
"sAjaxSource": " /*your data source page here*/ "
} );
/* Add events */
$("body").on("click", "#example tbody tr", function (e) {
e.preventDefault();
var nTds = $('td', this);
//example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
var targetUrl = $(this).attr("href");
$('#table-dialog').dialog({
buttons: {
"Delete": function() {
window.location.href = targetUrl;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
//simple dialog example here
$('#table-dialog').text(dialogText ).dialog("open");
});