1

I'm working on this topic again and I did not find any solution yet

a. Action that I did: I build a query using PDO to get the information from DB using PHP, after that I add the results into an associative array and encode it in order to send them using ajax. Finally, I used $.ajax to get the information and build the jquery collapsible

b. Issue: The information is not being appended inside the structure of the collapsible. The console.log of the data received by ajax did not displayed any information

Database app

Table: Bugs id,type,status,severity,system,browser,title,description,creation_date

Table: Projects id, projectname, status, description, start_date, due_date

The structure of the app is:

  • inc/errorList.php
  • inc/connection.php
  • index.html ( multiple pages file )

File: errorList.php

<?php
    // Import the connection to the database  
    require_once 'connection.php';

    // Get the instance
    $conn = dbConnect();

    // Build the query 
    $sql = " SELECT bg.bug_id, py.project, bg.type, bg.status, bg.severity, bg.system, bg.browser, bg.title, bg.description,bg.creation_date FROM bugs bg, projects py WHERE bg.projectid = py.id ";

    // Run the query and gets the results
    $result = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);

    // Build an iteration and create an associative array   
    foreach ($result as $row){

    $return[]=array(
                'bug_id'=>$row['bug_id'],
                'project'=>$row['project'],
                'type'=>$row['type'],
                'status'=>$row['status'],
                'severity'=>$row['severity'],
                'system'=>$row['system'],
                'browser'=>$row['browser'],
                'title'=>$row['title'],
                'description' => $row['description'],
                'creation_date'=>$row['creation_date']);
     }

     // Encode the array 
     echo json_encode($return);

?>

File: index.html / Page: #bugs

Inside of the html file I added the div "SET"

<div data-role="collapsible-set" id="set"><div>
    <script type="text/javascript">

        $(document).on('pagebeforeshow', '#bugs', function (){

                $.ajax({
                    url: 'inc/errorList.php',
                    data: "",
                    dataType: 'json',
                    success: function(data)
                    {
                        // Create the variable content to concatenate the results
                        var content = "";

                        // Build an iteration of the information received in data

                        for (var i = 0; i < data.length; i++) {

                            // Add the header of the collapsible  
                            content = "<div data-role='collapsible' data-collapsed-icon='arrow-r'   data-expanded-icon='arrow-d' data-iconpos='right' data-theme='a'><h3> " + data[i].bug_id + ' - ' + data[i].title + "</h3>" + "<ul data-role='listview' data-inset='true'  data-theme='a'>";

                            // Concatenate the header with the information retreived
                             content = content +
                            '<li>Project: ' + data[i].project + '</li>' +
                            '<li>Type: ' + data[i].type + '</li>' +
                            '<li>Status: ' + data[i].status + '</li>' +
                            '<li>Severity: ' + data[i].severity + '</li>' +
                            '<li>Browser: ' + data[i].browser + '</li>' +
                            '<li>Creation Date ' + data[i].creation_date + '</li>' +
                            '<li>Detail: ' + data[i].description + '</li>' ;

                            content = content + '</ul>';
                            content = content + "</div>";

                            // Append the content into the div     
                            $("#set").append(content);
                        }

                        // Refresh the Collapsible 
                        $("#set").collapsibleset("refresh").enhanceWithin();
                       }
                    });
            });
    </script>
m4g4bu
  • 457
  • 2
  • 7
  • 19
  • What's "_detail_" you're talking about? – Omar Nov 08 '14 at 20:37
  • the field 'detail' is one column from the bug schema – m4g4bu Nov 08 '14 at 20:41
  • Beca use you're missing a semicolon after it `;`. In `content` first one. Moreover, you have to declare variable content this way `var content = "";` otherwise you'll get `undefined` at the beginning of the string. – Omar Nov 08 '14 at 20:56
  • http://jsfiddle.net/Palestinian/tfvy8mwo/ Also use `.collapsibleset("refresh")` to re-enhance collapsibleset. – Omar Nov 08 '14 at 21:30
  • I applied everything but nothing, the problem is when one more field is added to the structure of the php file and the jquery – m4g4bu Nov 09 '14 at 05:21
  • Can you post the JSON array you're getting? – Omar Nov 09 '14 at 08:57
  • Sorry for asking this but, I used console.log(data), is this correct? because I did not see anything on screen or the console – m4g4bu Nov 10 '14 at 03:15
  • If you get nothing, then there must be a problem in PHP code. – Omar Nov 10 '14 at 08:49
  • PHP file works because when I debugged using var_dump($result_array) I could see the array with the requested information. But something is wrong because IT's happens when I added the one more field or the field detail at the end of the content variable – m4g4bu Nov 10 '14 at 19:11
  • Could someone give me a hand with this? – m4g4bu Nov 13 '14 at 16:45

1 Answers1

0

Yes, Finally I found the bug!. The problem was the accents in some words in the field 'Description, below I add the final code:

File: errorList.php

<?php
// Import the connection to the database  
require_once 'connection.php';

// Get the instance
$conn = dbConnect();

// Build the query 
$sql = " SELECT bg.bug_id, py.project, bg.type, bg.status, bg.severity, bg.system, bg.browser, bg.title, bg.description,bg.creation_date FROM bugs bg, projects py WHERE bg.projectid = py.id ";

// Run the query and gets the results
$result = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);

// Build an iteration and create an associative array   
foreach ($result as $row){

$return[]=array(
            'bug_id'=>$row['bug_id'],
            'project'=>$row['project'],
            'type'=>$row['type'],
            'status'=>$row['status'],
            'severity'=>$row['severity'],
            'system'=>$row['system'],
            'browser'=>$row['browser'],
            'title'=>$row['title'],
            'description' => $row['description'],
            'creation_date'=>$row['creation_date']);
 }

header("Content-type: application/json", true);
echo json_encode($return);
exit;

?>

File: json.js

address = 'inc/errorList.php';


$.ajax({url: address,
        cache: false,
        data: "",
        dataType: 'json',
        success: function(new_data){

  // Create the variable content to concatenate the results
                    var content = "";

                    // Build an iteration of the information received in data

                    for (var i = 0; i < data.length; i++) {

                        // Add the header of the collapsible  
                        content = "<div data-role='collapsible' data-collapsed-icon='arrow-r'   data-expanded-icon='arrow-d' data-iconpos='right' data-theme='a'><h3> " + data[i].bug_id + ' - ' + data[i].title + "</h3>" + "<ul data-role='listview' data-inset='true'  data-theme='a'>";

                        // Concatenate the header with the information retreived
                         content = content +
                        '<li>Project: ' + data[i].project + '</li>' +
                        '<li>Type: ' + data[i].type + '</li>' +
                        '<li>Status: ' + data[i].status + '</li>' +
                        '<li>Severity: ' + data[i].severity + '</li>' +
                        '<li>Browser: ' + data[i].browser + '</li>' +
                        '<li>Creation Date ' + data[i].creation_date + '</li>' +
                        '<li>Detail: ' + data[i].description + '</li>' ;

                        content = content + '</ul>';
                        content = content + "</div>";

                        // Append the content into the div     
                        $("#set").append(content);
                    }

                    // Refresh the Collapsible 
                    $("#set").collapsibleset("refresh").enhanceWithin();
                   },
        error: function (request,error) {

            //var err = eval("(" + xhr.responseText + ")");
            //alert(err.Message);
            // This callback function will trigger on unsuccessful action                
            alert('Connection Error!');
            alert('Error: ' + error);
            //console.log(new_data);

        }

    });           

 });
m4g4bu
  • 457
  • 2
  • 7
  • 19