$.ajax never ending loop stop - ajax

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)

Related

Lazy Loading a service using oclazyload

This is index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
<script src="testApp.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<button ng-click="fun()">Start</button>
</div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$scope.fun=function(MyService){
$ocLazyLoad.load("testApp.js").then(function() { //loading a module
console.log('loaded!!'+$scope);
var el, elToAppend,elToAppend2;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope); //appending it to div
el = angular.element('#example');
console.log(el);
el.append(elToAppend)
//el.append(elToAppend2);
}, function(e) {
console.log('errr');
console.error(e);
})
}
});
</script>
</body>
</html>
The above code is the module which is to be loaded at run time. Able to load Directive but need some help to load service.
How to laxyload the service defined in testApp.js?
Please help me out with this

d3.xhr example or AJAX d3's way

I've been looking for an example of updating data with d3.xhr but have not seen anything obvious, or at least of my level of understanding. The following 2 links are close but no cigar:
from stackoverflow
from mbostock’s block
I look around more and found this example in jquery and php. I tried it and understand the code. I would appreciate if you give me an equivalent code in d3.xhr or d3.json. BTW, what is different between d3.xhr and d3.json, and when to use what? Thanks in advance.
<?php
// AJAX & PHP example
// http://iviewsource.com/codingtutorials/learning-how-to-use-jquery-ajax-with-php-video-tutorial/
if ($_GET['ip']) {
$ip = gethostbyname($_GET['ip']);
echo($ip);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Get Reverse IP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
Please enter a domain name
<input type="text" id="searchip">
<div id="resultip"></div>
<script>
$(document).ready(function() {
$('#searchip').change(function(){
$.ajax({
type: "GET",
url: "ajax.php",
data: 'ip=' + $('#searchip').val(),
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
}); //document.ready
</script>
</body>
</html>
I found the solution. In fact it has less coding, :) I sincerely hope that the answer would be useful to someone.
<?php
// AJAX & PHP example
if ($_GET['ip']) {
$ip = gethostbyname($_GET['ip']);
echo($ip);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Get Reverse IP</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
Please enter a domain name
<input type="text" id="searchip">
<div id="resultip"></div>
<script>
d3.select('#searchip').on("change", function() {
d3.xhr('xhr.php?ip='+this.value, function(data) {
d3.select('#resultip').html(data.response);
})
});
</script>
</body>
</html>

Combine scriptaculous.js and validationEngine.jquery

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

AJax will not display a text file onto the screen?

I am new to AJAX and am experimenting with a simple page that should show a txt file into a specific location. At this point it does not show the vlist.txt file.
Question: Why does this code not display the file (vlist.txt)?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("C:\Users\itpr13266\Desktop\vlist.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
New Code that was Tried.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load(function() {alert( "Load was performed." ););
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
No alert box was displayed so I am not sure that it is even getting to that point.
$().load() can't be used with a local file path like C:\Users\itpr13266\Desktop\vlist.txt.
Put your file on a web server and your code will most likely work.

Jquery/ajax page call not working

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() .

Resources