Home » Php » javascript – AngularJS Routing Parameter Issue

javascript – AngularJS Routing Parameter Issue

Posted by: admin February 25, 2020 Leave a comment

Questions:

New information

I believe my issue is I’m creating a new instance of a controller/page.

<div ng-app="mainApp">
    <ng-view></ng-view>
</div>

My understanding is the code above should allow routing to go between the two pages. However, I believe this is creating a page with null values when the intent is to pull back the data from the post in the controller. So, what my code is actually doing is routing to the page with empty values, and then creating another instance of the page populated with the posted values but not being displayed. Does this seem to make sense to anyone?

Original Post

I’ve successfully posted a route parameter to server. I am able to see the data object in console.

When the page loads in the browser, it loads with no data which made it appear the data wasn’t present. However, upon inspecting the Network tab of the inspection window, I see that I am seeing one of two pages being called in the XHR tab. The page that doesn’t contain the data is the page being displayed in the browser. The other contains the data as I’d expect. It feels like a binding issue, but this is the first time I’ve toyed with AngularJS so I don’t know that such a thing exists. Is there a delay or wait parameter needed so the data loads before the page does?

Route Controller

Data Missing on page

Network XHR Load times

Data Present on page

Added Context:

@georgeawg You stated the backend is being misled. Originally I had not specified the content type to be headers: {'Content-Type': 'application/x-www-form-urlencoded'}, I had instead left it default but it did not change the end result. Is there any additional direction you could provide?

I simply don’t know what I don’t know, so I have a hard time moving forward other than via trial and error or what I learn via linkedin learning.

<!-- Originally Controller Structure -->
mainApp.controller('SiteController', function($scope, $http, $routeParams) {
    $scope.siteSelected = $routeParams.itemId;
    //var testData =  { siteSelected: $routeParams.itemId };
    //var testData = '{ test:'+ $scope.siteSelected +" }";
    var testData =  "siteSelected="+$routeParams.itemId;
    $http({
        method: 'POST',
        url: 'sitedata.php',
        data: testData,
        dataType:'json',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    }).then(
        function(response) {
            console.log(response);
        },
        function(err) {
            console.log('error...', err);
        }
    );
});
<!-- sitedata -->
<?php
    error_reporting(E_ALL & ~E_NOTICE);
?>

<div class="wrapper wrapper-content animated fadeIn">
    <div style id="sitedata">
        <div class="row">
            <div class="col-lg-12">
                <?php include 'lastrun.php'?>
            </div>
        </div>
    </div>
</div>
<!-- lastrun.php --> 
$post_test = "";
$request_body = file_get_contents('php://input');
$decoded_json = json_decode($request_body);
$encoded_json = json_encode($request_body);
echo "</br>";
var_dump($request_body);
echo "</br>";
var_dump($encoded_json);
echo "</br>";
$post_test = $_POST['siteSelected'];
echo "$post_test";
echo "</br>";
echo "test here";
echo "</br>";
echo "</br>";
How to&Answers: