Phonegap get photo from gallery not working - html

I have created simple audio apk. In this apk, I have added one option called "choose images" for the Play button in this option. I have an issue that chosen images from the gallery is not showing in the Play button. I have tried this code which is from the phonegap doc. But its not working for me. Below is the code for your reference, wherein I have selected the images.
May I know how to solve this solution. It will be very helpful to me.
<input id="mainplay" data-button="play" type="image" src="img/newplay.png" class="audiodata" id="imgData" alt="Submit" width="70" height="70" />
</div>
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
localStorage.setItem("imgData", imageURI);
$('#imgData').attr('src', imageURI);
largeImage.src ="data:image/jpeg;base64," + imageURI;
}
<div data-role="page" id="home">
<div class="ui-btn-right">
<a class="alignment ui-btn-active ui-state-persist" data-role="button" data-icon="gear" data-iconpos="notext"></a>
</div>
<div id="settings" style="display:none;">
Back<br><br>
<fieldset class="ui-field-contain">
<label for="Choose Audio">Choose Audio</label>
<select class="audioselect" name="selectaudio" id="selectaudio">
<option value="/android_asset/www/audio/Commercial DEMO - 15.mp3">Commercial DEMO</option><option value="/android_asset/www/audio/p1rj1s_-_rockGuitar.mp3">RockGuitar</option>
</select>
</fieldset><br>
<fieldset class="ui-field-contain">
<label for="Volume">Volume Control</label><br>
<span class="tooltip"></span> <!-- Tooltip -->
<div id="slider"></div> <!-- the Slider -->
<span class="volume"></span> <!-- Volume -->
</fieldset><br>
<fieldset>
<button data-inline="true" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Choose Photos</button>
<div style="display:none;"><img id="largeImage" src="" /></div> </fieldset><br>
</div>
<input id="mainplay" data-button="play" type="image" src="img/newplay.png" class="audiodata" id="imgData" alt="Submit" width="70" height="70" />
</div>

I don't see a reference to phonegap.js in your code.
You don't have a script tag around your JavaScript code.
You need an ondeviceready function and add these two lines of code;
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
Please read further on here and study the full example carefully.

Related

Show element with input button only with css

I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>

MeteorJs googleMaps autocompletion

I have an app developed using MeteorJs and I am trying to include googleMaps autocompletion using this package
https://github.com/jshimko/meteor-geocomplete
I want to have autocompletion in two views one is the landing page which has a simple input field autocompletion field only and the other is a submit_property view which has an autocomplete + map input fields, the problem is that I have followed all the instructions available for implementing autocompletion but their seems to be something wrong with my code, due to the fact that auto-completion does not appear in my inputs.
Landing page HTML:
<template name="layoutLanding">
<header>
<title>Real Estate</title>
<link rel="stylesheet" type="text/css" class="" href="/css/bootstrap.css">
</header>
<main>
<div id="Header">
<div class="wrapper">
</div>
</div>
<div id="bg">
<img src="/img/48.jpg" class="big"/>
</div>
<div id="Content" class="wrapper">
<div class="countdown styled"><img src="/img/logo.png"/></div><br/>
<!-- <h2 class="intro">Our website is under construction. Stay tuned for something amazing!. Subscribe to be notified.</h2> -->
<div id="subscribe">
<form action="" method="post" onsubmit="">
<p>
<button type="button" id="select">Acheter</button>
<button type="button" id="select1">Louer</button>
</p>
<!-- Using 2 traingles to achieve border outline :) -->
<i id="triangle_down1" style="display: none"><i></i></i>
<i id="triangle_down" style="display: none"><i></i></i><br/>
<!--Louer triangles -->
<i id="triangle_down2" style="display: none"><i></i></i>
<i id="triangle_down3" style="display: none"><i></i></i><br/>
<div></div>
<p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
<input type="submit" id="main" value="Search"/>
</p>
</form>
</div>
</div>
<div id="overlay"></div>
</main>
</template>
Landing page JS
Template.layoutLanding.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#landing-entry').geocomplete();
}
});
});
Submit_property HTML
<!-- This file is quite big so i have just included where the autocompletion needs to be -->
<div class="clearfix"></div>
<hr>
{{> afQuickField name="address" id="geocomplete" placeholder="Type in an address"}}
<input id="find" type="button" class="btn btn-primary" value="Find Address" />
<div class="map_canvas"></div>
<hr>
submit_property JS
Template.submit_property.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#geocomplete').geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
}
});
});
Template.submit_property.events({
'click #find': function(){
$('#geocomplete').trigger('geocode');
}
});
It seems you forgot to include Google Maps API loading using GoogleMaps.load function:
if (Meteor.isClient) {
// Load the Google Maps API on startup
Meteor.startup(() => {
GoogleMaps.load({
key: '',
libraries: 'places'
});
});
Template.layoutLanding.onRendered(function () {
this.autorun(function () {
if (GoogleMaps.loaded()) {
$('#landing-entry').geocomplete();
}
});
});
}
meteor-geocomplete package utilizes Google Maps Places API
meteor-geocomplete package has a dependency to
meteor-google-maps package which in turn is used for Google Maps
API loading.

How to put control id based on parent control reference/ID to avoid conflict

i am facing one issue due to one button control existed with same ID at two place in single page.
As i have created a custom field for jira which is appear on issue view screen and edit screen both.
"Edit" screen is just be a DIV and appear as display none till edit is clicked else issue view screen is appear (both on single page).
my created button existed on both the area.
How can we keep the condition like -
if parent is "DIV - edit" then keep different ID of button
ELSE
another ID of button. ? or any another way of jquery to resolve this conflict issue.
Below is stuff which shows same control at two place:
issue view screen stuff on a page:
.... .....
<li id="rowForcustomfield_11200" class="item">
<div class="wrap">
<strong title="final Dynamic Value" class="name">final Dynamic Value:</strong>
<div id="customfield_11200-val" class="value type-dynamicvalue editable-field active"
data-fieldtype="dynamicvalue">
<form id="customfield_11200-form" class="ajs-dirty-warning-exempt" action="#">
<div class="inline-edit-fields">
<div class="field-group">
<table id="customfield_11200:maintable">
<tbody>
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
</tbody>
</table>
<input type="button" value="add" id="finaladd" />**PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" />**PROBLEM CONTROL**
</div>
</div>
<span class="overlay-icon throbber" />
<div class="save-options" tabindex="1">
</form>
</div>
</div>
</li>
......
....
..
note: i have highlighted above with tag comment as "PROBLEM CONTROL
Another stuff on same page for edit issue screen div:
.......
.............
<div id="edit-issue-dialog" class="aui-popup box-shadow aui-dialog-open popup-width-custom aui-dialog-content-ready"
style="width: 810px; margin-left: -405px; margin-top: -263.5px;">
<h2 class="aui-popup-heading">
<div class="aui-popup-content">
<div class="qf-container">
<div class="qf-unconfigurable-form">
<form action="#" name="jiraform" class="aui">
<div class="form-body" style="max-height: 419px;">
<input type="hidden" name="id" value="11100" />
<input type="hidden" name="atl_token" value="BP8Q-WXN6-SKX3-NB5M|6533762274aaa5d16f14dbbe010917f161596d8d|lin" />
<div class="content">
<div class="aui-tabs horizontal-tabs" id="horizontal">
<ul class="tabs-menu">
<div class="tabs-pane" id="tab-0">
<div class="tabs-pane active-pane" id="tab-1">
<div class="field-group aui-field-something">
<div class="field-group">
<div class="field-group">
<div class="field-group">
<label for="customfield_11200">
final Dynamic Value</label>
<table id="customfield_11200:maintable">
<input type="button" value="add" id="finaladd" /> **PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" /> **PROBLEM CONTROL**
</div>
</div>
</div>
<div class="field-group aui-field-wikiedit comment-input">
</div>
</div>
<div class="buttons-container form-footer">
</form>
</div>
</div>
</div>
</div>
.....
...
..
NOTE: above highlighted issue at PROBLEM CONTROL tag comment.
I think you can differentiate by using the id edit-issue-dialog
if($("#edit-issue-dialog").length){
//u r in edit form, and do your stuff
}else{
//in create form do your stuff
}

load external files using ajax/query

I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>

How do I get value from html input control?

I am trying to get the value from html input control and send it to my controller on my image click event. Here is the code snippet to capture an email ID and send it to another view.
<div id="div1">
<a href="<%= Url.Action("ActionName", "Controller", new {strEmailAddress = ????? }) %>">
<img alt="sign up" src="<%= ResolveUrl("~/media/signup_btn.png") %>" border="0" /></a>
</div>
<input name="Email address" type="text" value="Email address" />
How do I get the value from this input element?
Thanks
//try something like this using a javascript function
<html>
<head>
<script>
function WhatsMyValue(field)
{
alert("field:" + field.value);
}
</script>
</head>
<body>
<form name="f1">
<input type="text" onkeyup="WhatsMyValue(this);" name="text1">
</form>
</body>
</html>
link JQuery here
<script>alert($("#myCon").html());</script>
<input type="text" id="myCon" name="text1">