Random string picker only execute once per page load - javascript

When you press the link text it is supposed to give you an random string from a file, which it does on first click. But second click nothing happens, I need to refresh page before execute it again..
Code:
function randomName() {
$names = file('layout/sub/names.txt', FILE_IGNORE_NEW_LINES);
$array = array_rand($names);
return $names[array_rand($names)];
}
<div class="randomName">
</div>
<button class="aardvark">Pick random name</button>
<script>
$(document).on('click','.aardvark', function(e){
$('.randomName').html('<?php echo randomName(); ?>');
});
</script>

The issue is the age old PHP is server side and and javascript(jQuery) is client side problem, you cant call/run PHP from javascript as its already happened.
You will need to use AJAX to re-request a new name. Here is a copy and paste example, your welcome ;p
<?php
//is ajax
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is get name
if(isset($_POST['get_name'])){
$names = file('names.txt', FILE_IGNORE_NEW_LINES);
exit(json_encode(array('resp' => $names[array_rand($names)])));
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//get_name function
$.fn.get_name = function(){
var elm = $(this);
var ajax = $.ajax({
url: "./",
type: "POST",
data: {'get_name':true},
dataType: "json"
});
ajax.done(function(data){
elm.html(data.resp);
});
ajax.fail(function(xhr, status, error){
elm.html("AJAX failed:" + xhr.responseText);
});
return this;
};
//do get_name on page load
$('#randomName').get_name();
//do get_name on button click
$('#aardvark').on('click', function(){
$('#randomName').get_name();
});
});
</script>
</head>
<body>
<div id="randomName"></div>
<button id="aardvark">Pick random name</button>
</body>
</html>

Related

Can not pass variable by ajax to other php file

I want to pass a variable from one PHP file to another, for that, I am trying to use ajax. Now, in my 'index.php' file, I have a button. When that button is clicked, I want to pass that button's id to another PHP file which is 'show_schedule.php'.
Here is my index.php file's ajax code:
$(document).on('click', '.show', function(){
var schedule_id = $(this).attr("id");
$.ajax({
url:"show_schedule.php",
method:"POST",
data:{schedule_id:schedule_id},
dataType:"json",
success:function(data)
{
window.location.href = 'show_schedule.php';
}
});
});
Here is my 'show_schedule.php' file:
<?php
session_start();
if(isset($_POST["schedule_id"])){
$s_id = $_POST['schedule_id'];
echo $s_id;
}
?>
data is index.php is fetched & displayed by 'fetch.php', in which, that button is set like this:
'<button type="button" name="show" id="'.$row["s_id"].'" class="btn btn-primary btn-sm show">Show</button>';
When I click on this button, I am redirected to 'show_schedule.php', but the variable value is not passed, i.e. nothing is printed on that page. Can anyone tell me where I am making mistake? Any help is appriciated.
You could just do the following and change the php to take the GET param i.e.
$(document).on('click', '.show', function(){
var schedule_id = $(this).attr("id");
window.location.href = 'show_schedule.php?schedule_id='+schedule_id;
});
});
If it HAS to be a POST then a few solutions to be found # pass post data with window.location.href
I have send data using jQuery ajax post request to getval.php file and data will be send successfully.
ajax.php
!DOCTYPE html>
<html>
<head>
<title>ajax request</title>
<!-- jQuery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="send-data">send data</button>
<div class="data"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#send-data').click(function () {
let val = "test"; // send val variable data
$.post("getval.php", { value: val }, function (data, status) { //send data using post request
if (status == "success") {
$('#send-data').remove();
$('.data').append(data);
}
});
});
});
</script>
getval.php
<?php
if (isset($_POST['value'])) {
$data = $_POST['value'];
echo "<br>The data is : ".$data;
}
?>
OUTPUT :-
The data is : test

Getting information form json encode

main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="jsfile.js"></script>
</head>
<body>
<button onclick="cart(0)"> hi </button>
<p id="disp"></p>
</body>
</html>
jsfile.js
function cart(id1)
{
var id=id1;
//alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
if (window.jQuery) {
// jQuery is available.
// Print the jQuery version, e.g. "1.0.0":
//alert(window.jQuery.fn.jquery);
}
$.ajax({
url:"add.php ",
type:"POST",
data:{
item_id: id,
},
success:function(response) {
document.getElementById("disp").innerHTML =response.value1;
},
error:function(){
alert("error");
}
});
}
add.php
<?php
if(isset($_POST['item_id'])){
//if(count($_POST)>0)
echo json_encode(array("value1" => "hello", "value2" => "hi"));
}
?>
am collection the informaton from add.php to jsfile.js ... I am not able to get information from the json array.. I am trying to get information by respnse.value1. But it returns me undefined.. what might be the error??
You'll have to parse the JSON before using it. Change your success function to this -
success:function(response) {
var res = JSON.parse(response);
document.getElementById("disp").innerHTML = res.value1;
},

What is wrong with my ajax call to php file in data section?

So I am able to get my php value into javascript variable but I don't think my script.js is finding it. There of course are alot of files missing for the sake of keeping this question clean but my problem is that script.js get schoolId as undefined instead of the actual value but when I console.log schoolId i get a value of "1"(first page has id 1 so that works).
Header.php :
<?php
//gets current page id
$schoolOfficialId = $specificSchool[0]["id"];
?>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
</body>
script.js: ajax call here NOTE: in the ajax i know the data is having trouble finding schoolId from the header.php to send to php file.
// execute an ajax query to push id of page to load_more.php
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
console.log("working");
}
});
my load_more.php:
if (isset($_POST['schoolId'])) {
echo "yes";
}else {
echo "nope";
}//keeps echoing nope because the schoolId is not received
The problem is that you have the script running before the declaration.
<script type="text/javascript" src="js/script.js"></script> is in head, but var schoolId = $('#schoolOfficialId').val(); is at the bottom of the page.
Include the script after declaring schoolId.
<head>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
P.S. despite other answers, data: {schoolId:schoolId}, is perfectly fine unless the keyname conflicts with a reserved word.
Load ajax code after defining var schoolId and also check source code whether php printing value for schoolId correctly or not and also do not forget to use $(document).ready()
<script type="text/javascript">
$(document).ready(function(){
var schoolId = $('#schoolOfficialId').val();
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
alert(data);
}
});
})
</script>
PHP:
if (isset($_POST['schoolId'])) {
echo $_POST['schoolId'];
}else {
echo "nope";
}
By running the following i can see yes in alert ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
var schoolId = $("#schoolOfficialId").val();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {schoolId: schoolId},
success: function (data) {
alert(data);
}
});
});
</script>
</body>
</html>
Ajax file (ajax.php) :
if (isset($_POST['schoolId'])) {
echo "yes";
} else {
echo "nope";
}

AJAX returns random hash instead of text

I am working on live notification script.
I have managed to rend request to external file, but the script returns random hash instead of plain text...
This is my function that should get data from test.php
<script>
$(document).ready(function () {
function load() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "/test.php",
dataType: "html", //expect html to be returned
success: function (response) {
$("#responsecontainer").append(response);
setTimeout(load, 5000)
}
});
}
load(); //if you don't want the click
// $("#display").click(load); //if you want to start the display on click
});
</script>
And it should append to the results.
This is the source of test.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Headerview</title>
</head>
<body>
<?php
$p = "<p>test</p>";
echo $p;
?>
</body>
</html>
And this is what I am getting...
inGN^PtJRo(hi*I1HVb&pB0wJs(B)9rID*6O�Eyh6cngWD+93Zr$zYU
The file path was the problem. I did not specify exact file path.
Thank you

passing data from js file to php using jquery ajax

ajaxcheck.js
var val = "hai";
$.ajax(
{
type: 'POST',
url: 'ajaxphp.php',
data: { "abc" : val },
success :function(data)
{
alert('success');
}
}
)
.done(function(data) {
alert("success :"+data.slice(0, 100));
}
)
.fail(function() {
alert("error");
}
);
ajax.html
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="ajaxcheck.js"></script>
<title>ajax request testing</title>
</head>
<body>
</body>
</html>
ajaxphp.php
<?php
$v_var = $_POST["abc"];
print_r($_POST);
if(isset($_POST["abc"]))
{
echo $v_var;
}
else
{
echo "Data not received";
}
?>
When I run the ajax.html file ,I get success alert. But when I run ajaxphp.php file it shows notice like:
undefined index abc
Why is that the data is not received in $v_var ? where i am mistaking ?please help.
Actually the ajaxphp.php file is used to receive the data from the
post method and i will give response .
In First case by using ajax post method it will call to ajaxphp.php file.
In Second case your using direct file call without any post data(that's way it shows error)
Try this
var val = "hai"
$.post( "ajaxphp.php", {'abc':val}function( data ) {
alert( "Data Loaded: " + data );
});
jQuery expects an object as data, remove the double-quotes:
data: { abc : val }

Categories