i am trying to integrate the google api i have found some codes for that
API Script
<!-- Dependencies: JQuery and GMaps API should be loaded first -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
<script src="js/jquery-gmaps-latlon-picker.js"></script>
html code
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="Search">
<br/><br/>
<div class="gllpMap">Google Maps</div>
<br/>
lat/lon:
<input type="text" name="gllpLatitude" class="gllpLatitude" value="30.44867367928756"/>
/
<input type="text" name="gllpLatitude" class="gllpLongitude" value="70.6640625"/>
zoom: <input type="text" name="gllpZoom" class="gllpZoom" value="4"/>
<input type="button" class="gllpUpdateButton" value="update map">
<br/>
</fieldset>
this code working fine separately but when i integrate in my application it
shows me that error
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
In the above script the tag sensor is not required in "src" instead of that please provide a googlemapapi key, it will work!!
eg:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=paste your key here"></script>
Get your key:
https://developers.google.com/maps/documentation/javascript/get-api-key#key
Thanks!!!
Related
I'm trying to publish form template to my main page which sits in different location:
my Code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="js/Jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
<style>
html
{
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<select name="Template_Picker" id="Template_Picker">
<option value="payment">payment</option>
<option value="identity">identity</option>
</select>
<br>
<div id="Templates_Pages">
<button class="Template" value="Send" id="Template_Button">Show selected</button>
</div>
<form action="test/submit.php" method="post" id="submit_template">
<input type="hidden" id="payment" name="payment" value="payment">
<center id="output">
</center>
</form>
</body>
<script src="test/template.js"></script>
</html>
I'm trying to take my form template which looks like this:
<div id="template" class="template">
<input type="text" placeholder="Full Name" name="Full_Name">
<input type="text" placeholder="Credit Card" name="Credit_Card">
</div>
and place her on my main page, so the JS looks like this:
$(".Template").click(function(){
template_p = ($('#Template_Picker').val());
$.get("test\\"+template_p+".php",function(output){
$("#template_p").append(output);
//template_p = payment when choosing
});
});
when on my JS i choose "template_p" it doesnt work, but when i'm using the center id "output" it works, why?
Thanks in Advance.
It appears like you cannot append an output to an "input" tag.
so i kept using the "center" tag instead.
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
I have an input field which will accept tags. Once I am done with those tag additions, how can I get the values out to save it to my database?
I am using the tagManager library to make this tag addition easily.
$(".tm-input").tagsManager();
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<input type="text" name="tags" placeholder="Type the subsystem name and press enter" class="form-control tm-input tm-input-info" autocomplete="off" />
http://jsfiddle.net/0y7a5kfu/2/
According to the documentation you can use tagsManager('tags') to retrieve the input:
$('.tm-input').tagsManager();
$('button').click(function() {
console.log($('.tm-input').tagsManager('tags'))
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<input type="text" name="tags" placeholder="Type the subsystem name and press enter" class="form-control tm-input tm-input-info" autocomplete="off" />
<button>Get</button>
I'm using Firefox's addon-sdk to create addons for Firefox browser.
I need to copy text from textbox element to clipboard in popup.html file. I don't want to use flash to copy text to the clipboard.
popup.html
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script> <!-- Including jQuery -->
<script type="text/javascript" src="const.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
</script>
</head>
<body style="font-family:Tahoma, Geneva, sans-serif;line-height:30px;width:250px;">
<form >
element Id : <input type="button" onclick="copy($('#idElem').val())" class="btn" value="copy"/>
<input type="text" id="idElem" value=""/><br/>
element class name : <input type="button" class="btn" onclick="copy($('#classNameElem').val())" value="copy"/>
<input type="text" id="classNameElem" value=""/><br/>
element xpath : <input type="button" onclick="copy($('#xpathElem').val())" class="btn" value="copy"/>
<input type="text" id="xpathElem" value=""/><br/>
</form>
</body>
</html>
And popup.js file is :
$(document).ready(function () {
addon.port.on("vars", function(vars) {
if (vars){
$("#idElem").val(vars[0]);
$("#classNameElem").val(vars[1]);
$("#xpathElem").val(vars[2]);
}
});
});
How can I do it?
You'll first have to get the textarea value with a panel content script, then use message passing to pass that to the add-on process, then use the "clipboard" module to save that value to the clipboard.
I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>
What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.
See here:
jQuery $(document).ready () fires twice
And here:
http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice
for more information.
A quick fix is to put the script tag in the head tag. See example below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
</head>
<body>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>