i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});
Related
I get some data from JSONP file by below code:
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?' );
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
</html>
It works, but I need refresh data every 10 sec. I use setInterval function but console FireFox return error "ReferenceError: jsonp is not defined
(...channel-108.jsonp:1:1)". My code with setInterval:
setInterval( function () {
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?' );
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
}, 10000)
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
</html>
Where's the problem?
You are declaring the function inside the setInterval move it outside and it will work
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
setInterval(function() {
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?');
}, 10000)
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
I'm testing ckeditor.
I'm trying to create a ckeditor which fits the "div" where it's placed.
This is what I've tried, but only works on startup and not with resize window.
Is there an easy way to fit ckeditor the div where it's places?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/menu.css">
<script src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script>
function iniciar()
{
e= CKEDITOR.replace( 'editor1',
{ uiColor: '#CCEAEE' ,
on: { 'instanceReady' : function( evt )
{redimensionar();}
}
} );
}
var r;
function redimensionar(p1)
{
if (p1==1)
{ console.log("e: " + $("#").width() +','+$("#c1").height());
console.log("c1: " + $("#c1").width() +','+$("#c1").height());
e.resize($("#c1").width(),$("#c1").height());
}
else
{ if (r)
clearTimeout(r);
r=setTimeout(redimensionar, 500, 1);
}
}
</script>
</head>
<body class="easyui-layout" onload="iniciar()" onresize="redimensionar()">
<!-- Norte -->
<div data-options="region:'north'" style="height:10%">
My title
</div>
<!-- Centro -->
<div id="c1" data-options="region:'center'" style="height:80%; background:skyblue;">
<textarea id="editor1" >
<p>This is some <strong>sample text</strong>. You are using CKEditor.</p>
<p><iframe align="middle" frameborder="1" height="500" id="portada" longdesc="La gran portada" name="Portada" scrolling="yes" src="portada.html" style="background: green" title="La portada" width="500">Contenido iframe.</iframe></p>
<p> </p>
</textarea>
</div>
<!-- Pie -->
<div data-options="region:'south'" style="height:30px">
Foot
</div>
</body>
</html>
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
Is there any alternative which can make struts2 jqgrid better in IE6. The images are sample images.
In my application I have developed several grids using plugins All are working fine in all browsers but looking weird in IE6
You can find the differences between them IN IE6 header columns looks weird and that hide/unhide button also missing ..
Please help me how to fix this thing My application has to work in IE6
versoins I am using
Struts2-core 2.3.8
Struts2-jquery-grid-3.6.1
Struts2 jQuery-3.6.1
This one is the html code by clicking on view source
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="struts2,jquery, hibernate, plugin,showcase, grid" />
<meta http-equiv="description" content="Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins" />
<title>Struts2 jQuery Grid Plugin Showcase - 3.7.0</title>
<link href="/struts2-jquery-grid-showcase-3.7.0/styles/flexible-grids.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="/struts2-jquery-grid-showcase-3.7.0/yaml/core/iehacks.min.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-ui.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.form.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.subscribe.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/struts2/jquery.struts2.min.js?s2j=3.7.0"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.7.0";
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath = "/struts2-jquery-grid-showcase-3.7.0/struts/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.7.0");
});
</script>
<link id="jquery_theme_link" rel="stylesheet" href="themes/showcase/jquery-ui.css?s2j=3.7.0" type="text/css"/>
<script type="text/javascript">
var employee_detail_url = '/struts2-jquery-grid-showcase-3.7.0/employees-detail.action;jsessionid=3934431750DCFB5887508B8F186FD38D';
</script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/js/showcase.js; jsessionid=3934431750DCFB5887508B8F186FD38D"></script>
</head>
<body>
<header class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-wbox" style="padding: 5px 0 0 0;">
<div>
<h1 class="ui-state-default" style="background: none; border: none; margin: 0;">Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins</h1>
<h4 class="ui-state-default" style="background: none; border: none;">Struts2 jQuery Plugin - Version 3.7.0 / Full Hibernate Plugin - Version 2.2.1 GA</h4>
</div>
</div>
</header>
<nav id="nav" class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-hlist">
<ul id="navlist">
<li><a id="gridlink" href="javascript:void(0)">Grid (Editable)</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridlink = {};
options_gridlink.jqueryaction = "anchor";
options_gridlink.id = "gridlink";
options_gridlink.targets = "main_content";
options_gridlink.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridlink'),options_gridlink);
});
</script></li>
<li><a id="gridsubgridlink" href="javascript:void(0)">Grid with Subgrid</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridsubgridlink = {};
options_gridsubgridlink.jqueryaction = "anchor";
options_gridsubgridlink.id = "gridsubgridlink";
options_gridsubgridlink.targets = "main_content";
options_gridsubgridlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- subgrid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridsubgridlink'),options_gridsubgridlink);
});
</script></li>
<li><a id="griddndlink" href="javascript:void(0)">Grid with Drag and Drop</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_griddndlink = {};
options_griddndlink.jqueryaction = "anchor";
options_griddndlink.id = "griddndlink";
options_griddndlink.targets = "main_content";
options_griddndlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- dnd.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#griddndlink'),options_griddndlink);
});
</script></li>
<li>Struts2 jQuery Plugin</li>
<li>Full Hibernate Plugin</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div class="ym-wrapper">
<div id="main_content"
class="ym-wbox"
>
<img id="indicator" src="images/indicator.gif" alt="Loading..."/>
</div><script type='text/javascript'>
jQuery(document).ready(function () {
var options_main_content = {};
options_main_content.jqueryaction = "container";
options_main_content.id = "main_content";
options_main_content.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#main_content'),options_main_content);
});
</script>
</div>
</div>
<footer>
<div class="ym-wrapper">
<div class="ym-wbox">
<p style="text-align: center;">
Written by Johannes Geppert and José Yoshiriro<br/>
Layout based on YAML
</p>
</div>
</div>
</footer>
</body>
I'm trying-out qUnit for the first time but can't get any tests to run. I created an HTML file added links to the qunit CSS and JavaScript files but when I call test nothing happens. The test run states "0 tests of 0 passed, 0 failed". Any ideas? Here's the source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test("a basic test example", function() {
ok( true, "this test is fine" );
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
You need to have a html file like this
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link href="../../Content/qunit.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/qunit.js" type="text/javascript"></script>
<script src="yourtestfile.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">Test title</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar">
</div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="qunit-fixture">
<div id="container"></div>
</div>
</body>
</html>
Make a seperate js file which contains your tests. The file should look like
(function ($) {
module("Your module name", {
beforeEach: function () {
//your setup code goes here
},
afterEach: function () {
//your teardown code goes here
}
});
test("This is your first test", function (assert) {
assert.ok(true, "this test passed");
});
})(jQuery);
And include this to your html page.
And simply view the html page in a browser.
I warn you, qunit is addictive! :)