Solved

cannot get ajax response into div

Posted on 2013-06-05
9
408 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:Neil Thompson
  • 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:Neil Thompson
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
LVL 3

Author Comment

by:Neil Thompson
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:Neil Thompson
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:Neil Thompson
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
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.

860 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