jQuery Ajax request not working as I intended - php

I'm just testing Ajax request. It seems the request was sent successfully but not getting any contents back when it is supposed to. Can anyone help me with this?
I'm using IIS to deploy my app on localhost.
And yes, I have added Module Mapping wizard, with following values:
Request path: *.php
Module: FastCgiModule
Executable: C:\php\php-cgi.exe (or the path to your PHP executable)
Name: PHP via FastCGI
Request sent successfully
head.html
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Comments</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Bootstrap Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
<!-- DataTables js -->
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<!-- main js -->
<!-- <script src='main.js' defer></script> -->
index.php
<!DOCTYPE html>
<html>
<head>
<? include_once $_SERVER["DOCUMENT_ROOT"]."/includes/head.html"; ?>
</head>
<body>
<script>
$(document).ready(function(){
$.ajax({
url: 'api2.php',
type: 'POST',
data: {
'fn': 'test',
'returnJson': true
},
success: function(d) {
console.log(d)
}
})
})
</script>
</body>
</html>
api2.php
<?php
function test() {
return 'hello';
}
?>
Added Module Mapping wizard, enter the following values:
Request path: *.php
Module: FastCgiModule
Executable: C:\php\php-cgi.exe (or the path to your PHP executable)
Name: PHP via FastCGI
Click Request Restrictions, select the File or folder radio button, and then click OK.

Related

When making a chatbot using botman and larvel the botman chatframe isn't working properly

The botman widget appears okay but when i open it to view the chat frame it gives error 404 inside the chat frame.
This is the part where i declare the botman widget
<script>
var botmanWidget = {
frameEndpoint:'https://www.youtube.com/'
aboutText: 'ssdsd',
introMessage: "✋ Hi! I'm form ItSolutionStuff.com"
title: 'BotMan'
};
</script>
<script src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/widget.js'></script>
and this is the chat.html file referenced by the botmanWidget
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/assets/css/chat.min.css">
<title>BOtMANS</title>
</head>
<body>
<script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/chat.js'></script>
</body>
</html>
The frameEndpoint should be an URL. So either you put in an absolute URL, f. ex. https://your-url.com or a relative one with forward slashes /, f. ex. /config/botman/chat.html.
You can test, if your frame page is callable by using the current domain you run your site on and append /config/botman/chat.html.

How to Properly Include an Angular App inside a PHP application

Let's say I'm starting with a PHP application. On one of the pages on the site, there's a complex interactive app that I want to use Angular for. The problem is, I still want the header and footer of that page to match the rest of the site. I would love to be able to do something like this:
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
It somewhat works for me to just PHP include the Angular HTML file there, but that's pretty janky because, of course, the Angular index.html file already includes a html, body, etc. tags. Of course I could DOM parse the Angular file and fix all that before including...but I'd prefer a better solution.
In my searching I can't seem to find any officially recommended way of doing this. Actually I can't seem to find any examples of anyone doing this at all–all my searches just turn up people doing something similar with AngularJS, not Angular. Is there any decent way to accomplish this with Angular?
You should be able to do what you want to do.
Here's the content of a index.html for a web based chat program I did as a HW project (the back end was much more fun...).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />\n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
As long as you keep the same js file references and style sheets, styles (on <body> tag) etc. then you should be able to drop that in and toss in the <app></app> tag set just where you want it.
Just for giggles I renamed the file to index.php on my server, added a print statement to print date/time page was loaded, no issues.
As of angular6, this should be possible using angular elements.
Your code would then simply be
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles" rel="stylesheet">
<?php if ($somevar == true) : ?>
echo "Yes, it has to be PHP";
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<your-component-name></your-component-name>
</body>
You can find a guide on how to create angular elements at https://angular.io/guide/elements - in principle, it is no harder than just creating a component
As someone might still come across this issue (like me), I want to share my solution:
As we are currently changing from a pure PHP page to an Angular approach, we need to include some basic php-stuff in the head of the index file of the Angular build process. Therefore, I added a postbuild-Step, which will automatically run after the build-step.
However, this step is running a node.js script which simply adds the php include we need in the index.php of the dist-Folder
const fs = require('fs');
const path = require('path');
const sourceDir = path.join('dist', 'path');
const phpTag = "<?php include_once './some.php' ?>\n";
const file = path.join(sourceDir, 'index.php');
fs.readFile(file, 'utf8', function (err, content) {
if (err) throw err;
if (!content.startsWith(phpTag)) {
content = phpTag + content;
fs.writeFile(file, content, 'utf8', function (err) {
if (err) throw err;
});
}
});
and these are the entries of my package.json:
"scripts": {
"build": "ng build",
"postbuild": "node ./addPHPTag.ts",

Why is site_url hiding my html file

Im trying to hide my url for the css and only display the relative path. here is my html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="<?php echo site_url('css/bootstrap.min.css'); ?>" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Then when i view in browser my source code shows this.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="
How do i fix this. The file im using is a php file.
Did you load the url helper?
$this->load->helper('url');
You can also Auto Load the helpers if you want to only load them once
To autoload resources, open the application/config/autoload.php file and add the item you want loaded to the autoload array. You'll find instructions in that file corresponding to each type of item.
CodeIgniter AutoLoad
I could not find the function site_url in the default php library, is PEAR enabled on your server?
if you want the relative path you could use:
<?php echo $SERVER['HTTP_HOST'].'css/bootstrap.min.css'; ?>
or just
../css/bootstrap.min.css
or directly from the root
/css/bootstrap.min.css

jqplot chart is not displaying in my jquerymobile page

i am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page.
libraries i
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
javascript i written:
$(document).bind("mobileinit",function() {
// go to server for chart data
$('#pagePlotChart').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{
title:'My Chart',
axesDefaults:
{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes:
{ xaxis: { label:"Day", pad: 0 },
yaxis: { label: "Measurement" }
}
});
});
return false;
});
});
html code:
<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
<header data-role="header" data-position="fixed">
<h1>Plot Chart</h1>
</header>
<section data-role="content">
<div id="plotChart" class="myChart"></div>
<button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
</section>
</div>
actually i have to take json data from some php file and pass to this chart. and chart shuld display the graph by using that json data from some php file.
my json data will be in this formate ["v1:myName","g:233","h:322"]..etc.
php file is sending json data. i checked in fidler. but chart is not working.
please tell me solution for this.
First of all I notice you are loading jQuery mobile twice in your page header. Try removing the older version, and moving most or all of your JS includes to the page footer, that way your page can (partially) render before the JS files are downloaded by the browser. Best practice for the jqplot components is certainly to move includes to the footer.
The actual order of loading the jqplot components is almost right. It looks like the main jQuery file needs to be loaded before the main jqplot file, though - right now only the mobile version of jQuery is loading before jqplot. Please see this answer for more detail.
If jqplot is loading but the data is not present, or possibly the data or chart code has a bug, you will see a blank space in the page where the chart should be. Make sure that you can load a static chart page hand-assembled with the data you are getting from your PHP page. This will test the data and the includes.
If jqplot is not loading at all (for example if dependencies are not loaded in correct order) you will not see any empty space for the chart at all on your page and it will be rendered with zero space where the chart should be.
It looks like you are calling the chart div correctly. However I am not sure if $(document).bind("mobileinit",function() is working. The base call for jqplot is normally
$(document).ready(function(). Setting up charts in divs that aren't initially visible when the page is rendered can be tricky. This question might help if that's what the problem is.
See this related question about jQuery Mobile rendering content after page is initialized. Basically you can use .trigger('create') per naugtur's comment.
There is an easier way (worked in my case):
-first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
-finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!

jQuery for HTML to PHP - Function Error

I have just purchased "Tonic Gallery" which my client thinks it's absolutely perfect for his website. The difficulty is that it works great with HTML but for ".php" it won't even load.
To give you a better idea, here two links:
Tonic Gallery Link: http://codecanyon.net/item/tonic-gal...gallery/120710
LincHospitality.com: http://linchospitality.com/
This is inputed into the "Portfolio" tab. As per instructions, I have entered the following into the "head" (header.php):
<link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
<link rel="stylesheet" type="text/css" href="styles/demo_styles.css"/>
<link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"/>
<script type="text/javascript" src="script/jquery-1.4.js"></script>
<script type="text/javascript" src="script/jquery-easing.js"></script>
<script type="text/javascript" src="script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="script/portfolio-setter.js"></script>
<script type="text/javascript">
$(function(){
// init the portfolio functionality
$('#portfolio_wavy').portfolioSetter({xmlSource:'portfolio.xml', wavyAnimation:true});
});
</script>
I had then created the "portfolio.php" page with the required input from the plugin:
<?php $page = "portfolio";?>
<?php include("header.php"); ?>
<div role="main">
<div class="wrapper" id="subPagesWrap">
<div id="portfolio_wavy"></div>
</div><!-- wrapper -->
</div> <!-- end main -->
<?php include("footer.php"); ?>
The in a direct ".html" file, it works perfectly! But since I had placed in the "header.php" and "portfolio.php", I get the following error:
$("#portfolio_wavy").portfolioSetter is not a function
Here is a link to the ".html" files as to how it's suppose to work. Same functions, same root folder just not working in ".php".
linchospitality "/" gallery [dot] html
How do I over come this function error? Any simple methods?
Thanks!
You need to run the function after it has loaded. You can make sure of this by running it on the document ready event. I am not sure of the syntax you are using, but just make sure that it is run after the document ready is fired.

Categories