从PHP类访问HTML div ID

时间:2018-07-25 16:56:51

标签: php html fusioncharts

我正在尝试学习PHP / Ajax,但是我陷入了困境。我正在尝试获取AJAX请求的结果,以呈现在PHP类外部声明的div元素中。

我有一个名为 DatabaseReference usersRef = mDatabase.child("Users").child(id).child("favoris").child(the_id_containing_after_favoris); 的类的PHP文件,该文件从ajax查询接收到post变量后便处理数据库查询,如下所示

dashboard

然后在同一个php文件中,我有一个全局函数,将结果传递给名为loadTeamMembers的函数,如下所示。

public function loadTeamMembersChart($teamID, $lecturer_id, $teamColour){


 $db = $this -> db;

 if (!empty ($teamID) && !empty ($lecturer_id)){

     $result = $db -> loadTeamMembersChart($teamID, $lecturer_id);

     if ($result) {


        $response["teamMember"] = $result;

        $teamMembers = $_SESSION["teamMember"] = $result;

        //Pass the results to the below function
        loadTeamMembers($teamMembers, $teamColour);


     } else {

        $response["result"] = "failure";
        $response["message"] = "Unable to Find Team Member Data";
        return json_encode($response);
     }

        } else {

  return $this -> getMsgParamNotEmpty();

        }

     }

}

然后在同一个文件中,但是在两个PHP类之外,我的HTML内都有以下脚本:

function loadTeamMembers($teamMembers, $teamColour){    

//start to break up the teamMember object and store in variables

$teamMemberName = $_SESSION['teamMember']['all_team_member_names']; 
$teamMemberPoints = $_SESSION['teamMember']['all_team_member_points'];
$teamMemberStudentNumber = $_SESSION['teamMember']['all_team_member_studentNumbers'];
$teamMemberLastActive = $_SESSION['teamMember']['all_date_last_present'];
$teamMemberTeamID = $_SESSION['teamMember']['all_team_ids'];


// The `$teamMemberData` array holds the chart attributes and data for the team object
        $teamMemberData = array(
            "chart" => array(
              "caption" => "Student Team-Member Progress Chart",
              "xAxisname"=> "Team-Member Name",
              "yAxisName"=> "Points",
              //Configure no.of visible plots
              "numVisiblePlot"=> "5",
              "theme"=> "zune",
              "exportenabled"=> "1",
              "exportMode"=> "server"
            ),

            "categories" => array(
              "category" => array()),

        "dataset" => array(
              "data" => array())
        );



        $teamMemberCount = 0;

         // Push the data into the array
        if (is_array($teamMemberName) || is_object($teamMemberName))
        { 

        foreach($teamMemberName as $key => $value){ 

        array_push($teamMemberData["categories"]["category"], array(
            "label" => $teamMemberName[$teamMemberCount]." ".$teamMemberStudentNumber[$teamMemberCount]." Profile was last active on ".$teamMemberLastActive[$teamMemberCount]));

        array_push($teamMemberData["dataset"]["data"], array(
            "value" => $teamMemberPoints[$teamMemberCount],
            "color"=> $teamColour));


        $teamMemberCount++;
            }
        }


        //encode the built team-member array so that it is returned to the ajax success request
        echo $jsonEncodedTeamMemberData = json_encode($teamMemberData);

但是,在我写过 <script> function getTeamMembers(teamID,lecturer_id, teamColourCode){ //Variables needed to query the external DB to return required data to populate the charts var teamInfo = { "teamID" : teamID, "lecturer_id" : lecturer_id, "teamColourCode" : teamColourCode }; /* The below is used for the 'was a student present for the most recent quiz' pie chart. A boolean is set so that the post request knows that we only need to call the loadIfTeamMemberWasPresent(); function, as the data was already obtained in the first ajax request. However, we don't want to use that data on the first ajax call. */ var teamDetails = { "teamClicked" : true }; //Below is the first ajax call $.ajax({ data: teamInfo, url: 'dashboard.php', type: 'POST', success : function(data) { console.log(data) chartData = data; apiChart = new FusionCharts({ type: 'scrollColumn2d', renderAt: 'team-member-chart-container', width: '550', height: '350', dataFormat: 'json', dataSource: data }); apiChart.render(); }, //Once the first ajax call has completed, we can then call the second ajax request to populate the pie-chart graph complete:function(){ $.ajax({ data: teamDetails, url: 'dashboard.php', type: 'POST', success : function(data) { console.log(data) chartData = data; apiChart = new FusionCharts({ type: 'pie2D', renderAt: 'teamMember-present-container', width: '550', height: '350', dataFormat: 'json', dataSource: data }); apiChart.render(); }, }); } }); } </script> 的地方,我无法访问名为$columnChartTeamMember =...的div ID中的图表。

如果可能的话,我试图在类本身中不要包含HTML,因为其他类中的其他图表也需要呈现为其他div id,例如team-member-chart-container

我已经尝试阅读here中发现的PHP Simple HTML DOM Parser手册,但是作为一个初学者,这让我有些困惑。我也不确定那是否是我的追求。

我的方法基于Fusioncharts提供的官方文档,可以在here中找到。

如果有人能提供有关如何在上述div-id中呈现图表的指导,我将非常感谢。

编辑

最后,我设法通过将从PHP脚本中检索到的数据回显到AJAX请求中,然后通过对ajax请求的individual-student-container调用来构建图表,从而解决了我的问题。我已经更新了代码,以展示如何实现此目的。由于在第一次调用中已检索到数据,因此我省略了对第二个ajax请求的处理。但是,我还不想撤退,因此,第一个请求完成后,我又提出了第二个请求。一切现在都运行良好。

1 个答案:

答案 0 :(得分:0)

与此类似的东西应该对您有用。

PHP文件 class.teamMember.php

<?php

require_once "fusioncharts.php";

class TeamMember {

  public __construct($data) {
    self::loadTeamMembers($data)
  }

  public function loadTeamMembers($data) {

    $columnChartTeamMember = new \FusionCharts("scrollColumn2d", "teamMemberChart", 500, 300, "team-member-chart-container", "json", json_encode($data));
    $columnChartTeamMember->render();

  }

}

new TeamMember($data);

仍然需要从某个地方提供$data。看起来您是通过jQuery.post来执行此操作的,但是由于您未运行functiongetTeamMembersteamInfo始终为空,因此我将这一部分省略。 / p>

HTML文件: chart.html

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div id='unique-id'>Charts will load here.</div>
    <script>
      jQuery
        .get('dashboard.php')
        .then(function (data) {
          jQuery('#unique-id').html(data);
        });
    </script>
  </body>
</html>

如果以下内容是$data(从FusionCharts复制/粘贴),请说:

$data = "{
  "chart":{  
    "caption":"Harry\'s SuperMart",
    "subCaption":"Top 5 stores in last month by revenue",
    "numberPrefix":"$",
    "theme":"ocean"
  },
  "data":[  
    {  
      "label":"Bakersfield Central",
      "value":"880000"
    },
    {  
      "label":"Garden Groove harbour",
      "value":"730000"
    },
    {  
      "label":"Los Angeles Topanga",
      "value":"590000"
    },
    {  
      "label":"Compton-Rancho Dom",
      "value":"520000"
    },
    {  
      "label":"Daly City Serramonte",
      "value":"330000"
    }
  ]
}";

您无需在课程中json_encode。 (可以用其他字词删除) 但是现在:

$data = json_decode($data, true);
new TeamMember($data);

它应该显示在#unique-id <div>中。