I am trying to get value of selected item from dropdown menu via val() method. It works greatly when I use it in plain html withou jquerymobile divs. but when i put in into my content div it isnt working. Here is the code (only content div implemented):
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>RSS Reader</title>
<link rel="stylesheet" href="main/jquery.mobile-1.1.0.min.css" />
<script src="main/jquery-1.6.4.min.js"></script>
<script src="main/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
settings.php:
<?php
include('../main/header.php');
$siteNumber = empty($_GET['siteNumber']) ? 'Živé' : $_GET['siteNumber'];
?>
<div data-role="page">
<div data-role="header">
Nastavenia
</div>
<div data-role="content">
<select id="training" name="training" data-native-menu="false">
<option value="1">Živé</option>
<option value="2">MobilMania</option>
<option value="3">Automoto</option>
</select>
<script>
function displayVals() {
var defaultSiteNumber = $($("#training")[0]).val();
$("p").html("<b>defaultSiteNumber:</b> " +
defaultSiteNumber);
}
$("select").change(displayVals);
displayVals();
</script>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Späť</li>
<li>Hotovo</li>
</ul>
</div>
</div>
</div>
After I get those values into javascript I need them to be also available in PHP variables so I can use them to create config file. Or do you think it would be simplier to create config file with javascript? It should be basic .ini with structure which is acceptable by parse_ini_file
EDIT: I have aded whole code including headerp.php to make sure that there is no other error causing this problem.
use this code
may it works
$("select").bind("change", function(event, ui) {
var defaultSiteNumber = $(this).val();
$("p").html("<b>defaultSiteNumber:</b> " + defaultSiteNumber);
});
Related
Dear Stackoverflow community.
I have been dealing with this issue for days now, searching for answers in plenty of forums and blogs but did not find any yet. Seems I am missing something fundamental. So here is my first ever forum question:
I want Angular $http to call a php file and process the response.
When I call the php file directly in the browser, I get the expected output like so:
{"records":[{"id":"My ID"}]}
As soon as I call the very same file with Angular $http via my Angular controller (I know this is kind of outdated), I will get nothing but a status code "200 OK".
This is my code so far:
PHP return_json.php
<?php
header("Content-Type: application/json; charset=UTF-8");
// DEBUG MODE
ini_set('display_errors', 'On');
error_reporting(E_ALL);
$id = "My ID";
$data = '{';
$data .= '"id":"' . $id . '"';
$data .= '}';
echo '{"records":[' . $data . ']}';
?>
HTML/JS (Angular)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
TEST // Angular http with PHP
</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/test.css" />
</head>
<body ng-app="testAjax" ng-controller="testAjaxCtrl">
<!-- ---------------------
HEADER
---------------------- -->
<header>
<div class="container">
<h1>TEST: Angular http</h1>
</div>
</header>
<!-- ---------------------
SECTION Test Form
---------------------- -->
<section id="">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Test Form</h2>
<form name="test" action="" method="" novalidate>
<fieldset>
<legend>Input Params</legend>
<input type="text" ng-model="testParam" name="testName" placeholder="Input testParam" />
</fieldset>
<button ng-click="getServerAnswer()">submit</button>
</form>
</div>
<div class="col-lg-6">
<h2>Angular Scope Values</h2>
<p>Name: {{testParam}}</p>
</div>
</div>
</div>
</section>
</body>
<!-- ---------------------
SCRIPT
---------------------- -->
<!-- jQuery -->
<script src="assets/js/jquery-3.0.0.min.js"></script>
<!-- Bootstrap -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="assets/angular/angular.1.6.10.min.js"></script>
<script src="assets/angular/angular-sanitize.min.js"></script>
<script type="text/javascript">
/* Test Angular http */
var app = angular.module('testAjax', ['ngSanitize']);
app.controller('testAjaxCtrl', function($scope, $http) {
// call return_json.php
$scope.getServerAnswer = function(){
$http({
method: 'GET',
url: 'return_json.php'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
alert("successCallback");
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
});
</script>
</html>
What am I missing?
Your help is much appreciated.
tried to ask this question earlier but made a total mess of it. so thought i'd try it again but clearer this time.
how can you get php variables to display in loaded content using JQuery?
index.php:
<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php #child', {},function(){
});
});
});
</script>
</head>
<?php
session_start();
$test = "this should display php string";
$_SESSION['another'] = "Session variable String";
echo ' tests to see if they work below <br>';
echo $test."<br>";
echo $_SESSION['another']."<br><br>";
?>
<button name="clickMe" id="clickMe" class="clickMe">Click me</button>
<div class="parent" name="parent" id="parent" style="background-color:yellow; height:200px; width:200px;">
</div>
<body>
</body>
</html>
loaded.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div name="child" id="child" class="child">
<p1> html loads fine..</p1><br>
<?php echo $test ?><br>
<?php echo $_SESSION['another'] ?>
</div>
</body>
</html>
As stated by #Fred -ii- in the comments, you only have to fetch the session in your index.php file to do this.
If you want to get a part of another web page inside index.php :
Your index.php should contain this call :
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php'); // No need for additional parameters
});
});
You don't need to select a part of the HTML, return just what you need :
loaded.php :
<?php session_start() ?>
<p>Example text</p>
<?php echo $_SESSION['another'] ?>
I have recently setup a Fedora 20 VPS with LAMP. My PHP is working properly as you can see from output below:
http://talkoot.co.in/info.php
My problem is when I access page below, the php script is printed out instead of being executed. If one 'Views Source' then the entire code is visible.
http://talkoot.co.in/WebBackend/admin/login.php
Can someone help me out. Here is the code for login.php:
<?php
include 'init.php';
if(isset($_SESSION['admin'])){
header('Location: index.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Login - CPanel</title>
<link type="text/css" rel="stylesheet" href="libs/css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="libs/css/style.css" media="screen,projection"/>
</head>
<body>
<div class="container">
<div class="card publish-form-container">
<?php
if(isset($_POST['username'],$_POST['password'])){
$__USERS->adminLogin($_POST);
}
?>
<form class="col s12" method="POST" action="" >
<div class="input-field">
<input id="username-field" type="text" name="username">
<label for="username-field">Username...</label>
</div>
<div class="input-field">
<input id="password-field" type="password" name="password">
<label for="password-field">Password...</label>
</div>
<div>
<button class="btn waves-effect waves-light pull-right" type="submit">Login
<i class="mdi-content-send right"></i>
</button>
</div>
</form>
</div><!-- Post Card //-->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="libs/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
Your server is not enabled for Short Open Tag there are 2 scenarios
enable it from php.ini short_open_tag = On or using htaccess
Use <?php instead of <?
P.S: i have shared a link which can explain you why i presented 2 options
As I can see in your phpinfo page:
short_open_tag Off Off
that means the short open tag are now allowed
So, anything you put inside short tags <? ?> won't be parsed as PHP. You'd rather put it inside standard tags <?php ?> block.
I am displaying content using php foreach loop as,
<?php
foreach($result as $value)
{
?>
<div class="content">
<?=$value['title']?>
</div>
<?php
}
?>
I am applying jquery clck event to change the content of particular div in the above foreach loop using jquery as
$(function()
{
$('.content').click(function()
{
$(this).html('welcome to app');
});
});
All the div's content are changing, can anyone tell me how to chnage the only particular div content when click on it.
I have checked your question and it seems to be working fine at my PC. I would appreciate if you can share browser information for further investigation. Meanwhile, I am sharing the code which is working perfectly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
<div class="content">Lorem Ipsum</div>
</body>
<script>
$(function()
{
$('.content').click(function() {
$(this).html('Hello');
})
});
</script>
</html>
I am creating a really simple mobile app for our local track club. The app seems to be working fine when I test it on my localhost but when I change the links to point to my remote server and then package the app nothing seems to render. I am hoping that this is a really easy fix. Here is a page that I would like to populate using a JSON object into a HTML frame using Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>United Track Club</title>
<link href="jquery-mobile/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application. -->
<script src="jquery-mobile/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<!--a name="viewport"content="width=device-width, initial-scale=1"> -->
</head>
<body>
<div data-role="page" id="runnerListPage">
<div data-role="header">
<h1>Runners2</h1></div>
<div data-role="content">
<ul id="runnerList" data-role="listview" data-filter="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
<li>Schedule</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here is the JS that I created to populate the above code.
$.getJSON('http://unitedtrack.org/Mobile/TF/getrunnerlist.php', function(data){
var object = data.items,
runnerCount = object.length,
target = document.getElementById('runnerList'),
i;
if (runnerCount>0){
for (i =0 ; i< runnerCount; i=i+1){
var unitrun=object[i],
EventDt = unitrun.First_Nm,
MeetNm = unitrun.Last_Nm;
target.innerHTML +='<li>'+ EventDt +', ' +MeetNm +' </li>';
}
}
else {
alert('there are no runners');
}
});
target.addEventListener("click",data,false);
Thank you in advance for your help.
You need to set proper headers on the page you are querying (e.g. http://unitedtrack.org/Mobile/TF/getrunnerlist.php).
You need to set Access-Control-Allow-Origin header. See the link for more informations about cross-origin requests.