The method work fine with single php file:
So in my html page I try to use js and call php file and highlighting the content by google prettify
<!DOCTYPE html>
<html lang="en">
<head>
<link href="googleprettify/prettify.css" type="text/css" rel="stylesheet" />
<script src="googleprettify/prettify.js" type="text/javascript"></script>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","callback_json.php",true);
xmlhttp.send();
}
</script>
</head>
<body onload="prettyPrint()" >
<button onclick="loadXMLDoc();">Get Data</button>
<div id="...">
<pre class='prettyprint;'>
function foo()
{
if (counter == 10)
return;
// it works!
}</pre>
</div>
<div id="myDiv">
need to be replaced
</div>
</body>
</html>
The first piece of code works just fine but when i call php file
<?php
$ch = curl_init();
$url='someurl';
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$data = curl_exec($ch);
curl_close($ch);
echo '<pre class="prettyprint;"> ';
echo $data;
echo "</pre>";?>
And the returning code can't be highlighted. I doubt there's problem with body onload="prettyPrint()" since the prettyprint() only run when the page loaded but I'm not sure about this. Or is there any problem with the code structures? Or is there anyway to load prettyprint function again without loading the whole page?
After you update the DOM, call prettyPrint() again, otherwise you only have inserted some
new HTML, but the prettification did not run:
...
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
prettyPrint();
^^^^^^^^^^^^^^
Related
I am trying to show multiple results in single php page, one of them is Google pie chart which takes data from mysql db. Without ajax I can show this chart separately successfully but using ajax to show the graph on same page has no luck.
Below code works, but on button click it redirects to ajax_graph_temp.php and shows graph on that page. I want using ajax to show the graph on same page i.e. ajax_form.php.
Problem is ajax_graph.php showing the result in div which is present in it only. How can I show it in the dive present in ajax_form_temp.php?
my ajax_form_temp.php:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript">
function viewChart(form, e){
e.preventDefault();
e.returnValue=false;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send();
}
//------------------Chart function end
</script>
</head>
<body>
<form action="ajax_graph_temp.php" method="post"/>
<h4>CLICK TO VIEW CHART</h4>
<input type="submit" class="submit" value="submit" name="view"/>
</form>
<br />
<div id="txtHint">
<b>Person info will be listed here.</b>
</div>
</body>
</html>
and ajax_graph_temp.php is:
<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
how to add Jquery datepicker in dynamically loaded textbox.i.e., When i click a button , the popup containing textboxes from external page will shows in the present page. in that textbox i want to use datepicker.
i have used following ajax for Loading a external page
<script type="text/javascript">
function manageapp(id,apcno)
{
/*alert(id);
alert(apcno);*/
//alert(dd);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
var strURL="manage_ajx.php?id="+id+"&acpno="+apcno;
if (req)
{
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200)
{
document.getElementById('show_details').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Following for Popup
<script type="text/javascript">
//New Pop up
$(document).ready(function() {
$('#inline').hide();
$('.login-window').click(function() {
$('#inline').addClass("login-popup");
$('#inline').css({'visibility':'visible'});
// Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup and add close button
$('#inline').fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$('#loginBox').css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
following is for call thae popup page
//php coding
<a class="login-window" href="#inline" title="Business Details" onclick="javascript:manageapp('<?php echo $patientlist[$i]['ap_id']; ?>','<?php echo $patientlist[$i]['apc'];?>')">
<img src="images/calendar-icon.png" title="manage appointment"/>
</a>
?>
//php coding
any body can help me to fix this problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
And for more deatils please follow the link http://jqueryui.com/datepicker/
try this:
$(document).on('load', 'your_datepicker_class_or_id', function(){
$(this).datepicker();
});
and assuming that you have these to referenced above your js stuff:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
I find the solutions , do it as follows, Add the datepicker function in Ajax return function ie in success
<script type="text/javascript">
function manageapp(id,apcno)
{
/*alert(id);
alert(apcno);*/
//alert(dd);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
var strURL="manage_ajx.php?id="+id+"&acpno="+apcno;
if (req)
{
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200)
{
document.getElementById('show_details').innerHTML=req.responseText;
$("#frompop").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
});
$('#timepickerpop').timepicker({ 'timeFormat': 'g:i A','step':15,'minTime': '8:00am','maxTime': '8:00pm' });
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
I just make a simple AJAX application so that my html page can get some data from the php file through the ajax.js file, I have already put them in the server, so when I access localhost/mypage, it should be executed, however it seems there are some problems therefore things do not happen as my expected way.
Here is my html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
<title>
My Portal
</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
<div id="header">
<img src="images/logo.gif" id="logo" alt="Logo"/>
<a href="http://www.google.com">
<img src="images/logo2.png" id="logo2" align="right" alt="google Ltd"/>
</a>
</div>
<div id="container">
<div id="function"></div>
<div id="Display"></div>
<div id="View"></div>
</div>
<div id="footer">
</div>
</body>
</html>
And below is the js file:
function load(){
var xmlhttp;
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else{ // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("function").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php", true);
xmlhttp.send();
}
At last is the php file:
<?php
print "<h1>hgfkegfalhgj</h1>";
?>
I expect it should print out the above char string in my page, however, nothing can be shown, can anyone tell me where is the problem? I have checked that I have already enabled javascript in my browser, so I am quite sure my html file can call the function in js file.
I don't know PHP but you must set content type to text/plain . Like :
header('Content-Type: text/plain');
Your code works for me.
The problem can be any of the following:
1) Check the path to test.php (I would suggest using absolute path in xmlhttp.open() )
2) Your server may not be returning the page correctly (Try opening test.php, and check the output)
You can use browser plugins like firebug, to analyze the ajax request and response, it can give you a better insight.
instead of onLoad function in body tag try with
<script>
window.onload = function(){
load();
};
function load(){
//your code
}
</script>
or try with script load() function before body. I think it will solve your problem.
Also Try to change id, preferably keywords should not be used as id (function id change it to something else)
I have this code to display the data retrieved from DB in accounts_view.php:
<script type="text/javascript">
function showPrice(str)
{
if (str=="")
{
document.getElementById("sender_price").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sender_price").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","?action=account&q="+str,true);
xmlhttp.send();
}
</script>
I have problem in the below line :
xmlhttp.open("GET","?action=account&q="+str,true);
Just to explain to you I have index.php and have many cases there, I have
case "account" :
$q=$_GET["q"];
//code is here to get data from db and return with result..
include($_STR_TEMPLATEPATH."/account_view.php");
break;
So, When I am redirecting to ?action=account&q=str in the account_view.php
it displays the page again, so I will have 2 pages over each other.
I hope the problem is clear to you :)
Thanks and Regards,
I would recommend using jquery to retrieve data from a database if you are wanting to use ajax. All the browser incompatibilities are already accounted for and you won't have to bother coding for all the issues you will encounter trying to accomplish this by hand. basically why re-invent the wheel that is already perfectly created.
Here is an example of my code using jquery and how easy it is to use.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some title</title>
<link href="customize.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/black-tie/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript">
function ShowActive(inputString){
//gives visual that something is happening
$('#Sresults').addClass('loading');
//send your data to a php script here i am only sending one variable
//if using more than one then use json format
$.post("allactive.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
//populate div with results
$('#Sresults').html(data);
$('#Sresults').removeClass('loading');
}
});
}
</script>
</head>
<body>
put your form here ....
<div id="Sresults" name="Sresults"></div>
</body>
I am trying to get the links that appear after clicking the business name to appear in a light box. on a standalone page, it was possible but as soon as I send the same code through ajax, it does not call the light box anymore. help?
This is the original file, which is supposed to represent a 3rd party publisher site, integrating our code:
<html>
<head>
<script type="text/javascript" src="lib/js/jquery-latest.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="lib/js/jquery.ppo.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/js/sp.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
This is the publisher's website. <br>
<div id="bizname1" onclick="showComp(this.innerHTML)" id="bizname" class="bizname">click here - this event should be substituted for an 'on load'.</div><br><br>
lots of data about the company here
<br />
<div id="txtHint"><b>Company info will be listed here.</b></div>
</body>
</html>
This is the ajax script, showcomp.js:
function showComp(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getbutton.php?q="+str,true);
xmlhttp.send();
}
This is the getbutton.php file called by the ajax function:
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include('config.php');
init_connection();
$sql=select content from db;// this part works fine, so actual sql query not inserted here.
$result = mysql_query($sql);
while ($row = mysql_fetch_object($result)) {
$companyname = $row->result1;
$contenturl = $row->result2;
//echo $companyname;
//echo $contenturl;
?>
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="http://www.youtube.com/embed/DudfBIxw6do?iframe=true&width=640&height=390" rel="prettyPhoto" title="my caption"> Video in iframe
<img src="images/thumb-1.jpg" width="100" height="40" alt="Video in iframe" />
</a>
<a href="demo/vidrefer.php?iframe=true&width=500&height=410" rel="prettyPhoto" title="my caption"> Vidrefer in iframe
<img src="images/thumb-1.jpg" width="100" height="40" alt="Vidrefer in iframe" />
</a>
<br />
</BODY>
</HTML>
<?php
}
//echo out button here. give the button what it needs to launch the light box.
echo "
<br>
<div id='button'>
this is a button
</div>
";
//mysql_close($con);
?>
<script id="ppready" type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Please help if you can see why it is not working! Thank you.
I fixed this! the problem was due to the fact that the javascript already acted before I loaded my new elements via ajax. all I had to do was to load my elements in before the ajax call and hey presto!
An alternative solution would have been to use live() or livequery() in jquery. They would have kept the jquery acting on elements both before and after they loaded into the DOM. Simples.
The JS would not run on the client side, when it is just echo'ed from the server side. Try moving your codeblock
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
<-- inside-->
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
To look like :
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$("a[rel^='prettyPhoto']").prettyPhoto();
}