I need to call the setLocation function when pressed. I made a form with a post method, I call a click test and nothing happens. What's the matter, tell me please. And another question: If there are a lot of such forms with the post method, the code should change? Do not throw stones, I'm a newbie in Php. Thank you in advance
Game.php
<?php
require "php/set_locations.php";
if(isset($_POST['location_button_1'])){
setLocation(4);
}
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="styles/GameStyle.css">
</head>
<body>
<div class="main_container">
<div class="header"></div>
<div class="body_container">
<form method="post">
<div class="left_menu_container">
<div class="left_menu_main_div">
<a class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/Left_menu.js"></script>
</div>
</div>
</form>
<div class="main_image_container">
<div class="image_container">
<div class="img_container">
<?php
//$locationName = R::load('locationsdb', 1);
//echo '<img class="image_location" src="'.$locationName->location_image.'">'
?>
</div>
</div>
</div>
<div class="location_buttons_container">
<div class="buttons_container">
<ul class="buttons_menu">
<li>Локации</li>
<li ><span name="location_button_1">Главные ворота</span><em>3 сек.</em></li>
<li><span>Торговый квартал</span><em>2 сек</em></li>
<li><span>Замок</span><em>5 сек</em></li>
<li><span>Гильдия</span><em>4 сек</em></li>
</ul>
</div>
</div>
</div>
<div class="footer_container">
<div class="left_footer_block"></div>
<div class="textarea_container">
<textarea class="main_textArea" readonly></textarea>
<div class="input_and_button_container">
<input class="input_for_main_textArea">
<div class="button_container">
<button class="set_text_button" ></button>
</div>
</div>
</div>
<div class="onlinelist_container">
<div class="online_list">
<ul class="online_list_ul">
<li><span>Герои в локации</span><em></em></li>
<li><span>IIITUKATUPKA</span><em>8</em></li>
<li><span>Tataliec</span><em>7</em></li>
<li><span>Nekita2012</span><em>6</em></li>
<li><span>Brion</span><em>5</em></li>
<li><span>Joken</span><em>4</em></li>
<li><span>Golden</span><em>5</em></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
setLocation.php:
<?php
require "php/include_db.php";
function setLocation($url_image){
$locationName = R::load('locationsdb', $url_image);
echo '<img class="image_location" src="'.$locationName->location_image.'">';
}
?>
Related
I am trying to create a slideshow of the data that is pulled from a wordpress site using glide js and a for each loop.
This is what I tried:
<main id="primary" class="site-main">
<div class="home-card-wrapper glide">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<?php foreach($home_slider as $slide) : ?>
<div class="glide__slide">
<div class="home-card">
<div class="home-card-header" style="background-image: url('<?php echo get_the_post_thumbnail_url($slide->page_link) ?>');">
<p><?php echo $slide->heading; ?></p>
</div>
<div class="home-card-content">
<p><?php echo $slide->subheading?></p>
<p><?php echo $slide->description?></p>
<div class="lpd-button">
<img src="/wp-content/uploads/2023/01/Blk-with-white-arrow_34.5px-min.svg" alt="LPD Arrow">
Learn More
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">previous</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
<!-- Required Core Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.core.min.css">
<!-- Optional Theme Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide">
</script>
<script>
new Glide('.glide', {}).mount()
</script>
</main>
And I am getting both "home cards" on one slide. I want them to be separated onto different slides.
Any help?
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 would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
I have a header area before my ui-view. I don't want to include my header in every template file. How can I use a directive or something to get a button on top of the page?
The button depends on the pages.
Here some examples:
My main index.html
<!DOCTYPE html>
<html ng-app="smarthome">
<head>
<script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<section id="content">
<div class="page-header row">
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
Why don't you link a controller to the header and use ng-show in the top div of the header?
Like this:
<body>
<section id="content" ng-controller="headerCtrl">
<div class="page-header row" ng-show="isVisible()>
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
I had a similar requirement. You could add the button function in ng-click by adding the function
angular.module('app', ['LocalStorageModule'])
.run(['$rootScope', function ($rootScope) {
$rootScope.yourFunction = function () {
console.log("clicked here");
}
}]);
This is my Accordion, How can I expand "systemAccordion" automatically when its parent Configuration is expanded
<div spry:region="mainData">
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/healthicon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showHealthCheckSpan();"><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/conficon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();"><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showKernelParamSpan();">Kernel Parameters</a><br/>
<a onClick="showDiskSpan();">Disk Usage</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> {mainData::#product}</div>
<div class="AccordionPanelContent">
<span id='selectodbc'><a onClick="showOdbcSpan();">ODBC</a></span><br/>
<span id='selectbitmode'><a onClick="showBitmodeSpan();">Bitmode</a></span><br/>
<br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
Got the answer, When we define the accordion we have a choice like below
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
Solved my problem.