Solved

cannot get ajax response into div

Posted on 2013-06-05
9
405 Views
Last Modified: 2013-06-05
Hi

I have the following periodicUpdater that should poll a url and append the results back to the results <div>

I cannot get this to return anything although the page I call loggs that it is getting polled.

What I want this (once its working) to do is look at my database, query and push the results back. ( i can grab everything just cant seem to get it back ;(

If anyone else has a better periodicUpdater I'd be greatful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Periodical Updater for jQuery</title>
    
    <style type="text/css">
        body{
            background-color: #c6d9e2;
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
        }
    
        #wrapper{
            width:800px;
            margin:0 auto;
        }
        
        #content{
            background-color:white;
            text-align:justify;
            padding:10px;
            border: 1px solid #BBB;
        }
        
        #results{
            height:200px;
            overflow:auto;
        }
        
        h1, h2, h3{
            color: #49176D;
        }
    </style>
    
  
  
</head>

<body> 
	<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.periodicalupdater.js"></script>
    <script type="text/javascript" src="../js/jquery_updater.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
		
			$.PeriodicalUpdater('../getLatestItems.php', {
			method: 'get',          // method; get or post
			data: '',               // array of values to be passed to the page - e.g. {name: "John", greeting: "hello"}
			minTimeout: 1000,       // starting value for the timeout in milliseconds
			maxTimeout: 8000,       // maximum length of time between requests
			multiplier: 2,          // the amount to expand the timeout by if the response hasn't changed (up to maxTimeout)
			type: 'text',           // response type - text, xml, json, etc.  See $.ajax config options
			maxCalls: 0,            // maximum number of calls. 0 = no limit.
			autoStop: 0,            // automatically stop requests after this many returns of the same data. 0 = disabled.
			cookie: {},             // configuration for the timeout-storing cookie
			verbose: 2              // Sets the console logging verbosity: 0=none, 1=some, 2=all 
			}, function(data){
				var myHtml = 'The data returned from the server was: ' + data + '';
				$('#results').append(myHtml);
			});
           
        })

    -->
    </script>
    <div id="wrapper">
        <div id="content">
            <h1>PeriodicalUpdater plugin for jQuery</h1>            
    
            <div id="results">
                <h3>Results from $.PeriodicalUpdater()</h3>
            </div>
            
        </div>    
    </div>  
    
</body>
</html>

Open in new window



## getLatestItems.php ##

<?php

error_log("got called");

//$testArr['data'] = 'cheese'; 
//echo json_encode($testArr); 

print 'cheese';

?>

Open in new window

0
Comment
Question by:NeilT
  • 4
  • 4
9 Comments
 
LVL 12

Accepted Solution

by:
adrian_brooks earned 500 total points
ID: 39222885
The only thing that is sticking out as questionable about your code is that you have an attribute called 'data' and you have a function that accepts the returned data.

Try changing the name of the arg in the function that receives the returned data to something like 'return_data' and see if that fixes your problem.

~AB
0
 
LVL 58

Expert Comment

by:Gary
ID: 39222896
Any reason to not just use a simple ajax call
function appendData(){
$.ajax({type:'GET',url:'../getLatestItems.php',,success:function(response) {
	$('#results').html(response);
    }
}

var refreshInterval = setInterval(appendData, 30000);

Open in new window

0
 
LVL 3

Author Comment

by:NeilT
ID: 39222924
adrian : thanks it now works in Chrome but still not in IE?

Gary: I guess no reason although I want something like facebook that checks less frequently each time it checks the server and nothing has changed. The above doubles the time out between each check until something is new. (its for a group shopping site where things could be added loads at a time, or be very quiet) and I want to reduce server load.
0
 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39222980
If its not working in IE, that may be a shortcoming of the Periodical class and less to do with your code.

As for the comment by Gary, you could technically achieve the same thing with rolling your own logic into the out-of-the-box jQuery Ajax implementation that would do the same thing. I only use other people's code when as a last effort. When I write my own, I know it will be fully compatible with my app then. But that's your call and preference.

~AB
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 3

Author Comment

by:NeilT
ID: 39223050
I'd love to do that but way above my level unfortunately, im trying to cobble together ;)
0
 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39223065
Understood. :)

Perhaps try reaching out to the PeriodicalUpdater author about the IE issue.

~AB
0
 
LVL 3

Author Comment

by:NeilT
ID: 39223184
solved the issue, there was a call in the code to an external .js file that was erroring when using the developer tools. A google came up with this : http://blogs.msdn.com/b/ieinternals/archive/2010/09/27/ie9-beta-google-image-search-javascript-content-type-and-nosniff.aspx

I copied the file directly to my server and linked to it instead and hey presto!

With that and your 'return_data' tip its now fine.

Thanks Neil
0
 
LVL 3

Author Closing Comment

by:NeilT
ID: 39223186
Superb, many thanks
Neil
0
 
LVL 12

Expert Comment

by:adrian_brooks
ID: 39223242
Glad I could help you out, Neil! :)

Happy coding!

~AB
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
update field on focusout 15 24
php variable basic question 12 29
Codiing Non-Existent Links 4 30
Adding through query php 9 12
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now