Phonegap app with jquery mobile contact form not working
Question
I was building hybrid app using jQuery mobile and Phonegap, but I am stuck with the contact form here. The code is located here:
http://jsfiddle.net/8cpdcfow/
At the jsfiddle the only difference is that send.php is given as send.php without url because it is located in the root folder. I was using code earlier like a webapp and it worked very well but I don't know why now it displays Message sent message but the message is not sent. Here is the code hosted: http://radio-pendimi.com/mobile/v2/#dergomesazh
UPDATE 2:
Now online on the web the contact form works very well,but after I builded webapp for android using phonegap and installed on android device when I press the submit button to send the message it returns me the whole php code of the form instead of Message sent or Message failed message. Below is screenshot:
http://i60.tinypic.com/abqya0.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Radio Pendimi - online streaming</title>
<link rel="apple-touch-icon" href="images/AppIcon.png" />
<!-- CSS LIDHJET -->
<link rel="stylesheet" href="css/new_template.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0-rc.1.min.css" />
<link rel="stylesheet" href="css/stili.css"/>
<!-- JS LIDHJET -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
<!-- Kanali 1 - homepage -->
<div data-role="page" id="home" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Radio Pendimi 24h Live </h1>
<a href="#dergomesazh" data-role="button" data-inline="true" data-mini="true" data-icon="mail" data-iconpos="notext"></a>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px; padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=3204"></script> <br><br>
<audio src="http://server2.digital-webstream.de:35505/;$type=mp3" id="player" autoplay></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player').muted=!document.getElementById('player').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
<li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
<li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
<li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Informacione -->
<div data-role="page" id="info" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;">
<p align="center">
<a href="mailto:info@radio-pendimi.com" style="text-decoration:none; text-shadow:none; color: #fff;font-weight: 500;font-size: 20px; font-family: Dosis;">info@radio-pendimi.com </a><br>
<a href="http://radio-pendimi.com" style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 20px; font-family: Dosis;">http://radio-pendimi.com </a><br>
<span style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 15px; font-family: Dosis;">Programuar & Dizajnuar nga Afrim Azizi</span> <br>
<a href="https://www.facebook.com/radioopendimi" target="_blank"><img src="images/find-us-on-facebook.png" style="width: 170px; padding: 5px;"/></a>
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
<li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
<li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
<li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Kanali 2 -->
<div data-role="page" id="kanali-2" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Kanali - 2 </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px;padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=7399"></script> <br><br>
<audio src="http://server6.digital-webstream.de:8400/;$type=mp3" id="player-2"></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player-2').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player-2').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player-2').muted=!document.getElementById('player-2').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
<li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
<li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
<li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Donacione - Kontribo edhe ti -->
<div data-role="page" id="donacion" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<p style="text-align:center; text-shadow:none; color:#fff;">
Vëllezër dhe motra,
Kjo Radio çdo ditë bëhet shkak për udhëzimin e dikujt dhe kthimin e tij në rrugën e xhenetit, mirëpo ajo nuk mund ta çojë mesazhin e saj në vend pa përkrahje financiare. Nëse ju jepni kontributin tuaj do të keni hise në sevapet që fitohen nga kjo punë. Pejgamberi, alejhi salatu ue selam, ka thënë: “Sadakaja e shuan zemërimin e Allahut ashtu sikur uji e shuan zjarrin” (Sahihu Tergib nr. 983).
Ju bëjmë thirrje që ta përkrahni këtë projekt madhështor, për mirësinë e të cilit jemi dëshmitarë të gjithë ne.
Keto jan pikat kryesore :<br>
– Mirëmbajtjen dhe rritjen e kapacitetit të serverëve.<br>
– Mirëmbajtjen materiale të studiove që kemi në disa vende, sidomos studion numër 2 – Prizren, e cila ka një orar më të zgjeruar dhe më të pasur,<br>
– Mirëmbajtjen e ueb-faqes dhe serverit të veçantë që ka ajo,<br>
– Marketingun e Radio Pendimit në përgjithësi (fllajera, pllakata, reklama nëpër medie, etj.).<br>
Allahu ju shpërbleftë!
<p style="text-align:center; text-shadow:none; color:#fff;">Mund të kontribuoni nëpërmjet llogarisë bankare:<br>
Emri: Radio Pendimi<br>
Emri i bankës: Volksbank Linz <br>
IBAN: AT744480042614830000<br>
Bic Swift Code: VBWEAT2WXXX
</p>
<br>
<!-- PayPal Form start -->
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="GRGWN8J9JDM6U"> <input alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." name="submit" src="https://www.paypalobjects.com/de_DE/AT/i/btn/btn_donateCC_LG.gif" type="image"> <img src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" alt="" width="1" height="1" border="0"></form>
</div> <!-- PayPal form end -->
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
<li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
<li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
<li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Dergo Mesazh -->
<div data-role="page" id="dergomesazh" data-theme="b">
<!-- Header -->
<div data-role="header" data-position="fixed" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow:none">Dërgo Mesazh</h1>
<a href="#home" data-role="button" data-inline="true" data-mini="true" data-icon="home" data-iconpos="notext" data-transition="none"></a>
</div>
<!-- content -->
<div data-role="content">
<form class="form" id="callAjaxForm">
<p class="name">
<input name="emri" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Emri" id="name" data-role="none" />
</p>
<p class="text">
<textarea name="comment" class="validate[required,length[6,30]] feedback-input" id="comment" placeholder="Mesazhi" data-role="none" ></textarea>
</p>
<div class="submit">
<button id="submit" type="submit" >DËRGO</button>
<button id="reset" type="reset" >PASTRO FUSHAT</button>
</div>
<h3 id="notification" align="center" style="font-color:green;"></h3>
</form>
</div>
<!-- footer -->
</div>
<!-- End Page -->
</body>
</html>
myscript.js
//DergoMesazh
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "send.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
$("#reset").click(function() {
$('#callAjaxForm').trigger("reset");
$('#notification').text("");
});
});
Send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "afrim.a@msn.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Emri: " . $emri . "\r\n Mesazhi: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
$from = "radio-v2@test.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if(@mail($to,$subject,$message,$headers))
{
echo "Mesazhi juaj u dërgua me sukses";
}else{
echo "Gabim! Ju lutemi provoni përsëri.";
}
?>
2 answers
solution1
0 2015-01-22 18:20:15
Try using the above code in Phonegap using input type=button instead of input type=submit.
Also, double check if the required assets for Phonegap [Cordova.js,jquery and other JS] are loaded properly.
Also it would help, if you can post the entire code as it is bundled in Phonegap
solution2
0 ACCPTED 2015-01-22 23:10:01
Ok now I fixed the problem and I wanted to share the solution for others who have this issue. The myscript.js from where is made ajax call to the PHP file (send.php),instead of declaring local php file you need to declare the url of the php file because while building the app with phonegap/cordova it doesn't execute the php file. Also you need to enable crossDomain:true, Below is the fully functional code in jsfiddle: http://jsfiddle.net/8cpdcfow/1/
Here is the send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "your-email@hotmail.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Name: " . $emri . "\r\n Message: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
//Maybe you need to add $from email into whitelist at your inbox because the messages may be classified to the junk/spam folder
$from = "no-reply@domain.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if ($emri == "" || $mesazhi == ""){
echo "Empty strings,the form is not filled";
} else {
if(@mail($to,$subject,$message,$headers))
{
echo "Message Sent successfully";
}else{
echo "Message Failed to sent.Try again";
}
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jquery mobile prevent default not working for phonegap app
Jquery Mobile Not working with Phonegap/Cordova
jquery mobile not loading in phonegap app
Why is jquery mobile not working for Phonegap?
jQuery validation is not working in contact form
Jquery unbind() not working for contact form
Phonegap Jquery Mobile Form Submit Refresh
jQuery Mobile - PhoneGap - Google maps not working
Phonegap with jquery mobile “hello world” not working
JQuery Mobile + Phonegap : $.ajax calls not working
Related Tags