I am trying a simple Stripe API implementation on my Laravel app, and for some reason, I cannot get the Elements to load. I have copy and pasted direct from the Docs, a simple form with an element and for the life of me, I can't figure out why it will not load.
Everything seems to be in order.
- My JS files are in the public directory
- I have tried with scripts NOT defered
- I have tried hard coding into one page
- I have read through the Docs seemingly 10 times
- I have checked line by line to make sure the id tags are the same as referenced in the js files.
So far, I am at a loss. I have been working on this for a few hours and I'm just staring at the screen baffled at this point. Any ninjas around who can spot a likely rookie mistake I've made? Here are my current files:
app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Springs Fat to Fit</title>
<!-- Scripts -->
<script src="https://js.stripe.com/v3/" defer></script>
<script src="{{asset('js/stripe.js')}}" defer></script>
<script src="{{asset('js/app.js')}}" defer></script>
<script src="{{asset('js/custom.js')}}" defer ></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div id="app">
#if(Auth::guest() || Auth::user()->is_admin == 0)
#include('partials.navbar')
#else #if(Auth::user()->is_admin == 1)
#include('partials.admin_navbar')
#endif
#endif
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
testPage.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
<form action="{{route('testPage')}}" method="post" id="payment-form">
#csrf
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div> {{-- This is the end of the container--}}
#endsection
stripe.js:
// Create a Stripe client.
var stripe = Stripe('pk_test_key right here');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', { style: style });
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
you need to rule out your errors.
rule out whether if it's js error or not: please check your browser console log, network tab, etc, see if there's exception. see if your js is loaded. see all your required js are loaded, not showing 404.
put breakpoints on your js on chrome dev tools. put a lot of them on your switch blocks, if blocks,etc.
fix if you find any problem.
make sure stripe assets is not blocked by your chrome plugins e,g. adblocks
check api keys / secrets if there's any
Related
I've been following this guide: https://www.freecodecamp.org/news/how-to-build-a-keyword-density-tool-with-laravel/ and have found right at the end my app won't return any array. In fact when I click the submit button I notice I get a 419 console error. After checking most issues relate to the CSRF token but from check I have this is place properly.
Can anyone spot or guide me in the right direction so that my app returns something. It's not very advanced in fact it's a very simple application, but It's my first time using Laravel so any guidance is appreciated.
My index.blade.php (This contains the form and ajax request)
#extends('layouts.master')
#section('content')
<form id="keywordDensityInputForm">
<div class="form-group">
<label for="keywordDensityInput">HTML or Text</label>
<textarea class="form-control" id="keywordDensityInput" rows="12"></textarea>
</div>
<button type="submit" class="btn btn-primary mb-2">Get Keyword Densities</button>
</form>
#endsection
#section ('scripts')
<script>
$('#keywordDensityInputForm').on('submit', function (e) { // Listen for submit button click and form submission.
e.preventDefault(); // Prevent the form from submitting
let kdInput = $('#keywordDensityInput').val(); // Get the input
if (kdInput !== "") { // If input is not empty.
// Set CSRF token up with ajax.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({ // Pass data to backend
type: "POST",
url: "tool/calculate-and-get-density",
data: {'keywordInput': kdInput},
success: function (response) {
// On Success, build a data table with keyword and densities
if (response.length > 0) {
let html = "<table class='table'><tbody><thead>";
html += "<th>Keyword</th>";
html += "<th>Count</th>";
html += "<th>Density</th>";
html += "</thead><tbody>";
for (let i = 0; i < response.length; i++) {
html += "<tr><td>"+response[i].keyword+"</td>";
html += "<td>"+response[i].count+"</td>";
html += "<td>"+response[i].density+"%</td></tr>";
}
html += "</tbody></table>";
$('#keywordDensityInputForm').after(html); // Append the html table after the form.
}
},
});
}
})
</script>
#endsection
My master.blade.php (CSRF token in the head)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keyword Density Tool</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
body {padding-top: 5em;}
</style>
</head>
<body>
...
<main role="main" class="container mt-3">
#yield('content')
</main><!-- /.container -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
#yield('scripts')
</body>
</html>
My controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Html2Text\Html2Text;
class ToolController extends Controller
{
public function index()
{
return view('tool.index');
}
public function CalculateAndGetDensity(Request $request) {
if ($request->isMethod('GET')) {
if (isset($request->keywordInput)) { // Test the parameter is set.
$html = new Html2Text($request->keywordInput); // Setup the html2text obj.
$text = strtolower($html->getText()); // Execute the getText() function and convert all text to lower case to prevent work duplication
$totalWordCount = str_word_count($text); // Get the total count of words in the text string
$wordsAndOccurrence = array_count_values(str_word_count($text, 1)); // Get each word and the occurrence count as key value array
arsort($wordsAndOccurrence); // Sort into descending order of the array value (occurrence)
$keywordDensityArray = [];
// Build the array
foreach ($wordsAndOccurrence as $key => $value) {
$keywordDensityArray[] = ["keyword" => $key, // keyword
"count" => $value, // word occurrences
"density" => round(($value / $totalWordCount) * 100,2)]; // Round density to two decimal places.
}
return $keywordDensityArray;
}
}
}
}
?>
and my routes
Route::get('/tool', 'App\Http\Controllers\ToolController#index')->name('KDTool');
Route::post('/tool/calculate-and-get-density', 'App\Http\Controllers\ToolController#CalculateAndGetDensity');
and the error I get is this
https://imgur.com/lRYqo09
I have checked all otherwsie answer suggestions on stackoverflow but nothing I do seem's to get my any further. Thanks for any help in advance
I hope someone can help me with this. I am using printThis.js to print a document. I have bootstrap.min.css located in the public folder. The thing is, I couldn't get it to work. I already tried possible answers but not working.
Here's my code at "barcode.blade.php". What I wanted is to make this.
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"
work. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ asset('Admin/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<style>
.row{
margin: 50px;
}
p{
margin-top: 10px;
}
</style>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
#foreach($barcodes as $barcode)
<div class="col-md-4">
<img src="data:image/png;base64,{{DNS1D::getBarcodePNG($barcode->pxbarcode, 'C128A')}}" />
<p>{{$barcode->pxbarcode}}</p>
</div>
#endforeach
</div>
</div>
<div class="w3-right footer">
<button id="print" class="w3-button w3-blue">Print</button>
Back
</div>
<script src="{{ asset('Admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script src="{{ asset('js/printThis.js')}}"></script>
<script>
$('#print').click(function(){
$('.container').printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
importStyle: false, // import style tags
printContainer: true, // print outer container/$.selector
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}", // path to additional css file - use an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove inline styles from print elements
removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true
printDelay: 333, // variable print delay
header: "<h2>Print Barcode</h2>", // prefix to html
footer: null, // postfix to html
base: false, // preserve the BASE tag or accept a string for the URL
formValues: true, // preserve input/form values
canvas: false, // copy canvas content
doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup
removeScripts: false, // remove script tags from print content
copyTagClasses: false, // copy classes from the html & body tag
beforePrintEvent: null, // callback function for printEvent in iframe
beforePrint: null, // function called before iframe is filled
afterPrint: null // function called before iframe is removed
});
})
</script>
</body>
</html>
This is how it looks when i click the print button.
As you can see, I'm using a bootstrap in my blade and it is not taking effect when I print it.
just import your bootstrap like that
<link href="URL to bootstrap.min.css" rel="stylesheet" media='all'/>
and call printThis like that :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="{{ asset('assets/js/printThis.js') }}"></script>
<script type="text/javascript">
var j = jQuery.noConflict(true);
$("#printBtn").click(function () {
j('#divToPrint').printThis({
importCSS: true,
loadCSS: true,
canvas: true
});
})
</script>
It worked perfectly for me ... (btw : I'am using symfony 4 with twig as Template engine)
var options = {
loadCSS: "css/bootstrap.min.css"
}
$('#printButton').on('click', function () {
$('.container').printThis(options);
});
OR
$('#printButton').on('click', function () {
$('.container').printThis({
loadCSS: "css/bootstrap.min.css"
});
});
I use Blueimp Jquery-File-Upload (https://github.com/blueimp/jQuery-File-Upload) for uploading pictures to the server.
Setting up the demo.
When I setup this plugin in the root as described in the documentation, all works fine. I even modified some of the code so I can run it on localhost/jsVR/vendor/
So far, so good.
Integration in a existing form
I modified an existing form and added "basic-plus.html" to the code which results in this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOMmeldingen - Veiligheidsregister</title>
<link rel="icon"
type="image/png"
href="img/favicon.ico">
<link id="style" rel="stylesheet" type="text/css" href="/jsVR/css/style.css">
<link id="easyui-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/default/easyui.css">
<link id="easyui-icons-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/icon.css">
<!-- scripts to use in the form -->
<script type="text/javascript" src="/jsVR/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/jsVR/js/jquery-easyui/easyloader.js"></script>
<script type="text/javascript" src="/jsVR/js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="header-container"></div>
<div id="index-container" class="easyui-panel" data-options="{border: true}" style="">
<link rel="stylesheet" href="js/jquery-file-upload/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="js/jquery-file-upload/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="css/style.css">-->
<link id="js/jquery-file-upload-Style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload.css">
<!--<link id="js/jquery-file-upload-Demo-style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload-ui.css">-->
<style>
.lbl{
width: 30px;
}
</style>
<!-- include jQuery -->
<!--<script src="js/jquery-1.11.3.js"></script>-->
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/jquery-file-upload/js/load-image.all.min.js"></script>
<!-- The Canvas to blob plugin is included for image resizing functionality -->
<script src="js/jquery-file-upload/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/core/jquery.xdr-transport.js"></script>
<![endif]-->
<script src="js/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery-file-upload/js/load-image.all.min.js"></script>
<script src="js/jquery-file-upload/js/jquery.fileupload-image.js"></script>
<script src="js/jquery-file-upload/js/jquery.fileupload-video.js"></script> <!-- optional for video uploads -->
<script src="js/jquery-file-upload/js/jquery.fileupload-audio.js"></script> <!-- optional for audio uploads -->
<script src="js/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="js/jquery-file-upload/js/bootstrap.min.js"></script>
<!--<div id="dlg" class="easyui-dialog" style="width:900px;height:400px;padding:10px 20px"
closed="false" buttons="#dlg-buttons">-->
<div class="ftitle">Details BOM-meldingen</div>
<div class="container" style="background-color: wheat; padding: 30px;">
<form id="frm" method="post" novalidate>
<div class="fitem">
<label class="lbl">Datum:</label>
<input type="text" name="datum" class="easyui-datebox" required="true">
</div>
<div class="fitem">
<label>Melding:</label>
<input type="textarea" name="melding" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Naam:</label>
<input name="naam">
</div>
<div class="fitem">
<label>Plaats:</label>
<input name="plaats">
</div>
<div class="fitem">
<label>Oplossing:</label>
<input name="voorgestelde_oplossing">
</div>
<div class="fitem">
<label>Eigen actie:</label>
<input name="eigen_actie">
</div>
<div class="fitem">
<label>Gemeld aan:</label>
<input name="gemeld_aan">
</div>
</form>
<!--</div> end div dialog-box-->
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
<div id="dlg-buttons">
Save
Cancel
</div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
alert(data.files[index].error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script></div>
<div id="footer-container"></div>
</body>
</html>
I cannot find anyreason why the file is not loaded to the server.
I added alert(data.files[index].error); to catch the error: 'undefined'.
I guess for some reason the script doesn't read server/php/index.php because I added a vardump in this file, but no response.
It may be very obvious where I go wrong, but any help is appreciated.
SOLVED:
It was obvious indeed.
I changed the url-var in
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/',...
with the full path:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'js/jquery-file-upload/server/php/index.php', ...
and all goes well. :)
this is my first post and currently in a dire situation for a web development assignment, which requires us to create a php based website which allows the user to search for wifi locations with the use of google maps API. However when I run the code all i get is a blank map and no errors.
Help is much appreciated.
thanks
<!DOCTYPE html>
<!-- HTML5 doctype-->
<html>
<!-- Start of html document-->
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org"><!-- Header which calls the relevant stylesheets for display. It also outlines the page title and initial scale. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>
<title>Reece & Andy INB271 Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="small-device.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" href="med-device.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 980px), only screen and (max-device-width: 980px)" href="large-device.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
<!-- source for the google maps api script-->
function getLocation()
{
var x=document.getElementById("usercoords");
if (navigator.geolocation)
{
//runs showposition function
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Geolocation not supported.";
}
}
function showPosition(position)
{
var x=document.getElementById("usercoords");
//adds coordinates to html at id "usercoords"
x.value=position.coords.latitude + "," + position.coords.longitude;
document.getElementById("search").submit();
}
function initialize()
{
var mapOptions =
{
zoom: 10,
center: new google.maps.LatLng(-27.4699404325,153.02562796)
}
var map = new google.maps.Map(document.getElementById('map-search'), mapOptions);
//sets markers
setMarkers(map, hotspots);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<!-- Body of the website containing the wrapper, nav, search and content divs. -->
<body>
<div id="wrap"><!-- The wrapper for the whole website -->
<?php include 'header.php'; ?>
<div id="content">
<h1>Location Search</h1>
<p id="Click">Click the button to get your position:</p>
<button onclick="getLocation()">View Location</button> <!-- when clicked, returns geo location marker on map -->
<br>
<div id="Breaker"><!-- Textbox field for the Hotspot name -->
<p><label>Hotspot Name:</label> <input type="text" name="name"></p>
<!-- Number input for the rating with a minimum of 1 and maximum of 5 (i.e. rating can't be 6 or 0) !-->
<p><label>Hotspot Rating:</label> <input type="number" name="rating"></p>
<!-- Radio button input that uses geolocation (if yes is selected and access is granted) to retrieve the user's current location !-->
<p><label>Nearby Playgrounds:</label> <input id="r-yes" type="radio" name="geo" value="yes" onclick="getLocation()"><label for="r-yes" onclick="getLocation()">Yes</label> <input id="r-no" type="radio" name="geo" value="no" checked="true"><label for="r-no">No</label></p>
<h4>Search By Suburb</h4>
<!-- <!== search using the form-->
<form id="form3"><!-- fields and styling for the dropdown -->
<select name="Suburb">
<option value="West End, 4101">West End</option>
<option value="Wynnum, 4178">Wynnum</option>
<option value="Zillmere, 4034">Zillmere</option>
<!-- search box-->
<!-- Onclick RETURNS RESULTS !-->
<!-- closes the article --></select></form>
<!-- closes the form --></div>
</div>
<!-- This is the page right sidebar and includes linkes to nearby hotspots and recent hot spot reviews. -->
<?php include 'sidebar.php'; ?><!-- This is the footer for the website. It includes our student numbers, names and the council logo. -->
<?php include 'footer.php'; ?></div>
</body>
</html>
Try with this google map's js.You're using this,
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
Instead of try with following,
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&sensor=false">
</script>
My jQuery Mobile page does not load content via $.get which is bind into pageinit event, but does so when I hit refresh (F5), why is that so?
My HTML page igra.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- stili za custom temo, jquery, jquery mobile, phonegap-->
<link rel="stylesheet" href="themes/what.min.css" />
<link rel="stylesheet" href="jquerymobile.css" />
<script src="jquery191.js"></script>
<script src="jquerymobile.js"></script>
<script src="phonegap.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="stil.css" />
</head>
<body>
<div data-role="page" id="igra">
<div data-theme="a" data-role="header">
347 coins
<h3>WHAT?</h3>
Home
</div>
<div data-role="content" class="igracontent"> </div>
</div>
</body>
</html>
My main.js with jQuery Mobile code:
$( document ).delegate("#igra", "pageinit", function() {
var par = qs["battlefield"];
$.get('igra.php?battlefield='+par, function(data2) {
$('div.igracontent').append(data2).trigger('create');
});
});
//parse url parameter
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
In igra.php I make SQL query and retrieve some data which I format in jQuery Mobile style and echo it back.
I know jQuery Mobile does not load head into DOM in subsequent pages, so main.js is also included in index.html head which is landing page of my app. All transitions to new pages are by normal ajax querying (I do not prevent default behaviour).
So what happens? When I navigate to igra.html?battlefield=3 the pageinit event does happen but content which I load via $.get from php page does not get inserted! If I hit F5(refresh) the content does get loaded into page. Can anybody explain and help? :) Thank you!