Using jquery.load() function to load an angular page - php

im working in a personal project right now and im mixing jquery and angularjs
and this week i face one problem that is the next
what im trying to do is load an angular page into a div using jquery.load()
(jquery part)
Test1.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<button class="btn btn-default" id="sss" type="button">load angular page into div using jquery</button>
<div id="tarkan"></div>
<script>
$("#sss").on("click", function (e) {
$("#tarkan").load("/elements/test2.php");
});
</script>
(angular part)
test2.php
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</body>
</html>
the test1.php gives me this
{{ x.Name + ', ' + x.Country }}
instead the data of the angular page.
today my partial solution to this is the use of iframes instead of using jquery.load
<div id="tarkan"></div>
<iframe id="tarkan2" src="" width="100%" height="700px" frameborder="0" scrolling="no" ></iframe>
<script>
$("#sss").on("click", function (e) {
//its not working
$("#tarkan").load("/elements/test2.php");
//its working
$("#tarkan2").attr("src", "/elements/test2.php");
});
</script>
my final question is there a way to load the angularpage into a div using jquery load?
any explanations or solutions are very welcome :)

you could achieve this with only angular : by using directive for the data and have a button click in the controller that would load the directive .. the directive is shown only if the $scope.show is true.
var app = angular.module('myApp', []);
app.controller('Mycontroller', function($scope) {
$scope.show = false;
$scope.getData = function() {
console.log("hi");
$scope.show = true;
};
})
app.directive('customersCtrl', function() {
return {
restrict: 'E',
controller: function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
},
templateUrl: 'test2.tpl.html'
}
});
here is a working plunker

Related

jQuery load with php $_GET didn't work

i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});

AngularJS errorcallBack

I'm having some difficulty with AngularJS. Any constructive help is greatly appreciated.
This is the Angular code I'm working with
app.controller('customersCtrl', function($scope, $http) {
$scope.element = function(num){
var element_id = num;//num;
$http.get("customers.php",{params:{"id":element_id}}).then(function (response) {
$scope.myData = response.data;
}
,function errorCallback(response){
$scope.e=response.data;
console.log(e);
});
};
});
And here is my php code I'm using. All this does is return the 401 code. The section works as I can return it in a console log.
http_response_code(401);
$message = http_response_code()." No data found";
header('Content-Type: application/json');
echo json_encode($message);
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src = "javascript.js"></script>
</head>
<body ng-app="input">
<div ng-controller="customersCtrl">
<h1>Click on the contact name for company and location</h1>
<br>
<button ng-click="element(0)">Bob</button>
<button ng-click="element(1)">Jim</button>
<button ng-click="element(2)">Kim</button>
<br>
<br>
<ul>
<li ng-repeat="x in myData">
{{x}}
</li>
</ul>
<div ng-show="error != null">
<p>{{e.error}}</p>
</div>
</div>
View full list
</body>
</html>
I'm having a problem displaying the 401 message in the HTML page. What is a good way of doing this? The code will return the message but only as a console log. I need it in a HTML page. I'm quite confused on this one as I've tried multiple ways and none of them are working. Any help would be greatly appreciated
Thank you in advance!!!
Hey Man try that below:
$scope.e = '';
$scope.myData = [];
$scope.element = function(element_id){
$http({
method: 'GET',
url: "customers.php?id=" + element_id,
headers: {
'Content-Type': 'application/json'
}
})
.then(
function successCallback(response) {
$scope.myData = response.data;
callback(response);
},
function errorCallback(response) {
$scope.e = response.data;
callback(response);
}
);
}
Check on browser the network, and if no work, plz upload the network with log to "customers.php"
Best Wishes

Ajax doesnt send data to php script

I want to send id to php script.I think my code is ok, but when i click on tag i get this error:
Notice: Undefined index: id in C:\xampp\htdocs\domaci\cao.php on line 4
here is my html + ajax code :
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
and this is cao.php:
<html>
<body>
<?php
$id = $_POST['id'];
echo $id;
?>
</body>
</html>
i really need this to get to work, please help me :)
Your $.post ajax is fine. The issue is when the anchor is clicked, you don't preventDefault or return false, to stop the browser redirecting to cao.php. When it redirects to cao.php, it is a GET request, and so triggers the undefined index notice because there is no post data.
Add return false or preventDefault:
$('a').click(function(e){
e.preventDefault();
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
Look at your browser's console (F12) on the Network tab, to see the response of the ajax.
Try it now.
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('data-url'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="#" data-url="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="#" data-url="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
Your link redirects you, so simpe do this:
e.preventDefault();
Also its better to have variables (for future), here is EXAMPLE
Try this one will work for you:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post('cao.php', { id : $(this).attr('id') },function(data){
alert(data);
});
});
});
</script>
</head>
<body>
<a href="#" id="Barselona" >Barselona</a>
</br>
<a href="#" id="Beograd" >Beograd</a>
</body>
</html>
AT cao.php page
<?php
$id = $_POST['id'];
echo $id;die;
?>
just try print_r($_POST) in cao.php & check the values are posting
$id=$_POST["id"];

How to use AJAX with HTML for multiple values of href of HTML

How can I link HTML href values to AJAX so that I get result on same page but in different conatainer. Below is my my code:
<html>
<head>
<title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#a').click(function() {
e.preventDefault();
$('content').load($(this).attr('href'));
});
});
</script>
</head>
<body>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body</div>
<div id="footer"> </div>
</body>
</html>
Since I am new to AJAX, I am not able to understand how to get information related to clicked value of href in AJAX function so that it will display result in same page but in other division. My filename is, say front_end.php
This is your code, just updated:
<html>
<head> <title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
});
</script>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body
</div> <div id="content"></div>
<div id="footer"> </div>
</body>
</html>
1) A tag is not $("#a") in jquery
2) $('content') is nothing
3) element with id $('#content') or some element with class $('#content')
Tako a look at jsBin example
1: http://jsbin.com/IFaLoJE/1/ or jsfiddle example
Try something like this :
$('a').click(function (e) {
e.preventDefault();
$('#content').load(this.href);
});

Why is fadeIn flickering when loading?

I've made a site from an youtube tutorial. Here's my test site. And
here's the tutorial (final step of 3) if it helps. No CSS used yet.
When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.
Me
I'm totally new to JavaScript.
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /
<div id="content_area"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>
nav.js:
$(document).ready(function () {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function () {
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
return false;
});
Replace:
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
With:
$('#content_area').hide('slow', function(){
$(this).load($(this).attr('href')).fadeIn('slow');
});
This will fade it out and wait until the animation is complete before calling that function and loading in the new content.
Check out the documentation for more info.
you can use handlers with your own functions...
for ex :
$('#show').click(function() {
$('#myDiv').show(0, onDivShow);
});
$('#hide').click(function() {
$('#myDiv').hide(0, onDivHide);
});
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
You can try this:
$('.menu_top').click(function () {
var href=$(this).attr('href');
var page = $('<div/>').attr('id','page').load(href);
$('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');
return false;
});

Categories