I'm trying to figure out how to use Ajax. The only thing that I succeeded learning is the load function. Now I'm try to use $.ajax({}). Now here's my attempt using this function:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#send").click(function(){
$.ajax({
url:"show.php",
method: "post",
data :{value: <?php echo $value;?>},
success:function(data){
$("#showVal").html(data);
alert("succes");
}
});
});
});
</script>
</head>
<body>
<p id="showVal" ></p>
<form id="test" name="tst">
<?php
$value = 15;
?>
<button type="button" id="send">Press me!</button>
</form>
</body>
</html>
And the show.php file is:
<?php
$val=$_POST['value'];
echo 'Your value '.$val.' . Have a nice day!';?>
If you know what could be the problem share with me ! Thanks ! Have a great day guys!
Related
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tutorial</title>
</head>
<body>
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="close()"><p>×</p></button>
</div>
<script src="script.js" charset="UTF-8"></script>
</body>
</html>
and this is my script.js:
function close() {
document.getElementById("alert").style.display = "none";
}
for some reason i can't use it externally, but when i use it inline it works. i've been searching for the answer for hours, but i can't find it anywhere, please help!
Change the name of the function from 'close' to another name like 'hideAlert'
function hideAlert() {
document.getElementById("alert").style.display = "none";
}
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="hideAlert()"><p>×</p></button>
</div>
I've been attempting to create a simple page which updates after you have selected an <option> from a <select> tag.
So far I have been able to get a request going thru for my PHP script to receive the value of the selected option, but the response isn't affecting the displayed content (even though it really should). Firefox shows that the response is the entire page again, but with some additional text attached by the script so I know it went thru.
Even though I receive the response with the updated page/content, the page never seems to update.
index.php:
<?php
$pageName = "Index";
include "static/header.php";
require "static/db.php";
try {
$stmt = $db->prepare("SELECT id, year, make FROM public.vehs");
$stmt->execute();
$vals = $stmt->fetchAll();
} catch (Exception $e) {
die($e->getMessage());
}
#
#
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
?>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<?php
foreach($vals as $row) {
echo("<option value='{$row["id"]}'>{$row["year"]} - {$row["make"]}</option>");
}
?>
</select><br>
<?php if(!empty($message)): ?>
<p><?= $message ?></p>
<?php endif; ?>
</body>
header.php:
<?php
$pageName;
?>
<head>
<title>Test Website - <?php echo $pageName ?></title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"> # Really just jQuery, idk why i named it that
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
The request's response:
<head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<option value='1'>2020 - Test</option> </select><br>
<p>value set</p>
</body>
What I see in the browser after the request:
<html><head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js" <script=""></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled="" selected=""></option>
<option value="1">2020 - Test</option> </select><br>
</body></html>
To achieve what you want to do create another file like selected.php, because you are loading the whole HTML page while you only want to change the value inside p, then after the data loaded you need to change the text inside p using $('p').text(data)
// selected.php
<?php
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
echo $message;
?>
Edit your index.php file, to look like this
.....
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('selected.php', { dropdownValue: inputValue }, function(data){
$('p').text(data)
});
})
});
</script>
......
<p>value not set</p>
Hope this will help!
I'm trying to call the M.toast() function in Googles materializecss, but I get an error message:
Uncaught ReferenceError: M is not defined
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" type="text/css" href="styles/materialize.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script type="text/javascript" src="scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script>
</head>
<body>
<form action="#">
<button class="waves-effect waves-light btn" id="submit" type="submit" name="submit">
Submit
</button>
</form>
<script type="text/javascript" src="scripts/register.js"></script>
</body>
</html>
register.js
(function() {
'use strict';
$('form').submit(
function(e) {
let $radio = $("input:radio[name='myradio']");
if (!$radio.is(':checked')) {
e.preventDefault();
toast();
return false;
}
});
function toast() {
M.toast({html: 'Bitte alle Felder auswählen!'});
}
})();
Did I forget to include something or what is the matter?
Solution: updated MaterializeCSS to version 1.0.0
I want to get data from other page with js or jquery or ajax but not php. I just found a sample on stack overflow. (here is the link) But when I write these codes on my index.html file, it doesn't work. I don't understand reason. Here is my codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type=”text/javascript”>
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'https://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
it works as it is...
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I solved my problem these codes, thank for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var url = 'deneme.html';
$.get(url, function(response) {
$('div#external').html($(response).find('#content>ul>li').html());
});
});
</script>
<style> body, html{padding: 0; margin:0;}</style>
</head>
<body>
<div id="external" >
</div>
</body>
</html>
Im programing website, I use this code before and it works perfect but now when I want to use some flash parts its realoading all website everytime I click link.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Hot King Staff</title>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="tagi" />
<meta name="Author" content="Filip Jóźwiak" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquB895.js"></script>
</head>
<body>
<div id="cialo">
<?php include('header.php'); ?>
<?php include('menu.php'); ?>
</div>
<div id="content">
<?php
$id = isset($_GET['id']) ? $_GET['id'] : '';
switch($id)
{
case '':
include 'content/news.php';
break;
case '2':
include 'content/dogs.php';
break;
case '3':
include 'content/training.php';
break;
case '4':
include 'content/links.php';
break;
case '5':
include 'content/contact.php';
break;
default:
echo 'Taka strona nie istnieje';
break;
}
?>
</div>
</body>
</html>
and this is code of my menu.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
</body>
</html>
Can you help me with that, thanks for response.
first:
you are including ur menu, why did you set:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
</body>
</html>
??? if you wnt to include this, than include just your menu:
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
If you want to change a specific part of the site without refreshing it completly you could use jQuery
In your main page add this piece of jquery but notice that before you can use jquery you will need to include it in your website
$.ajax({
url: '/pages.php?page=dogs
success: function(data) {
$('#content').innerHTML(data);
}
});
Now create a pages.php
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET') {
if (isset($_GET['page'])) {
$page = $_GET['page'];
switch($page)
{
case 'dogs':
echo 'dogs';
break;
case 'cats':
echo 'cats';
break;
default:
echo 'Taka strona nie istnieje';
break;
}
}
}
?>
And don't forget to add the content div in your main page like so
<div id="content"></div>