I have this next html document, which has to load a table, which is filled with the values I get back from a XMLHttpRequest.
when I try to run the page, it won't give anything like a table back, so if anyone sees what's the problem in this code, please help!!
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
initialiseListEvenementen();
};
initialiseListEvenementen() {
var BASE_URL = "http://localhost:8080/OnzeBuurt2/resources/";
var events = [];
//load the groups from the back-end
var request = new XMLHttpRequest();
request.open("GET", BASE_URL + "events");
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
}
function createListElementForEvent(eventIndex) {
var datum = $("<p>").text("Datum: " + events[eventIndex].datum);
var titel = $("<p>").text("Titel: " + events[eventIndex].titel);
var details = $("<p>").text("Details: " + events[eventIndex].details);
var auteur = $("<p>").text("auteur: " + events[eventIndex].auteur.naam);
var latitude = $("<p>").text("Datum: " + events[eventIndex].locatie.latitude);
var longitude = $("<p>").text("Datum: " + events[eventIndex].locatie.longitude);
return $("<li>").append(datum).append(titel).append(details).append(auteur).append(latitude).append(longitude);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
<ul id="eventList" class="lijst"></ul>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</div>
</body>
</html>
after couple of hours of work, I found the solution. Hope i can help some of you:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var url = "http://localhost:8080/OnzeBuurt2/resources/events";
var events = [];
$(document).ready(function() {
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
alert("fout gegaan");
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
});
function createListElementForEvent(eventIndex) {
var datum = $("<td>").text(events[eventIndex].datum);
var titel = $("<td>").text(events[eventIndex].titel + " - " + events[eventIndex].details);
var auteur = $("<td>").text(events[eventIndex].auteur.naam);
return $("<tr>").append(datum).append(titel).append(auteur);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
</div>
<div class="tabelEvents">
<table id="eventList" class="tabel" border="1">
<tr><th>Datum</th><th>Titel</th><th>Auteur</th></tr>
</table>
</div>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</body>
</html>
Related
I want to build a web with HTML, CSS, Javascript, PHP and MySQL. I want my web will have a feature that the customers want to download the file from the web, if they don't want to download faster, no need to go through the shorten link, they will enter the code and web will use PHP and MySQL to check if the code is in the database. If the code valid, they will press the Next button to go to download file.
This is all my code:
HTML + CSS + JS + PHP:
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length)!=12) {
document.getElementById("ok").disabled = true;
} else if ((x.length)==12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
$conn = mysqli_connect("","","","");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
$sql = "SELECT * FROM code WHERE code='$code'";
$result = mysqli_query($conn,$sql);
if (mysqli_num_rows($result) == 1) {
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>
</html>
In the code below, I want to be able to run the function immediately without using the setTimeout() function:
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
Please help me!
This function will be invoked immediately. IIFE
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})()
Is removing the setTimeout only not enough?
<script>
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})();
</script>
<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>
//---
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length) != 12) {
document.getElementById("ok").disabled = true;
} else if ((x.length) == 12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
//$conn = mysqli_connect("", "", "", "");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
//$sql = "SELECT * FROM code WHERE code='$code'";
//$result = mysqli_query($conn, $sql);
//if (mysqli_num_rows($result) == 1) {
if (1 == 1) {
echo "<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>
I want the whole page content to change when I press the button from the Words.html to SelectNumber.html
This is the Words.html
<html>
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div id = "firstScreen">
<h1 id ="Title" class = "title">
The<br>Number Game
</h1>
<input type = "image" src = "button.png" class = "button1" onclick = "loadScreen">
<h3 class = "start">START</h3>
</div>
</body>
<script src = "Main.js"> </script>
</html>
This is the JS
function loadScreen()
{
var load = new XMLHttpRequest();
load.onreadystatechange = function()
{
document.getElementById("firstScreen").innerHTML = this.responseText;
}
};
load.open("GET", "SelectNumber.html", true);
load.send();
}
function myFunction(load)
{
document.getElementById("firstScreen").innerHTML = load.responseText;
}
And this is the SelectNumber.html
<html>
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div id="Screen2">
<p> Hello World</p>
</div>
<script src = "Main.js"></script>
</body>
</html>
I want the whole content to change from Words.html to NumberSelect.html when I press the input button.
function loadScreen() {
var load = new XMLHttpRequest();
load.onreadystatechange = function() {
document.getElementById("firstScreen").innerHTML = this.responseText;
}
load.open("GET", "select.html", true);
load.send();
}
function myFunction(load) {
document.getElementById("firstScreen").innerHTML = this.responseText;
}
loadScreen();
When I type in an artist and I click the button, I should get a nice list of their songs in a format that is aesthetically pleasing.
My error is:
Nothing is returns whenever I press the button, I don't know why that is.
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Songs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="ajaxfunctions.js"></script>
</head>
<body>
<div class="container">
<h2>Songs </h2>
<br/>
<p>Try entering an artist to find their songs</p>
<div>
<div id="musicbox" class="control-group">
<label for="songs">artistr</label>
<input type="text" name="songs" id="songs" placeholder="Type an artist to their songs" />
</div>
</div>
<br />
<div>
<button class='btn btn-success btn-large' onclick="Music('songs')">Find Songs</button>
</div>
<br />
<div>
</div>
</div>
</body>
</html>
JS File
function Music(music) {
var yourmusic = document.getElementById(music).value;
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function () {
if (this.readyState === 4) {
if(this.status === 200) {
displayMusic(this.responseText);
} else if (this.status === 404){
displayMusic('{ "songs" : "none" }');
} else {
console.log("We have a problem: " + this.status);
}
} else {
}
};
var url = " https://api.mixcloud.com/discover/funk/";
httpRequest.open("GET", url, true);
httpRequest.send();
}
function displayMusic(data){
var music = JSON.parse(data);
if(music.songs === "none") {
document.getElementById("songs").className = "alert alert-warning";
document.getElementById("songs").innerHTML = "The songs are" + music;
} else {
document.getElementById("songs").className = "alert alert-success";
document.getElementById("songs").innerHTML ="there are no songs for this artist"
}
}
I am creating a chat service, everything works fine except for one little detail, the scrollbar. I'm using the jQuery Custom Scrollbar plugin.
It doesn't go to the bottom, sometimes it's does really well but sometimes it stuck in the half from the last message, I have been working in this detail for one week and I can't figure out what's the problem yet.
Here's my HTML
<!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">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>---</title>
<!-- Main CSS -->
<link rel="stylesheet" href="css/default.css">
<!-- Extra CSS -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<!-- All JS Scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.elastic.source.js"></script>
<script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="js/flowtype.js"></script>
<script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Perfect Scrollbar
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<script src="js/perfect-scrollbar.js"></script>-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if !IE]><!--><script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</head>
<body onload="initialize()">
<div class="row">
<div id="chat_intro">
<div class="chat_caller" onclick="goToChat()">
<h1>Enter</h1>
</div>
</div>
</div>
<div id="chat_box">
<div id="chat_top" hidden="hidden">
<div id="chat_header">
<h4>Personal support</h4>
<p>Find the best product for you.</p>
</div>
<div id="chat_avatar"></div>
</div>
<div id="chat_container">
<div id="history_div">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" type="text" onkeypress="chatHandler(event)">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#chat_box').hide();
$('#chat_footer').hide();
});
</script>
</script>-->
</body>
</html>
And now, the JS:
function goToChat() {
origin = BANNER_NAME + "_" + uid + metaData;
$("#chat_intro").hide();
$("#chat_box").show();
$("#chat_top").show();
$("#chat_container").show();
$("#chat_footer").show();
$("#history_div").mCustomScrollbar( {
theme : "dark-thick",
advanced : {
updateOnContentResize : true
}
});
document.getElementById('input_area').focus();
chat();
}
function chatHandler(event) {
// ENTER key
var key;
if (window.event) // IE8 and earlier
{
key = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
key = event.which;
}
InputInterface.restartTimeout();
if (key == 13) {
chat();
$('#input_area').focus();
event.keyCode = 0;
}
}
function chat() {
// Build request
var chatText = "";
if (!initialized) {
chatText = "hi";
}
else {
chatText = input_area.value;
if(chatText.trim()=="")return;
var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
history_mc.innerHTML += userAnswer;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
$("#history_div").mCustomScrollbar("scrollTo", "bottom");
});
$(input_area).val("");
if(getUrlParameter("isMobile") == "true") hideKeyboard();
}
$("#deleteThis").remove();
InputInterface.prepareSending(chatText);
setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE;
$("#history_div").mCustomScrollbar("scrollTo", "bottom");});
if(!initialized){
InputInterface.flush();
initialized = true;
}
}
//Start calling recursively getMsgId until the retries max out or succesfully get an Id
function getResponse(json) {
start = new Date().getTime();
processRetries = 0;
responseRetries = 0;
getMessageId(json);
}
function displayResponse(response) {
$("#deleteThis").remove();
history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
if (DEBUG) console.log("#conv"+response_number);
$("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
response_number++;
},250);
document.getElementById('input_area').focus();
}
I hope you can shine me with you jedi powers, thank you so much.
Greetings.
i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>