jQuery function calling ajax not working/returning anything

Question

I am writing an app (not web app) for mobile devices using icenium which uses javascript etc rather than its native language.

The app displays rows from a data base, displaying events. The user then clicks on an event which displays more information on the event, however I am having trouble calling the ajax from a js function as below:

function showSingle(itemId){

            //document.write(itemId);
            $('#output').fadeOut();
            $('#single').fadeIn("fast");
            $.ajax({
                url: 'http://dev.123456789.co.uk/getSingle.php',
                dataType: 'jsonp',
                data: { dbId: itemId },
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){

                        var linkedPageSingle = '<h2>'+item.eventName+'</h2>'
                            + '<p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

                        $('#single').append(linkedPageSingle);
                        // pageId = $('#pageid').html();
                        $('#single').text('debugdebug.');
                },
                error: function(){
                    $('#single').text('There was an error loading the data.');
                }
        });
      }

This does not return any data, it doesn't even return $('#single').text('debugdebug.'); so there must be a problem with the ajax call? Also

error: function(){
                    $('#single').text('There was an error loading the data.');
                }

Is not outputted. Can you spot an error in this? The call to the function is here:

var linkedPage = '<h2><a href="#" onClick="showSingle('+item.id+')">'+item.eventName+'</a></h2>'
                            + '<p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

Which is in a document.ready section of the page, inside an ajax method (which works).

getSingle.php:

<?php

/*
    * Script to connect to database and pull out information for app!
*/

include 'connect.php';

$dbId = $_POST['dbId'];
$query = mysql_query("SELECT * FROM calTest where `id`='$dbId'");
$records = array();

while($row = mysql_fetch_assoc($query)) {
    $records[] = $row;
}

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

?>

Can't see where I have gone wrong, Thanks!

Did you checked your console ? what error it is displaying ? — Wearybands
– Wearybands, Commented Oct 8, 2012 at 8:53
I can't access a console as far as I am aware as its in the iPhone app. a valid itemId would look like showSingle(2) — zomboble
– zomboble, Commented Oct 8, 2012 at 8:53

StaticVariable · Accepted Answer · 2012-10-08 09:06:41Z

1

I think the problem is with Posting of data

$dbId = $_POST['dbId'];

echo $_GET['jsoncallback'];

you are using the get or post method together

answered Oct 8, 2012 at 9:06

StaticVariable

5,2934 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Iorga · Accepted Answer · 2012-10-08 09:06:21Z

1

You set the callback to jsoncallback so you need to add that function to parse item:

function showSingle(itemId){

        //document.write(itemId);
        //$('#output').fadeOut();
        //$('#single').fadeIn("fast");
        $.ajax({
            url: 'http://dev.thedesignworks.co.uk/getSingle.php',
            dataType: 'jsonp',
            data: { dbId: itemId },
            jsonp: 'jsoncallback',
            timeout: 5000
        });
}

function jsoncallback(data, status) {
    var linkedPageSingle;
    $.each(data, function(i, item) {
         linkedPageSingle = '<h2>'+item.eventName+'</h2>'
                        + '<p>Description: '+item.description+'</p><p>Type: '
                        + item.type+'</p><p id="pageid">'+item.id+'</p>';

         $('#single').append(linkedPageSingle);
         // pageId = $('#pageid').html();
    });
    $('#single').text('debugdebug.');
}

edited Oct 8, 2012 at 9:06

answered Oct 8, 2012 at 8:56

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

4 Comments

zomboble Over a year ago

Ah I see, I thought jsoncallback would be valid because it is in the getSingle.php: echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

Mihai Iorga Over a year ago

when you assign jsoncallback to jsonp you automatically tell AJAX to pass the response to that javascript function, not PHP.

zomboble Over a year ago

Ah progress! When it's on that I am now getting "There was an error loading the data." I have changed the function name to jsoncallbackSingle as it was conflicting with another jsoncallback.

zomboble Over a year ago

Thank you for all the help! If I could give 2 correct answers I would, i'm sure somewhere in here it has helped it work however it was changing the post to get that made it work in the end, upvoted however and learned good practice from you, thank you! :)

Codesen · Accepted Answer · 2012-10-08 09:13:47Z

Try this

function showSingle(itemId){

            //document.write(itemId);
            $('#output').fadeOut();
            $('#single').fadeIn("fast");
            $.ajax({
                url: 'http://dev.thedesignworks.co.uk/getSingle.php',
                dataType: 'jsonp',
                data: { dbId: itemId },
                timeout: 5000,
                success: function(data, status){
                        alert(data)
if (data.length > 0) {
                        var linkedPageSingle = '<h2>'+item.eventName+'</h2>'
                            + '<p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

                        $('#single').append(linkedPageSingle);
                        // pageId = $('#pageid').html();
                        $('#single').text('debugdebug.');
}
                },
                error: function(){
                    $('#single').text('There was an error loading the data.');
                }
        });
      }

The php page will be

    <?php

    /*
        * Script to connect to database and pull out information for app!
    */

    include 'connect.php';

    $dbId = $_POST['dbId'];
    $query = mysql_query("SELECT * FROM calTest where `id`='$dbId'");
    $records = array();

    while($row = mysql_fetch_assoc($query)) {
        $records[] = $row;
    }

if (count($records) > 0)
    echo json_encode($records);


    ?>

Collectives™ on Stack Overflow

jQuery function calling ajax not working/returning anything

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related