0
J'ai développé l'application html + onsenui + jQuery qui est désigné pour être une application Android hybride (phonegap), mais je suis confronté à des problèmes que la mise en page et cliquez/toucher les événements ne fonctionnent pas.jquery cliquez sur/événements tactiles ne fonctionne pas sur l'application hybride livré via phonegap
Voici le code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script>
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var i = 1
var myTimer = setInterval(function(){
$("#message").html(i);
if (i <= 30){
i += 1;
}
}, 1000);
setTimeout(function() {
modal.hide();
clearInterval(myTimer);
$("#message").html("");
ons.notification.toast({message: "Now you are free to open/close again.", timeout: 2000});
}, 30000);
}
$(function(){
$('#btn-outdoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-indoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-both-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
ons.notification.toast({message: '5 seconds delay before another switch', timeout: 3000});
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000})
}
});
setTimeout(function(){
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
}, 5000);
});
});
</script>
</head>
<body style="font-family: monospace;">
<ons-page>
<div id="btn-outdoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #0F2043; color: white;">
<h2>Outer</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-indoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #79CEDC;">
<h2>Inner</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-both-open" style="height: 33.34%; text-align: center; padding-top: 17%; background-color: #D5A458;">
<h2>Both</h2>
<ons-ripple></ons-ripple>
</div>
</ons-page>
<ons-modal direction="up">
<div style="text-align: center">
<p>
Operation takes 30 seconds to finish<br><br>
<ons-icon icon="md-spinner" size="28px" spin></ons-icon><br><br>
<span id="message"></span><br><br>
</p>
</div>
</ons-modal>
</body>
</html>
où l'application se présente comme suit:
mais si je Regroupez l'application avec espace de téléphone, il ressemble à ceci:
Je soupçonne que le code jquery entier ne fonctionne pas sur mobile, mais dans l'outil tutoriel onsenui cela fonctionne correctement. Pourquoi les événements touchant et/ou jQuery ne fonctionne pas sur un appareil mobile? Merci
Y at-il une possibilité que les problèmes soient causés par les versions CDN de jquery et onsenui? – radicz