I am trying to get another page to call into a div on a page, I have done this multiple times before and had no problem with it but it just refuses to work this time.
Can anyone see a reason why it is not loading into my div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Test page</title>
<script src="js/jquery.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function new(){
$.ajax({
type: "GET",
url: "map.php",
success: function(msg){
$("#map").html(msg);
}
});
}
</script>
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
</head>
<body onLoad="new()">
<div id="map" style="width: 40px; height: 100px; background: blue;"> </div>
</body>
</html>
Any help would be much appreciated
Thank you in advance!
I don't think you can name a function new as this is a reserved keyword. Try renaming it to something that's not a reserved keyword e.g loadNewPageData() .
Related
I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))
I would like to combine the two JavaScript libraries/frameworks/scripts scriptaculous.js and validationEngine.jquery but I don’t have a clue how to do it.
My code is like this:
<head>
...
// auto complete
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
// validation
<script type="text/javascript" src="query-1.9.1.js"></script>
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-de.js"></script>
// auto complete
<script type="text/javascript">
Event.observe(window, 'load', function() {
new Ajax.Autocompleter('architect', 'suggestion', ‚'ArchitectQuery.php', {minChars: 3});
});
</script>
// validation
<script type="text/javascript">
$(document).ready(function(){
$("#form-validation").validationEngine();
});
</script>
...
</head>
<body>
...
<input type="text" name="architect" size="45" maxlength="100" id="architect" data-validation-engine="validate[required, minSize[3]]" />
<div id="suggestion"></div>
...
</body>
I guess I have to somehow add the ‚Event.observe‘ part to the validationEngine - but how?
Thanks
Kashuda
First of all, you have to use $.noConflict();, because prototypejs use also $.
<script type="text/javascript">
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#form-validation").validationEngine();
});
Domus71
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! :)
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;
});
});
I have a html-document, in which I want to load a table from an extern html-file. In this file should be another load to the same file. When I start this, I get an enless loop.
Can anybody tell me how I can still end the loading after 10 times?
Ok, here is some of my code
html-document:
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function table(){
$.ajax({
url: "table.html",
success: function(data) {$('#test1').html(data);},
error: function(){alert('no!');},
});
</script>
</head>
<body>
<input type="Button" onclick="table();" value="KNOPF" id="knopf"/>
<p id="test1">TEST </p>
</body>
</html>
table
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "table.html",
success: function(data) {
$('#test1').html(data);},
error: function(){alert('no!');},
});
</script>
</head>
<body>
<p id="test1"><p>
<table border="1">
<tr><td>1</td></tr>
</table>
</body>
</html>
It might be probably server-side redirecting/header redirecting. Check if you have some redirects in your script(s)