I am facing an problem in phonegap while integrating native EmailComposer.
MailComposer should open up on button click, but it does not shows the mailComposer for IOS, same code for android is working,
My Code is as follow:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
}.
//function to send mail using mail composer
function composeText(){
var vehiclemileage = document.getElementById('vehiclemileage').value;
var vehiclemodel = document.getElementById('vehiclemodel').value;
var message1 = document.getElementById('message_body').value;
var vechicleyear = document.getElementById("yeardropdown");
var strUser = vechicleyear.options[vechicleyear.selectedIndex].value;
var vehiclemake = document.getElementById("vehiclemake");
var makevehicle = vehiclemake.options[vehiclemake.selectedIndex].value;
var deviceName = device.platform;
var devicemodel = device.model;
if(vehiclemodel == '' || makevehicle == ''){
alert("Please Enter all the Value");
navigator.notification.alert(
'Please Enter all the Value', // message
alertDismissed, // callback
'Vehicle and Model', // title
'Ok' // buttonName
);
}
else
{
//function to check folder named "RepairMyCar" and extract picture from folder to attach it to mail
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("RepairMyCar", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
var dated, fnamed, phoned, emailed;
if(typeof(Storage)!=="undefined")
{
dated = localStorage.date;
fnamed = localStorage.fname;
phoned = localStorage.phone;
emailed= localStorage.email;
}
console.log(attachFile);
var newattachment = attachFile.toString();
//Open mail composer with all datas
setTimeout(function(){window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Date: " + dated + '<br>' + "First Name: " + fnamed + '<br>' + "Phone Number: " + phoned + '<br>' + "Email Address: " + emailed + '<br>' + "Year of Vehicle: " + strUser + '<br>' + "Make of Vehicle: " + makevehicle + '<br>' + "Model of Vehicle: " + " " + vehiclemodel + '<br>' +
"Mileage of Vehicle: " + " " + vehiclemileage + '<br>' + message1 + '<br>' + "Sent from My:" + deviceName + devicemodel,
[sth#sth.com],
[],
[],
true,
attachFile
);},100);
//Clear LoccalStorage
localStorage.clear();
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
//function to load year in drodown. Default selected year : Current Year
function populatedropdown(yearfield){
var today=new Date()
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
//Select Year
var thisyear=today.getFullYear()
for (var y=0; y<25; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Get a Repair Estimate</h1>
<div class="main-content">
<p>
Please Enter the Year, Make, Model and Mileage of Your Vehicle and any other information we should know.
</p>
<form class="vehicle-detail-form">
<ul>
<li>
<label>Year of Vehicle: </label>
<form action="" name="someform">
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("yeardropdown")
}
</script>
</li>
<!-- Vehicle Year Selection -->
<li><label>Model of Vehicle:</label>
<input type="text" name="vehiclemodel" id = "vehiclemodel">
</li>
<li><label>Mileage of Vehicle:</label>
<input type="number" name="vehiclemileage" id = "vehiclemileage"></li>
<li>
<textarea name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
</form>
<div style="clear:both;"></div>
<div class="large-button-wrapper">
<button onclick="composeText();">Get Your Estimate</button>
</div>
</div>
</div>
</body>
</html>
I have kept EmailComposer.h and EmailComposer.m in plugin folder as stated in this link
I found a workaround if you work on an iOS project. I have the same issue.
After view change in backbone router console.log stops working in Xcode you can use Safari Web Inspector on your Mac. Every console.log is visible there.
Related
This question already has answers here:
Using Address Instead Of Longitude And Latitude With Google Maps API
(5 answers)
Closed 7 years ago.
I have data in database like this:
Database table
Name : Jack
mob_number : 445452454
address : al saada street
country : dubai
In my view
#item.Name
#item.address
#item.country
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
initialize();
</script>
How do I pass #item.address to google maps for search location ?
http://prntscr.com/8a6m4r click to view
MY view:
#if (Model != null)
{
if (Model.Count() != 0)
{
<div class="">
#foreach (var item in Model)
{
<div class="tiptext">
<b style="margin-left: 0px; font-size: large;color: #1A0DB2;">#item.BusinessName</b>
<h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> #item.FirstName</h3>
<h3 style="margin: 8px; color:black">#item.BusinessCategory </h3>
<div class="description">
<div class="description_image">
<img src="~/Images/popup_pointer.jpg" />
<div class="POP_UP_outer">
<div class="description_background">
<div class="description_map">
<b>Map</b>
</div><hr />
<div class="description_body">
<b>Description </b><h4 class="des">#item.BusinessDescription</h4>
<b>Address2 </b><h4 class="des">#item.Address1</h4>
<b>Email </b><h4 style="color:blue; margin: 5px 0px 5px 0px;">#item.EmailID </h4>
<b>WorkNumber </b><h4 class="des">#item.WorkNumber</h4>
<b>MobileNumber </b><h4 class="des">#item.MobileNumber</h4>
<b>City </b><h4 class="des">#item.City</h4>
<b>State </b><h4 class="des">#item.State</h4>
<b>ZipCode </b><h4 class="des">#item.ZipCode</h4>
#Html.ActionLink("Book An Appointment", "CalendarView", "Appt", new { id = #item.UserID }, null)
#*#Html.ActionLink("Book An Appointment", "Popup", "Search", new { #class = "openDialog", data_dialog_id = "aboutlDialog", data_dialog_title = "Additinal Customer" })*#
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
else
{
<label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
}
Hover script
<script type="text/javascript">
$(".tiptext").mouseover(function () {
$(this).children(".description").show();
}).mouseout(function () {
$(this).children(".description").hide();
});
</script>
u can see map on my view i want to load map there
You need to use it like this it work for me
function initialize() {
// Change the latitude and longitude to your location. You can also get the coordinates here: http://itouchmap.com/latlong.html
var myLatlng = new google.maps.LatLng(25.548710, 82.084777);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:
'<div class="map-wrap">' +
// Company name
'<div class="b-title">' + 'Company Name' + '</div>' +
// Company street
'<p>' + 'Company Street' + '</p>' +
// Company city and state
'<p>' + 'Company City and State' + '</p>' +
// Clearfix with border
'<div class="clrfx map-div">' + '</div>' +
// Row 1
'<div class="row">' +
// Phone
'<div class="b-info cell w-49">' + '<span class="entypo-phone">' + '</span>' + '+91-879-902-1616' + '</div>' +
// Email
'<div class="b-info cell w-49">' + '<span class="entypo-paper-plane">' + '</span>' + 'example#example.com' + '</div>' +
'</div>' +
// Row 2
'<div class="row">' +
// Mobile
'<div class="b-info cell w-49">' + '<span class="entypo-mobile">' + '</span>' + '+91-879-902-1616' + '</div>' +
// Website
'<div class="b-info cell w-49">' + '<span class="entypo-monitor">' + '</span>' + 'www.example.com' + '</div>' +
'</div>' +
// Bottom margin clearfix
'<div class="clrfx mt-10">' + '</div>' +
'</div>'
});
makeInfoWindowEvent(map, infowindow, marker);
}
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm facing the problem that i need to display the loader when the data loading from the loop.I'm using a large number of data in loop so it would be great if am show loader when occuring the loop cases.Tired the pagebeforeshow and pageshow methods.But it does not work for me.Here is my code.Kindly help me to do this.
var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;
$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {
$('#add_group-notification').empty();
$('#ul_group_list').empty();
loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
});
$( "#pg_sms-group" ).on( "pageshow", function( event ) {
$.mobile.loading( 'show', {
text: "loading...",
textonly: false,
textVisible: true,
theme: 'a',
html: ""
});
});
function loadSMSGroup(limit, page){
var xmlRequest = getXmlSMSgroupRequest();
var wsdlURL = getWSDL('callServer');
lazy_load_group_flag = true;
$.ajax({
url: wsdlURL,
type: "POST",
dataType: "text",
data: xmlRequest,
contentType: "text/xml; charset=\"utf-8\"",
success: function(xmlResponse) {
var obj_response = parseResponse(xmlResponse);
if (obj_response.flag){
loadGroupList(obj_response.data);
}
}
},
error: function(xmlResponse) {
//error
}
});
lazy_load_group_flag = false;
return false;
}
function loadGroupList(jsnObj){
var obj_group_list = jsnObj.groups;
sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));
$.each(obj_group_list, function(ctr, obj) {
$('#ul_group_list').append('<li>' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input name="chk_group" id="chk_group" type="checkbox" value="'+obj.groupname+'{group-'+obj.groupid+'}'+'" />' +
'<label class="lbl_add-container">' +
'<h3>'+obj.groupname+'</h3>' +'</div>' +
'</label>' +
'</label>' +
'</a>' +
'<a href="#pg_add-group" onclick="sessionStorage.group_id='+obj.groupid+'"</a>'+
'</li>');
});
$("input[name=chk_group]").checkboxradio();
$('#ul_group_list').listview('refresh');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Due to the single-threadedness of JavaScript, you cannot perform monolithic CPU intensive tasks in that way. You can use:
Web Workers (see examples here and here)
a setTimeout trick (JSFiddle)
In both cases, when the "completed" event fires, you have to call $.mobile.loading("hide");.
Regarding your code example, see my modified version (untested):
<script>
var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;
var obj_group_list = [];
var counter = 0;
$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {
$('#add_group-notification').empty();
$('#ul_group_list').empty();
loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
});
function loadSMSGroup(limit, page){
var xmlRequest = getXmlSMSgroupRequest();
var wsdlURL = getWSDL('callServer');
lazy_load_group_flag = true;
$.ajax({
url: wsdlURL,
type: "POST",
dataType: "text",
data: xmlRequest,
contentType: "text/xml; charset=\"utf-8\"",
success: function(xmlResponse) {
var obj_response = parseResponse(xmlResponse);
if (obj_response.flag){
counter = 0;
obj_group_list = obj_response.data.groups;
sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));
pump();
}
}
},
error: function(xmlResponse) {
//error
}
});
lazy_load_group_flag = false;
return false;
}
function worker(loops)
{
for (var l = 0; l < loops; l++)
{
if (counter >= obj_group_list.length)
break;
$('#ul_group_list').append('<li>' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input name="chk_group" id="chk_group" type="checkbox" value="'+obj_group_list[counter].groupname+'{group-'+obj_group_list[counter].groupid+'}'+'" />' +
'<label class="lbl_add-container">' +
'<h3>'+obj_group_list[counter].groupname+'</h3>' +'</div>' +
'</label>' +
'</label>' +
'</a>' +
'<a href="#pg_add-group" onclick="sessionStorage.group_id='+obj_group_list[counter].groupid+'"</a>'+
'</li>');
counter++;
}
}
function pump()
{
worker(100);
if (counter < obj_group_list.length)
setTimeout(pump, 50);
else
{
$("input[name=chk_group]").checkboxradio();
$('#ul_group_list').listview('refresh');
$.mobile.loading("hide");
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
I am displaying a list of locations (that i get through ViewBag for now) on a map and ask the user to choose one of them.
I have populated my infowindows with HTML code by looping through the list of locations.
now when the user clicks on one of the buttons in the infowindow ("Choose this one"), I want to update the view model (Venue) to include Venue.Id = the choosen location and submit back to the controller so update the database. how can I do such a thing ?
thanks a lot for your help.
here is my script code:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<section class="scripts">
<script type="text/javascript">
$(document).ready(function () {
Initialize();
});
function Initialize() {
google.maps.visualRefresh = true;
var rabat = new google.maps.LatLng(34.019657, -6.831833);
var mapOptions = {
zoom: 11,
center: rabat,
mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var list =
#Html.Raw(Json.Encode(((IEnumerable<KayenChiMVC.Models.Venue>)ViewBag.TheVenue).Select(v => new
{
venueId = v.VenueID,
venueName = v.Name,
venueDistrict = v.District,
venueType = v.SurfaceType,
venueLat = v.Latitude,
venueLon = v.Longitude
})
));
var infowindow = new google.maps.InfoWindow();
for(var i=0; i<list.length;i++){
var pos = new google.maps.LatLng(list[i].venueLat, list[i].venueLon);
var html = "<table>" +
"<tr><td>Nom:</td>" + "<td> " + list[i].venueName +" </td> </tr>" +
"<tr><td>Quartier:</td>" + "<td> " + list[i].venueDistrict +" </td> </tr>" +
"<tr><td>Type de surface:</td>" + "<td> " + list[i].venueType +" </td> </tr>" +
"<tr><td></td><td><input type='button' value='Choisir ce terrain' onclick=''/></td></tr>";
createMarker(pos, list[i].venueName, html);
function createMarker(pos,title, html){
var marker = new google.maps.Marker({
'position': pos,
'map': map,
'title': list[i].venueName
});
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
}
}
</script>
</section>
Add a data-id attribute to your input to hold the venue id.
<input id="myButton" type="button" data-id="123" value="Choose this one" />
and get the data-id attribute in javascript
document.getElementById('myButton').onclick = function() {
console.log(this.getAttribute('data-id')); // will log '123'
};
Here is my javascript code snippet:
<script>
function returnStringForID(param) {
var retStr =
param.replace(/[\. ,:-]+/g, '').replace(/'/g, '')
.replace(/&/g, '').replace(/\(|\)/g, '');
return retStr;
}
$(document).ready(function () {
var chanId = 'Demo';
var fs_dyn = $('#fs_dyn');
var data = ['Sony', 'Pix', 'Max', 'Set'];
var seriesColors = ['#4000E3', '#FFC526', '#FF0000', '#C0504D'
, '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'];
for (var i = 0; i < data.length; i++) {
var checkId = "graphItem_" + i;
var color;
color = seriesColors[i];
var chanId = returnStringForID(data[i]);
var tmp = "";
tmp = "<input type='checkbox' checked='true' class='custom' value='" + data[i]
+ "' id='" + chanId + "' name='" + chanId + "'/>"
+ "<label for='" + chanId + "' style='font-size:12pt;font-weight:bold;color:"
+ color + "'>" + data[i] + "</label>";
fs_dyn.append(tmp);
}
fs_dyn.trigger('create');
});
</script>
Here is the HTML:
<td width='30%' style="vertical-align: top;" id="tdDynamic">
<fieldset data-mini='true' id='fs_dyn'></fieldset>
</td>
This code works perfect if done in raw html. However when inside a webview, checkbox doesn't style.
Also I have used .trigger('create') to style a nested collapsible in the same app which is also inside a webview, but that works fine.
PS: I am using JQM 1.3.1 version, just in case this helps.
Use pageinit event which is equivalent to .ready() or any jQuery Mobile events.
Demo
$(document).on('pageinit', function () {
// code
});
Using .ready() in jQuery Mobile isn't recommended, please refer to this post.
I want to be able to show the recent captured image via the button <button onclick="showImage();">Show Image</button><br>, but not sure how to do this and I can't find any good information about it in the Phonegap API. Basically it's the function showImage(); I need help creating.
The code for capturing an image is being executed correctly and I am running iOS 6.
Phonegap/Cordova:
<title>Capture Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
readDataUrl = mediaFiles[i].fullPath;
}
};
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
document.getElementById('errormsg').innerHTML = msg;
}
function captureImage(){
document.getElementById('format-data').innerHTML = "";
document.getElementById('capture-result').innerHTML = "";
navigator.device.capture.captureImage(captureImageSuccess, captureError, {limit: 1});
}
}
function captureImageSuccess(mediaFiles) {
var i, len;
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
};
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// uploadFile(mediaFiles[i]);
document.getElementById('capture-result').innerHTML = "<br/><strong>" + (i+1) + " file<br/> Path: " + mediaFiles[i].fullPath + "</strong><br/>" +
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
mediaFiles[i].getFormatData(formatSuccess, formatError);
}
console.log("captureImageSuccess");
}
</script>
</head>
HTML:
<body>
<button onclick="captureImage();">Capture Image</button> <br>
<button onclick="showImage();">Show Image</button><br>
<div class="result-block">
Capture Result: <span id="capture-result"></span><br/>
<span id="errormsg"></span>
</div>
</body>
</html>
Well you have the image's full path, just create an img element :
<img id="picResult" />
and in your javascript set it's url whenever you get a response:
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
//HERE:
document.getElementById('picResult').src = mediaFiles[i].fullPath;
};
I posted answer to issue similar like yours. That post show you how you show captured picture on a thumbnail.
See how you could solve your issue: https://stackoverflow.com/a/14043467/1853864
HTML
<img id="picResult" width="100px" border="1" />
JS
// capture callback
function captureSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// do something interesting with the file
$('#picResult').attr('src',path);
}
};
Make sure to check the PhoneGap version number on top right of these online docs to make sure you are doing things right.
SEE HOW HERE TOO PhoneGap - Media Docs