Using JQuery AJAX and php to fetch data from a mysql database

This is follow up post where I'm having a problem where my php code is not returning the data it should. I have this api.php code (under Joomla):

<?php
require_once ( 'includes/defines.php' );
require_once ( 'includes/framework.php' );

/* Create the Application */
$app = JFactory::getApplication('site');

/* Make sure we are logged in at all. */
if (JFactory::getUser()->id == 0)
    die("Access denied: login required.");

//get current user
$user =& JFactory::getUser();
// get a reference to the database
$db = &JFactory::getDBO();

$query_camera_name = "SELECT camera_name, camera_status, camera_quality, email_notice, camera_hash, camera_type FROM #__cameras WHERE user_id=".$user->id." AND camera_status!='DELETED'";
$db->setQuery($query_camera_name);
//get number of cameras so we can build the table accordingly
$db->query();
$num_rows = $db->getNumRows();
// We can use array names with loadAssocList.
$result_cameras = $db->loadAssocList();
header('Content-Type: application/json');
echo json_encode($result_cameras);
?>

This code on its own returns valid JSON code. Then I have my client.php code that is there to display some results.

<html>
<head>
<link href="ajax_dashboard/webcam_widget.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
</head>
<body>

<h3>Output: </h3>
<div id="output">Append this text</div>

<script id="source" language="javascript" type="text/javascript">
var js = jQuery.noConflict();

js(function () 
{
js.ajax({                                      
  url: 'ajax_dashboard/api.php',                  //the script to call to get data          
  data: "",                        
  dataType: 'json',                //data format      
  success: function(data, textStatus, xhr) {
    console.log(xhr);
    js.each(data, function() {

       js.each(this, function(k, v) {
           js('#output').append("<b>key: </b>"+k+"<b> value: </b>"+v);

    });

   });

} 
});
}); 
</script>
</body>
</html>

I have verified with help from users on another post that the jquery code is just fine (http://stackoverflow.com/questions/8329495/iterate-over-json-array-using-jquery). The error I'm getting is from jquery

object is null

The extra console message gives this as well: Object { readyState=4, status=200, statusText="OK"} and responseText=""

For some reason the JSON code is not coming through right. Here is what happens when I look at the JSON code for those who want to verify:

[
{
    "camera_name": "ffgg",
    "camera_status": "DISABLED",
    "camera_quality": "MEDIUM",
    "email_notice": "DISABLED",
    "camera_hash": "0d5a57cb75608202e64b834efd6a4667a71f6dee",
    "camera_type": "WEBCAM"
},
{
    "camera_name": "test",
    "camera_status": "ENABLED",
    "camera_quality": "HIGH",
    "email_notice": "ENABLED",
    "camera_hash": "6ab000ef7926b4a182f0f864a0d443fc19a29fdd",
    "camera_type": "WEBCAM"
}
]

I'm thinking it has something to do with the way Joomla is displaying this. Any ideas?

Answers


Can you get rid of this:

data: "",

from the ajax call and see what happens? I've never seen that passed as empty and would be curious if that would change anything. Joomla and your php might get upset if jQuery is appending the post URL with extra stuff because that is there.


Before you include the Joomla framework and other files you must define the JEXEC variable as all other files check whether this variable is defined before continuing.

This is the check they carry out:

defined('_JEXEC') or die('Restricted access');

as explained here: http://docs.joomla.org/Why_do_most_of_the_Joomla!_PHP_files_start_with_%22defined%28%27_JEXEC%27%29...%3F

You need to add this line to your file:

define( '_JEXEC', 1 );

But a word of warning "DANGER WILL ROBINSON, DANGER"

You would probably be much safer calling the main Joomla entry point and routing the request to your own component. This is fairly easy to do, you can suppress all of Joomla's extraineous output and call just your own component's output specifying the layout to be either html, json, xml or any other format you need.


Decided to answer my own question. It is just not possible to do this. I have to go the component route (create your own custom component). As far as I can see there is just no other way.


Need Your Help

PouchDB with jquery mobile & phonegap

cordova jquery-mobile pouchdb

I'm trying to use the above three together in a mobile (android) app.

To get the hosted web sites names from IIS

c# .net iis com .net-assembly

I have created a method to get hosted web sites from IIS server as following code snippet.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.