processing image is not called on pagination jquery datatable server side
<script src="Assets/DataTables-1.9.0/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#example').dataTableDataTable({
"language": {
"processing": "Processing...",
"LoadingRecords": "Processing..."
},
});
</script>
</body>
</html>
Maybe in chrome，you can changing the z-index in css:
.dataTables_processing {
z-index: 1000;
}
Related
I'am visiting certain websites with phantomjs. Is it possible to run functions from sites environment in page.evaluate method? Can you provide and example of correct usage.
Yes, of course it is possible. You just call the site function inside of page.evaluate. Consider the example:
example.com html
<html>
<head>
</head>
<body style="background-color: white">
<p>A page</p>
<script>
function makeRed() {
document.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
PhantomJS script
var page = require('webpage').create();
page.viewportSize = { width: 600, height: 300 };
page.open('http://example.com', function() {
page.evaluate(function(){
makeRed();
});
setTimeout(function(){
page.render('red.png');
phantom.exit();
}, 1000);
});
Result:
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment
I am not a jQuery person, wish I was. I have fiddled with no conflict, but it still lets only one of the scripts work at a time, not both. I am using a scroll to jquery script and colorbox (like lightbox) Here is my code. Any help is awesome.
<!--jquery scroll-->
<script src="js_scroll/jquery.js"></script>
<script src="js_scroll/jquery.scrollTo.js"></script>
<script src="js_scroll/jquery.nav.js"></script>
<script>
$(document).ready(function() {$('#nav').onePageNav();});
</script>
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</body>
If you want to load multiple jQuery libraries, this is the way.
<script src='jquery-1.3.2.js'></script>
<script>
var $j132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var $j142 = jQuery.noConflict();
</script>
now use $j132() for jQuery 1.3.2 operations and $j142() for jQuery 1.4.2
I had the same problem with ColorBox and ScrollBar I solved by using the
<script>var $jQuery171 = $.noConflict(true);</script> after my scroll bar java
the final results was
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
and then come the scroll bar java
<!--Scroll Plans-->
<link rel="stylesheet" type="text/css" href="../../../siteroots/aboutScroll/general.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>var $jQuery171 = $.noConflict(true);</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
})
</script>
<!--End Scroll Plans-->
I used the <script>var $jQuery171 = $.noConflict(true);</script> in the scroll Java only and it's working fine now.
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});