I want to load data from many Js file to a HTML file, data only load last file Js. I don't know why.
This is my code :
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 back data-choice"></div>
<div class="top-title-detail-answer top-title col-sm-11">
<p></p>
</div>
</div>
<div class="row " >
<div class="question-area col-sm-12">
<img class="col-sm-2" src="./images/pantient.png" alt="" />
<div class="box-question col-sm-8">
<p>Q:</p>
<p id="question"></p>
</div>
</div>
<div class="answer-area col-sm-12">
<div class="box-answer col-sm-8">
<p>A:</p>
<p id="answer"></p>
</div>
<img class="col-sm-2" src="./images/doctor.png" alt="">
</div>
</div>
</div>
<script src="js/main.js"> </script>
<script>
window.onload = interactiveCanvas.ready({
onUpdate(data) {
let dataNew = data.data;
//back button
let backActions = dataNew.components[0].buttons[0];
let backTitle = backActions.name;
let backAction = backActions.actions;
let backType = backActions.type;
document.querySelector(".back").innerHTML = `<button type="button" class="button btn-back " data-choice="${backType},common(),${backAction}">${backTitle}</button>`;
//help title
let title = dataNew.title;
document.querySelector('.top-title-detail-answer p').innerText = title;
}
})
</script>
<script src="js/dataQa.js"></script>
</body>
Data only load from js/dataQa.js. If you know, Pls tell me why and help me load data from all file Js.
Related
I'm trying to use a set of inputs in HTML but I would like to create a PHP onclick function that takes the value of certain elements in HTML when clicked. The problem is I don't think I can use a conventional HTML method="post" form because I'm trying to get the value of something which isn't and I'm trying to get the value of a div.
Specifically, I want to assign a value to each of the squares depending on their color and then use that value to store in a database in PHP. Any help is appreciated.
<?php
session_start();
include("database.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$text_custom = $_POST['text_custom'];
echo $text_custom;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap customiser.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-3 offset-1 d-flex justify-content-end" id="logo">
<a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
alt="logo"></a>
</div>
<div class="col-7 offset-1" id="navbar">
Customiser
News
About us
<?php
if (!empty($_SESSION['logged'])){
echo 'Account';
}else{
echo 'Account';
}
?>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12 text-center">
<h1>Customiser</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<img src="label.png" id="Gin_Label">
</div>
<div id="labeltext">
text
</div>
<div class="col-md-4 offset-md-2">
<div id="textchanger">
<h3>Text Picker</h3>
<input type="text" id="textpicker" name="text_custom">
<input type="button" id="update" value="Click me!" onclick="changetext()">
</div>
<div id="colourchanger" class="row"></div>
<h3>Colour Picker</h3>
<div class="row">
<div class="col-md-1">
<div class="square" id="colourpicker" onClick="invert()"></div>
</div>
<div class="col-md-1 offset-md-1">
<div class="square2" id="colourpicker2" onClick="invert2()"></div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-7">
<h3>Extra Ingredient</h3>
<select name="ingredient">
<option value="none">None</option>
<option value="lemon">Lemon</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-5">
<form method="post">
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function changetext() {
let bruh = document.getElementById('textpicker').value;
document.getElementById('labeltext').innerHTML = bruh;
}
function invert() {
document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
function invert2() {
document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
</script>
</body>
</html>
although I am not very clear about your question
but to use HTML value in PHP
you need to put all the HTML tag that consists of the value you wish to save to the database inside a
<form action="yourPhpNameWithTheRelatedCode" method="POST"> tag
the submit button <button type="submit" name="submit">Submit</button>
then in PHP
if (isset($_POST["submit"])){
$value= $_POST["theNameOfTheTagThatYouWishToSaveThatValue"]??"";
}
I'm following a tutorial on how to use OMDb API and create a system that can search for movies, but mine is not working. The tutorial am following is the same with mine and it working but mine is not working, Any help please.This is js the source code:
$(document).ready(() => {
$('#searchForm').on('submit', (e) => {
let searchText = $('#searchText').val();
getMovies(searchText);
e.preventDefault();
});
});
function getMovies(searchText){
//The Open Movie Database
axios.get('http://www.omdbapi.com?s='+searchText);
$.then((response) => {
console.log(response);
let movies = response.data.Search;
let output ='';
$.each(movies, (index, movie) =>{
output += '
<div class="col-md-3">
<div class="well text-center">
<img src="${movie.Poster}">
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
';
});
$('#movies').html(output);
})
.catch((err) =>
console.log(err);
});
}
<!DOCTYPE html>
<html>
<head>
<title>Movies</title>
<link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" >
<div class="container">
<div class="navbar-header">
Movie Info
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search Movie">
<br><input type="submit" value="Search Movies">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Your help is highly appreciated, THANKS in advance
Provided you're either using ES6-level JavaScript, or a transpiler which will handle ES6 syntax and translate it to older JavaScript for you, you need to do this:
output += `
<div class="col-md-3">
<div class="well text-center">
<img src="${movie.Poster}">
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
...that is, you must surround the above text and code with backticks, not single quotes.
Laravel View code:
<div class="col-sm-12">
#foreach($deviceCategory as $deviceCategories)
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="col-sm-1">
<div id="deviceId" class="check">{{$deviceCategories-
>deviceCategoryId}}</div>
</div>
<br/>
</div>
<div class="panel-body">
<div class="col-sm-2">
<h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5>
<h6><button style="border:none; background-color: transparent;"
disabled></button></h6>
</div>
<div class="col-sm-1" align="center">
<img src="{{asset(Storage::url('public/' . $deviceCategories-
>image))}}" width="200" height="150">
</div>
</div>
<div class="panel-footer" align="right"><a href="" data-
toggle="modal" data-target="#myModal"
class="getDeviceCategoryId">SELL THIS CATEGORY</a></div>
</div>
</div>
#endforeach
</div>
This is my view code. Here I am displaying the values dynamically that are fetched from db. Then When I click with the panel-footer (ie.,SELL THIS CATEGORY) , I need to alert the respective value in the panel-heading(ie.,{{$deviceCategories->deviceCategoryId}})
SCRIPT CODE
<script type="text/javascript">
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var value=$('#deviceId').text();
alert(value);
});
});
This is my script code I have tried. But I get only the first id value for all panel footers.
If I understand your question correct and you want to get particular <div id="deviceId"> text while click on SELL THIS CATEGORY:
Laravel View code:
<div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div>
TO
<div id="deviceId" class="check device-{{$deviceCategories->deviceCategoryId}}">{{$deviceCategories->deviceCategoryId}}</div>
AND
<div class="panel-footer" align="right">SELL THIS CATEGORY</div>
TO
<div class="panel-footer" align="right">
SELL THIS CATEGORY
</div>
SCRIPT CODE
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var dataId = $(this).attr("data-id");
//if you use newer jQuery >= 1.4.3
//var dataId = $(this).data('id');
var value = $('.device-' + dataId).text();
alert(value);
});
});
UPDATE
SCRIPT CODE
$(document).ready(function() {
$('.getDeviceCategoryId').on('click', function() {
var dataId = $(this).attr("data-id");
//if you use newer jQuery >= 1.4.3
//var dataId = $(this).data('id');
var value = $('.device-' + dataId).text();
alert(value);
});
});
UPDATE
Your route should be like: Route::get('products/{dataId}','Categories#products')->name('products');
Your Laravel View code should be like:
<div class="col-sm-12">
#foreach($deviceCategory as $deviceCategories)
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="col-sm-1">
<div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div>
</div>
<br/>
</div>
<div class="panel-body">
<div class="col-sm-2">
<h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5>
<h6><button style="border:none; background-color: transparent;" disabled></button></h6>
</div>
<div class="col-sm-1" align="center">
<img src="{{asset(Storage::url('public/' . $deviceCategories->image))}}" width="200" height="150">
</div>
</div>
<div class="panel-footer" align="right">SELL THIS CATEGORY</div>
</div>
</div>
#endforeach
</div>
Here no need JQ script...
Try this way -
<div class="panel-footer" align="right">
<a href="javascript:void(0)" data-deviceid="{{$deviceCategories-
>deviceCategoryId}}" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId">SELL THIS CATEGORY
</a>
</div>
and change your jQuery code to -
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var value=$(this).attr('data-deviceid');
alert(value);
});
});
I am so confused. I have used this jquery feature for a while now and it will not work here. It returns the right value and prints out to the console but it wont append the data on page load.
HTML :
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>
JS :
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
function selectAWord (){
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
selectAWord();
Try to use the ready function so the DOM will be fully loaded and your elements .currentWord/.guessRem are there for the .append :
$(function(){
//Your function call here
selectAWord();
})
Hope this helps.
$(function(){
selectAWord();
})
function selectAWord (){
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>
My objective is to make the contents of multiple div elements editable either with all of the same div class name, or with different class names. I am aware of the contenteditable attribute but my problem is being able to save it using java-script so that when the page reloads, the edited content is saved and displayed. I have been trying to follow the tutorial on this website...
http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/
So far i have separated the java-script code into a different file called mailscript.js
I included the file near the top of the html5 file using...
I also changed the ...
document.getElementById
to...
document.getElementsByClassName
in the Java-script file that a made. I don't really know where to go from here. In short, the edits fail to save. Her are the files...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
<div id="header">
<header><h1>Bison Mail</h1></header>
</div>
<hr>
<br id="clearleft">
<div id="leftcolumn">
<hr>
<ul class="navbar">
<li>Home</li>
<li>Packages</li>
<li>Contact Us</li>
<li>Sign-Out</li>
</ul>
<hr>
</div>
<div id="rightcolumn">
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div class="name" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div class="dateRecieved" contenteditable="true">11/1/2014</div>
</div>
<div class="table-row">
<div class="heading">Date of Pickup:</div>
<div class="dateOfPickup" contenteditable="true">None</div>
</div>
<div class="table-row">
<div class="heading">ID:</div>
<div class="ID" contenteditable="true">N/A</div>
</div>
<div class="table-row">
<div class="heading">E-mail:</div>
<div class="email" contenteditable="true"><address>shackster3773#yahoo.com</address></div>
</div>
<div class="table-row">
<div class="heading">E-mail Sent:</div>
<div class="emailSent" contenteditable="true">Sent</div>
</div>
<div class="table-row">
<div class="heading">Signature:</div>
<div class="signature" contenteditable="true">N/A</div>
</div>
</div>
<hr>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<input type="button" value="add package" onclick="addElement()"/>
<br>
<hr>
<div id="footer">
<br>
<p>By: Meshech ©</p>
</div>
</div>
</div>
</body>
</html>
and for the java-script file
function saveEdits() {
//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}
Any help would be Greatly appreciated. Thanks in advance!
Try this. Your divs need to look like <div id="name" class="edit" contenteditable="true">Meshech Price</div>
HTML
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div id="name" class="edit" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
</div>
Javascript
function saveEdits() {
var editElem = document.getElementsByClassName("edit");
localStorage.userEdits = {}
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
localStorage.setItem([e.id], e.innerHTML);
});
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
if(localStorage.userEdits) {
var editElem = document.getElementsByClassName("edit");
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
e.innerHTML = localStorage.getItem(e.id);
});
}
}