I downloaded a great script for the store locator of google, the parent programmer, has set that once, performed the search in the input field, the data are extracted from a json file, by calling a script.
according to this guide (https://www.bjornblog.com/web/jquery-store-locator-plugin/comment-page-6), ie that of the owner would be enough to create a connection file that I created:
<?php
$connessione = new mysqli("localhost", "root", "root", "ca2solution");
if ($connessione->connect_errno) {
echo "Failed to connect to MySQL: (" . $connessione->connect_errno . ") " . $connessione->connect_error;
}
and include this php code, to extract instead of from the .json file, directly from the database:
$results = $db->query("SELECT * FROM locations");
$locations = array();
foreach($results as $location){
array_push($locations, $location);
}
//Output JSON
echo json_encode($locations);
the code is divided into two phases index where inside there is the form that as action has set submit.html
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Map Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../assets/css/storelocator.css" />
</head>
<body>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
You can use just the city as the address - ex: Edina, MN. METTICE </p>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="get" action="submit.html">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input type="text" id="bh-sl-address" name="bh-sl-address" />
</div>
<button id="bh-sl-submit" type="submit">Submit</button>
</form>
</div>
</div>
</body>
</html>
submit.html:
<?php
include '../connessione.php';
?
<!DOCTYPE html>
<html>
<head>
<title>Map Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../assets/css/storelocator.css" />
</head>
<body>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
You can use just the city as the address - ex: Edina, MN.</p>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="post" action="#">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input type="text" id="bh-sl-address" name="bh-sl-address" />
</div>
<button id="bh-sl-submit" type="submit">Submit</button>
</form>
</div>
<div id="bh-sl-map-container" class="bh-sl-map-container">
<div id="bh-sl-map" class="bh-sl-map"></div>
<div class="bh-sl-loc-list">
<ul class="list">
$results = $connessione->query("SELECT * FROM locations");
$locations = array();
foreach($results as $location){
array_push($locations, $location);
}
//Output JSON
echo json_encode($locations);
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../assets/js/libs/handlebars.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCPi_BiC2r0ZOw-4eyXTVcxTpCMv4FOils"></script>
<script src="../assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
<script>
$(function() {
$('#bh-sl-map-container').storeLocator({
'querystringParams' : true,
'fullMapStart': true,
// I seguenti percorsi sono impostati perché questo esempio si trova in una sottodirectory
'dataLocation': '../data/locations.json',
'infowindowTemplatePath': '../assets/js/plugins/storeLocator/templates/infowindow-description.html',
'listTemplatePath': '../assets/js/plugins/storeLocator/templates/location-list-description.html'
});
});
</script>
</body>
</html>
but unfortunately I do not get any results, where am I wrong?
Related
I want to alert the name of the item whose place bid button I will click but my code seems to alert only laptop. Can anyone tell me how to get div values that are dynamically generated through a php script. Below is the code for the page.I want to alert name of that item whose place bid I click on. Since the page is dynamically generated which gets item details from a database containing item details.
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from items";
$select_query_result = mysqli_query($con, $select_query) or
die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css"/>
<link rel="stylesheet" type="text/css" href="seperate2.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function post_data(){
var item_name = document.getElementById("item_name").innerHTML;
alert(item_name);
}
</script>
</head>
<body>
<div class="container">
<h1>Bid</h1>
<div class="row">
<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
<div class="col s3" >
<div id="item_name"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data()">Place Bid</button>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
ID of element in HTML must be unique. Use class.
In loop you declare static name of ID, that are not unique.
Your code requires a counter by which the dynamically created DIVs may be accessed. Your <div class="row"> block would be:
<div class="row">
<?php
$divCounter = 0;
while($row = mysqli_fetch_array($select_query_result)) {
$divCounter += 1;
?>
<div class="col s3" >
<div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
</div>
<?php } ?>
</div>
Notice that the call to the Javascript function post_data() now provides the DIV id that contains its counter. To complete the job, adjust post_data() to include the parameter:
<script type="text/javascript">
function post_data(divId){
var item_name = document.getElementById(divId).innerHTML;
alert(item_name);
}
</script>
If you prefer, instead of using a counter and concatenating with the static "item_name", you may use the $row[item_name] property instead. Whether or not you can do this will depend on whether this property can serve as a valid HTML id attribute value.
I have the requirement, that all error messages have to be shown in the header of the application. How can I do that with angular?
If I have this application (see on plunker):
<body>
<div id="header">
<!-- I want error messages to show up here -->
</div>
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>
What I need is to have the error messages in the header div. How can I do that?
Fixed demo here.
Just access the error the way same as in form, as when you set <form name="myForm" >, then you will get $scope.myForm = [yourFormObject], then access free anywhere in same controller.
Angular Form Document
Under the title Binding to form and control state
A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.
And, even access the $error in controller by $scope.$watch('formName.fieldName.$error',function(nv,ov){});
// Code goes here
var app = angular.module('plunker', ['ngMessages']);
app.controller('appCtrl', function($scope) {
$scope.$watch('myForm.myEmail.$error', function(nv, ov) {
console.info(nv);
}, true);
});
/* Styles go here */
hr {
margin: 20px 0;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appCtrl">
<div id="header">
<div ng-show="myForm.myEmail.$error.required">required</div>
<div ng-show="myForm.myEmail.$error.email">invalid email</div>
</div>
<hr />
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>
</html>
You'll have two distinct controller.In header controller, you'll be displaying your error messages.
Then your controller will be communicating over either $rootScope or service
We've built a small project prototype for a client, which needs to be password protected because of our NDA. However - our use of the $_SESSION variable seems to break the parameters provided when entering from a secondary source even if we're logged in.
This is what we want to happen:
www.externalsite.com -> oursite.com/#/route?param="value"
This is what happens:
externalsite.com -> oursite.com/#/route?param="value" -> oursite.com/#/defaultRoute
It would be awesome if anyone could tell me how to progress past this issue - either by providing actual solution or by linking to resources that might help or get us pointed in the right direction.
Here's our index.php
!doctype html>
<html>
<head>
<title>prototype</title>
</head>
<body ng-app="angularApp" ng-controller="mainCtrl">
<?php require('access.php'); ?>
<div class="wrap">
<!-- CONTENT -->
</div>
</body>
</html>
access.php:
<?php
$password = '43844e5d424a5c7d228f265f8c899d47a65cf52f';
session_start();
if (!isset($_SESSION['loggedIn'])) {
$_SESSION['loggedIn'] = false;
}
if (isset($_POST['password'])) {
if (sha1($_POST['password']) == $password) {
$_SESSION['loggedIn'] = true;
} else {
die ('Incorrect password');
}
}
if (!$_SESSION['loggedIn']): ?>
<html>
<head>
<title>Login</title>
</head>
<body>
<form method="post">
<div class="form-group">
<label for="passwordInput">Password</label>
<input type="password" name="password">
</div>
<input type="submit" value="Login">
</form>
</body>
</html>
<?php
exit();
endif;
?>
The session_start() function must be the very first thing in your document. Before any HTML tags. You need to move it to index.php:
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<title>prototype</title>
</head>
<body ng-app="angularApp" ng-controller="mainCtrl">
<?php require('access.php'); ?>
<div class="wrap">
<!-- CONTENT -->
</div>
</body>
</html>
This is my first.php page html part. I have a form including a div and a submit button. I want when button clicked, open a new page (second.php) and display contents of div(id=orderList)
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<h3 align="center">Sipariş Listesi</h3>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
This is javascript part;
$("#orderForm").submit(function() {
var content = $('#orderList').html();
console.log(content); //(no problem everything is ok)
$('#confirmForm').val(content);
var content2 = $('#confirmForm').html();
console.log(content2); //(it is null)
});
And this is second.php where I want to display the contents in the div(id=confirmForm)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<META name=viewport content="width=1024, initial-scale=1">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Content-language" CONTENT="tr">
<link href="shift.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="product.css">
</head>
<body>
<div id="confirmForm"> </div>
</body>
</html>
It doesn't work, what should I change?
If $('#confirmForm') is not an input item you cant access it using $('#confirmForm').val();
your Form is missing method attribute, add POST in method by default its GET
<form id="orderForm" method="post" action="second.php">
Add a <textarea> in first.php inside orderForm to hold the content of #ordelist using jquery and in second page you can get it using $_POST['confirmForm'];
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10"></textarea>
in second page you do this
<div id="confirmForm"> <?php echo $_POST['confirmForm'] ?> </div>
You're trying to put the content in #confirmForm, which isn't present in the first file.
There is no need for JavaScript here. Grab the content of the div using $_['post']
Try this its working :
first.php
<html>
<head>
</head>
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10">Sipari Listesi</textarea>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
</html>
second.php
<html>
<body>
<?php
echo $_REQUEST[confirmForm];
?>
</body>
</html>
In addition to what Saqueib said, I think you'll need to make a jQuery change too. I think you're looking for the html() method, not val() because it looks like you're trying to change the displayed HTML, right?
I have this code:
application.js
var userArray = [];
$(document).ready(function() {
$("#signupform").submit(function(e) {
var user = {
name: $('#pname').val(),
email: $('#email').val()
};
userArray.push(user);
var html = new EJS({url: 'templates/usershow.ejs'}).render(user);
var content = document.getElementById('content');
content.innerHTML = content.innerHTML + html;
$("#signupform").remove();
e.preventDefault();
});
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>it IT</title>
<link rel="stylesheet" type="text/css" href="application.css" />
<script src="jquery.js"></script>
<script src="application.js"></script>
<script type="text/javascript" src="ejs_production.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>it IT</h1>
<div id="signup">
<form id="signupform">
Name: <input type="text" name="pname" id="pname"><br>
Email: <input type="text" name="email" id="email"><br>
<input type="submit" value="sign up">
</form>
</div>
<div id="signin"></div>
<div id="content"><h2>Name : Email</h2></div>
</body>
</html>
templates/usershow.ejs
<ul>
<li><%= userArray[userArray.length - 1].name %> - <%= userArray[userArray.length - 1].email %></li>
</ul>
In the js file, I have declared an array outside of the function. I am trying to push the user to the array from within the function. All goes well until I refresh the page...the array gets refreshed too - I'm a newb, but it seems like a scope problem. I'm trying to keep the array intact, even after a page refresh - so I can refer to it at other points in the file. Any help would be appreciated. Also, does anyone have a good link to where I could read about creating sessions (for sign in/sign out) in javascript?