I've got a php function that i would like to run from a Html button I've got.
The php function is on a separate file than the Html button.
So I've managed to do this with:
<input type="submit" name="test" id="bt1" value="RUN" /><br/>
But that is not what i want to do. I want to call the php function with:
<button id="bt1" class="button button5">< Random </button>
as there are other actions coupled with the button that need to run at the same time.
Side note: My php function gets info from a json file.
I've got 3 files.
File 1 (AF.php) this is where the button is
File 2(Display.php) This is where my jquery/javascript/ajax scripts are
File 3(Names.php) This is where the php function is. I want to use button from File 1 to run php function from File 3.
So here is what I've tried so far:
File 1(AF.php)
button id="bt1" class="button button5">< R30K</button>
File 2(Display.php)
$(document).ready(function () {
$("#bt1").on("click", (function () {
getName("Names.php");
})
});
function getName(Names.php) {
$.ajax({
url:"Names.php" + Names.php,
success:function (Names.php) {
$("#res" + Names.php).html(result)
}
});
File 3(Names.php)
<?php
function group1(){
$jsondata = file_get_contents("Clients.json");
$json = json_decode($jsondata, true);
$output = '<ul>';
foreach($json['Reps']as $reps){
$output .='<h4>' .$reps['Client']."<h4>";
$output .= "<li>".$reps['repCode']."</li>";
}
$element = $json['Reps'][array_rand($json['Reps'])];
echo $element['Client'];
echo " ";
echo $element['repCode'];
}
if(array_key_exists('bt1',$_POST)){
group1();
}
?>
Desired outcome would be that I can run my function from File 3 with that Html buttom from File 1.
You're help is greatly appreciated.
Your HTML with that button and your jQuery code must be in the same document that is loaded by your browser, either by putting them in the same file or using php include/require.
That jQuery code will not run because you put "Names.php" everywhere (Why?). Try this:
$( function(){
$("#bt1").click(function() {
$.ajax({
url: 'Names.php',
type: 'get',
success: function(data) {
$("#res").html(data);
},
});
});
});
This will put the ajax response string into any element with id="res".
Code was tested and works.
Edit:
I just noticed that you are using $_POST in your php script to check if the button was clicked, so you will have to modify the jQuery ajax function:
Change type: 'get', to type: 'post',
Add data: 'bt1=1', after 'type: 'post'.
Related
I have a php file with the directory "JqueryPHP/HighestBid.php". All I want to do is be able to post javascript variables from one file "views/AuctionPage.php" to another file "JqueryPHP/HighestBid.php".
I then want to echo a value from "JqueryPHP/HighestBid.php" into the span tags with the id "price" into "views/AuctionPage.php".
The problem is that when I load the page "views/AuctionPage.php" it shows me the alert with the returned value "hi" but where the text is supposed to be outputted between the span tags, it is telling me that the index within my $POST array is undefined.
//JS views/AuctionPage.php
<script>
$(document).ready(function() {
var auc = "hi";
$.ajax({
url: "JqueryPHP/HighestBid.php",
method: "POST",
data: {'auctionid': auc },
success: function (result) {
alert("result: " + result);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#price').load('JqueryPHP/HighestBid.php')
}, 333);
});
</script>
//HTML views/AuctionPage.php
<h4 class="price">Highest bid : <span id="price"></span></h4>
//PHP FILE "JqueryPHP/HighestBid.php"
<?php
$auctionid = $_POST['auctionid'];
echo $auctionid;
?>
When I get rid of the $POST array in "JqueryPHP/HighestBid.php" and just assign auctionid with a normal string.
<?php
$auctionid = "hi";
echo $auctionid;
?>
the text gets outputted between the span tags like it's supposed too so I am having a problem posting the variables to another page and I have no idea why. I have tried many ways to get this to work following examples on stack overflow but to no success.
This line:
$('#price').load('JqueryPHP/HighestBid.php')
loads the JqueryPHP/HighestBid.php script using GET, and that's another, completely independent request from your AJAX one, that's why the $_POST superglobal is empty. What you need to do is to change the span inside the success function of your AJAX call:
$.ajax({
url: "JqueryPHP/HighestBid.php",
method: "POST",
data: {'auctionid': auc },
success: function (result) {
// alert("result: " + result);
$('#price').html(result);
}
});
That gives the result you need. Delete the whole setInterval code, you don't need it at all.
When I click a button:
I need the JavaScript to perform some function.
Also run PHP code as well.
How can we achieve this?
PHP is only run by the server and responds to requests like clicking on a link/button (GET) or submitting a form (POST).
HTML & JavaScript is only run in someone's browser.
<html>
<?php
function PhpFunction() {
echo 'A php function';
}
if (isset($_GET['JsFunction'])) {
PhpFunction();
}
?>
Hello there!
<a href='index.php?JsFunction=true'>Run PHP Function On Click Of This Link</a>
</html>
Alternatively ,
You can create a ajax request to run a php code in your server..
Ajax can help you to send an asynchronous request to the server that php (or other) can catch, in this way you can implement and play with some callback functions
$.ajax({
url : "yourScript.php", // the resource where youre request will go throw
type : "POST", // HTTP verb
data : { action: 'myActionToGetHits', param2 : myVar2 },
dataType: "json",
success : function (response) {
//in your case, you should return from the php method some fomated data that you //need throw the data var object in param
data = toJson(response) // optional
//heres your code
},
error : //some code,
complete : //...
});
in your php script, you'll receive the request posted throw the superglobal vars like POST (for this example)
<?php
$action = (string)$_POST['action']; //this is unsecure, its just for the example
if("myActionToGetHits" == $action) {
//here you have to call your php function and so on..
$data = hitsMonth();
echo $data;
exit;
}
here is html
<a href="#" onclick="javascript:functionName(arg1, arg2);">
This is a basic example to do it, there are lots of ways to do.
Have javascript do the submit:
function button1() {
// js code here
var formelt = document.getElementById("form1");
formelt.submit(); // this will submit the form to server
}
Example =>
<button class="btn-test">Btn Test</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
jQuery('.btn-test').click(function() {
js_do_something();
php_do_something();
});
function js_do_something() {
console.log('something done from js');
}
function php_do_something() {
console.log('something done from php');
jQuery.ajax({
type: "POST",
url: 'you_php_file.php',
data: {param: 'btn-test-click'},
success: function () {
console.log('success');
}
});
}
</script>
There you have how to execute a php function with on Onclick.
Execute PHP function with onClick
You can execute a Javascript function assuming you´re using jQuery like this:
jQuery('#id-button').on('click', function(){
// your function body
});
I'm trying to use AJAX so that you don't see the reload refresh.
i want if i change the select button from 1 to 5 that you can see 5 live change and that i can use the 5 in a php variable.
i got this:
<script>
$(document).on('change', '#hoeveelheid', function(e) {
var j_Hoeveelheid = this.options[e.target.selectedIndex].text;
$.ajax({
type: 'POST',
url: 'do.php',
data: {aantal : j_Hoeveelheid},
success: function (data) {
$('.test').html(data);
}
});
}
</script>
Now is my question what i need to set in the do.php file?
so that my script works without any refresh visible.
what i need to set in the do.php file?
At php file you are sending this object:
data: {aantal : j_Hoeveelheid},
so you need to get the key aantal at php end.
You can do this in your php file:
<?php
$aantal = $_POST['aantal'];
echo $aantal . " is the posted value of dropdown.";
?>
My div contains a PHP function having an sql query which fetch latest threads from threads table. The structure of my page is something like this;
Section # 1 --- Link 1
Section # 2 --- Link 2
Section # 3 --- Link 3
What I want to do is to make it so like when Link 1 is clicked it shows the latest threads from Section 1, and when Link 3 is clicked then it shows latest threads of Section 3.
PLEASE NOTE: I know that I can use slidetoggle() jQuery function to show and hide div, but I want to make it so that WHEN link is clicked THEN runs the sql query to show latest threads. I'm using the following jQuery;
jQuery(document).ready(function($)
{
$('a[id^="forum_name"]').on('click', function (e)
{
e.preventDefault();
var fid = $(this).attr("fid");
$.ajax(
{
type: "POST",
url: 'latest_threads.php?fid='+fid,
dataType: 'json',
success: function (data)
{
$("#forum_threads_"+fid).html(data).stop().slideToggle("fast");
}
});
});
});
My PHP file latest_threads.php has the following code;
<?php
define("IN_MYBB", 1);
require_once "./global.php";
if ($mybb->input['fid'] != "")
{
require_once MYBB_ROOT."inc/functions.php";
$fid = intval($mybb->input['fid']);
$forum['forum_threads'] = kalachi_forum_threads($fid);
}
?>
and My HTML is like;
{$forum['threads']}
<div id="forum_threads_{$forum['fid']}" style="display: none;">{$forum['forum_threads']}</div>
But it doesn't works, please help!
jQuery:
jQuery(document).ready(function($){
$('a[id^="forum_name"]').on('click', function (e){
e.preventDefault();
var fid = $(this).attr("fid");
$.ajax(
{
type : "post",
dataType: "html",
url : "misc.php?action=forum_threads&fid="+fid,
cache: false,
success : function(response)
{
$("#forum_threads_"+fid).stop().slideToggle("fast").html(response);
}
});
});
});
PHP:
<?php
define("IN_MYBB", 1);
require_once "./global.php";
if ($mybb->input['fid'] != "")
{
require_once MYBB_ROOT."inc/functions.php";
$fid = intval($mybb->input['fid']);
echo $forum['forum_threads'] = kalachi_forum_threads($fid);
exit;
}
?>
In HTML:
Change the last line to this:
<div id="forum_threads_{$forum['fid']}"></div>
You're not outputting your response as far as I can see.
Try something like this:
...
$forum['forum_threads'] = kalachi_forum_threads($fid);
echo $forum['forum_threads']
exit();
...
I added the echo line to output the actual response back to your browser.
You can read Ajax tutorial.
But in your case, you should know, the data that you are showing in your div in this part of your code :
success: function (data)
{
$("#forum_threads_"+fid).html(data).stop().slideToggle("fast");
}
is the response of your php code.
Your php response is any output of your php code, it can be a simple echo 'something' or a html code, or including a html file etc.
generete a html code or include a html file in your php code, anything that you want to show in your div.
Note: always put a die() or exit() in the end of your php code.
This is a simple example :
HTML :
<div id="c1" onclick="javascript:loadcontent(1);">click</div><br>
<div id="c2" onclick="javascript:loadcontent(2);">click</div><br>
<div id="c1" onclick="javascript:loadcontent(3);">click</div><br/
Javascript (jquery) :
<script>
function loadcontent(id) {
$.post("yourphp.php", {id: id}, function(data) {
if (data) {
$("#c" + id).html(data);
}
else
{
alert("error");
}
});
}
</script>
PHP - yourphp.php :
<?php
$id = $_POST['id'];
require 'filename'.$id.".html";
die;
?>
Then you must create 3 html files with names : filename1.html , filename2.html , filename3.html
and put any content in them that you want to show in your divs with id c1,c2 or c3 .
Thats it
I have an HTML form which i populate from a database. On submit we load a page called "viewgame.php". Now what i want is here to run some scripts to populate some tables with data but how exactly can i pass the variable which i got from the form ex. $_POST['gameNo'] to the other php file though JavaScript?
Below is some of my code
JS function
function refreshGameinfo() {
var load = $.get('gameinfo_sc.php');
$(".gameinfo").html('Refreshing');
load.error(function() {
console.log("Mlkia kaneis");
$(".gameinfo").html('failed to load');
// do something here if request failed
});
load.success(function(res) {
console.log("Success");
$(".gameinfo").html(res);
});
load.done(function() {
console.log("Completed");
});
}
How can i pass the $POST_['gameNo'] to the gameinfo_sc.php file so that i can get the correct results?
Try this
var load = $.get('gameinfo_sc.php',{gameNo:"1212"});
In your php file you can access it using
$_GET['gameNo']
For post method use
var load = $.post('gameinfo_sc.php',{gameNo:"1212"});
In your php file you can access it using
$_POST['gameNo']
You are trying to post $POST_['gameNo'] to gameinfo_sc.php but $.get isn't the right method for post, its actually for http get. you can also do this by using $.post http://api.jquery.com/jquery.post/
function refreshGameinfo() {
$.ajax({
type: "POST",
url: "gameinfo_sc.php",
data: {gameNo: data},
cache: false,
success: function(html){
console.log( "Success" );
$(".gameinfo").html(res);
},
error:function(html){
console.log("Mlkia kaneis");
$(".gameinfo").html('failed to load');
}
});
}
try this
You can do it like this:
(in html layout):
<input type="hidden" id="gameNo" value="<?=$_POST['gameNo']?>" />
(in js file):
var gameNo = $('#gameNo').val();
var load = $.get('gameinfo_sc.php', {gameNo: gameNo});
....
UPDATE:
If your server doesn't support short open tags, you can write:
<input type="hidden" id="gameNo" value="<?php echo $_POST['gameNo'] ?>" />