Edit: i opended a new thread OnClick works only works after reload, using jquerymobile
but feel free to answer this. I will delet it on 30th of septemeber. if there is no answer!
EDIT VIEW DAYS LATER: I replaced a lot of jquery statements with js. This okay now. But the problem with the refresh is still there. If somebody may have an answer. I tried for example:
$("#anchor0").live("click", dateElementClicked($("#anchor0")));
The Problem ist he runs, the function after loading page. But doesn'T find an anchor and stucks there!
Original: I'm making an app with cordova and always tried only browser. No I tested it on an android phone again and realized, that a lot of jquery function didn't work properly, so I read a little bit and added jquery mobile (which, I figured out, is more for UI Stuff).
I have some big Problems now:
Some JS functions just run after refreshing the page (in Browser) on mobile nothing works. For example I add a new "DateElement" (div with a in it), with the function "newDateElement()" after opening the page. Before adding jq mobile it worked fine. Now i need to refresh. Even if I add the first Element in html manually, i have to refresh, that the function works.
<div data-role="main" class="ui-content">
<div class="divRollOut" id="unrolled">
<a data-role="button" onclick="dateElementClicked(this)">Neuen Termin Hinzufügen</a>
</div>
</div>
Script:
// the first dateElement
$(document).on("mobileinit", newDateElement());
//$(".ui-content").live(newDateElement());
//newDateElement();
In new this Functions are some Problems, too. When adding the element it isn't enough to declare the a, as data-role="button", but I have to add class and role manually.
function newDateElement() {
//$(".ui-content").append("<div class='divRollOut' id='unrolled'><a data-role='button' onclick='dateElementClicked(this)'>Neuen Termin Hinzufügen</a></div>");
// $(".ui-content").trigger('create');
var newDateElement = $(document.createElement('div')).attr("class", 'divRollOut');
newDateElement.after().html("<a data-role='button' onclick='dateElementClicked(this)' class='ui-link ui-btn ui-shadow ui-corner-all' role='button'>Neuen Termin Hinzufügen</a>");
newDateElement.appendTo(".ui-content");
alert("newDateElement");
}
The other bit Problem is: Also before adding jq mobile this worked in Browser (not on mobile).
function dateElementClicked(clickedAnchor) {
newDateElement();
if ($(clickedAnchor).parent().attr("id") == "unrolled")
{
dateElementClickedFirstTime(clickedAnchor);
newDateElement();
}
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
{
hideInput(getDateElementNumber(clickedAnchor));
}
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
{
showInput(getDateElementNumber(clickedAnchor));
}
else
{
alert("Element not listed");
}
}
The Console says $(...).parent(..).attr(...)) is undefined (the stuff in the retunr bracket.
//gets the Number of the Dateelement of a clicked Anchor
function getDateElementNumber(clickedAnchor) {
alert($(clickedAnchor).attr("id"));
alert(($(clickedAnchor).parent().attr("id")));
return(($(clickedAnchor).parent().attr("id")).slice(-1));
}
It handles what happens if an "a" is clicked. Id collapses oder decollapse the div and on the First time an "a" is clicked, it added an new DateElement and added some html stuff to the parent div of the "a". The Proble, ist
// if a is clicked the first Time
function dateElementClickedFirstTime(clickedAnchor) {
//adding the html stuff
var div = $(clickedAnchor).parent(".divRollOut");
div.attr("id", "dateElement" + numberOfAppointments);
div.appendTo("<p id='labelDate'>Datum: <input id='day' value=''/><input id='month' value='MM'/><input class='big' id='year' value='YYYY'/></p>");
div.appendTo("<p id='labelTime'>Uhrzeit: <input id='hour' value='hour'/><input id='min' value='min'/></p>");
div.css("background-color", "#009688");
//adding to apoinment list
appointmentList[numberOfAppointments] = new Object();
appointmentList[numberOfAppointments]["Id"] = numberOfAppointments;
appointmentList[numberOfAppointments]["Date"] = new Date();
appointmentList[numberOfAppointments]["RolledOut"] = true;
//decide which Time and Date will be preconfigured
var dateTime = appointmentList[numberOfAppointments]["Date"];
if (numberOfAppointments == 0) {
setCurrentTime(numberOfAppointments, dateTime);
}
else if (numberOfAppointments == 0) {
dateTime.setHours(dateTime.getHours() + numberOfAppointments);
setCurrentTime(numberOfAppointments, dateTime);
}
//countig up the ID counter (must come at last)
numberOfAppointments += 1;
}
If somebody has an Solution I would be very thankfull. Its for my bachleor thesis and i didn't have much time left. The thing I'm trying to do here is:
Add a new DateItem if page is opend
Whenn "a" is clicked. Add new DateItem and some Stuff to the "div" of the "a"
and when its collapsed decolapse it.
Here is the link to the git: https://github.com/LosKartoflos/Apoll.git
and the whole code:
<html>
<head>
<title>SetDate</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="../../../css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../../css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="../../../js/index.js"></script>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Zeiten</h1>
</div>
<div data-role="main" class="ui-content">
<div class="divRollOut" id="unrolled">
<a data-role="button" onclick="dateElementClicked(this)">Neuen Termin Hinzufügen</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<a href="Schedule_settings.html" data-transition="slide" data-direction="reverse" >Zurück</a>
<a href="Schedule_End.html" data-transition="slide" style="float: right" >Weiter</a>
</div>
</div>
<script>
//$.mobile.loadingMessage = false;
//$.mobile.hidePageLoadingMsg();
//jQuery(document).on("mobileinit", function () {
// jQuery.mobile.autoInitializePage = false;
//});
// the first dateElement
//$(document).on("mobileinit", newDateElement());
//$(".ui-content").live(newDateElement());
//newDateElement();
var numberOfAppointments = 0;
var apointment = {
id: 0,
date: 0,
rolled: false
};
var appointmentList = new Array();
/*$("a").click(function () {
alert("a clicked");
dateElementClicked(this);
});*/
/*Controls what happens if a dateElement is clicked:
*
* if its the first time it will change to a normal dateElement
* else it will be pop out an will be editable or shrink
*/
function dateElementClicked(clickedAnchor) {
newDateElement();
/*if ($(clickedAnchor).parent().attr("id") == "unrolled")
{
dateElementClickedFirstTime(clickedAnchor);
newDateElement();
}
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
{
hideInput(getDateElementNumber(clickedAnchor));
}
else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
{
showInput(getDateElementNumber(clickedAnchor));
}
else
{
alert("Element not listed");
}*/
}
//gets the Number of the Dateelement of a clicked Anchor
function getDateElementNumber(clickedAnchor) {
alert($(clickedAnchor).attr("id"));
alert(($(clickedAnchor).parent().attr("id")));
return(($(clickedAnchor).parent().attr("id")).slice(-1));
}
// if a is clicked the first Time
function dateElementClickedFirstTime(clickedAnchor) {
//adding the html stuff
var div = $(clickedAnchor).parent(".divRollOut");
div.attr("id", "dateElement" + numberOfAppointments);
div.appendTo("<p id='labelDate'>Datum: <input id='day' value=''/><input id='month' value='MM'/><input class='big' id='year' value='YYYY'/></p>");
div.appendTo("<p id='labelTime'>Uhrzeit: <input id='hour' value='hour'/><input id='min' value='min'/></p>");
div.css("background-color", "#009688");
//adding to apoinment list
appointmentList[numberOfAppointments] = new Object();
appointmentList[numberOfAppointments]["Id"] = numberOfAppointments;
appointmentList[numberOfAppointments]["Date"] = new Date();
appointmentList[numberOfAppointments]["RolledOut"] = true;
//decide which Time and Date will be preconfigured
var dateTime = appointmentList[numberOfAppointments]["Date"];
if (numberOfAppointments == 0) {
setCurrentTime(numberOfAppointments, dateTime);
}
else if (numberOfAppointments == 0) {
dateTime.setHours(dateTime.getHours() + numberOfAppointments);
setCurrentTime(numberOfAppointments, dateTime);
}
//countig up the ID counter (must come at last)
numberOfAppointments += 1;
}
//Time Validation
//gets The entered Date Values of Specific box
function getTimeOfdateElement(numberOfAppointments) {
var dateTime = new Date(
$("#dateElement" + numberOfAppointments + " #year").val(),
$("#dateElement" + numberOfAppointments + " #month").val(),
$("#dateElement" + numberOfAppointments + " #day").val(),
$("#dateElement" + numberOfAppointments + " #hour").val(),
$("#dateElement" + numberOfAppointments + " #min").val()
);
return (dateTime);
}
//apply the the Time from Textboxes to Current Item
function applyTime(numberOfAppointments, dateTime) {
}
//fills the Textboxes with current time for the first use or with the next logical
function setCurrentTime(numberOfAppointments, dateTime) {
$("#dateElement" + numberOfAppointments + " #day").val(dateTime.getDate());
$("#dateElement" + numberOfAppointments + " #month").val(dateTime.getMonth());
$("#dateElement" + numberOfAppointments + " #year").val(dateTime.getFullYear());
$("#dateElement" + numberOfAppointments + " #hour").val(dateTime.getHours());
$("#dateElement" + numberOfAppointments + " #min").val(dateTime.getMinutes());
}
//Show and Hide
//Hides in inputs and p of certain date Element
function hideInput(numberOfAppointments) {
$("#dateElement" + numberOfAppointments + " #day").hide();
$("#dateElement" + numberOfAppointments + " #month").hide();
$("#dateElement" + numberOfAppointments + " #year").hide();
$("#dateElement" + numberOfAppointments + " #hour").hide();
$("#dateElement" + numberOfAppointments + " #min").hide();
$("#dateElement" + numberOfAppointments + " #labelDate").hide();
$("#dateElement" + numberOfAppointments + " #labelTime").hide();
appointmentList[numberOfAppointments]["RolledOut"] = false;
}
//Shows in inputs and p of certain date Element
function showInput(numberOfAppointments) {
$("#dateElement" + numberOfAppointments + " #day").show();
$("#dateElement" + numberOfAppointments + " #month").show();
$("#dateElement" + numberOfAppointments + " #year").show();
$("#dateElement" + numberOfAppointments + " #hour").show();
$("#dateElement" + numberOfAppointments + " #min").show();
$("#dateElement" + numberOfAppointments + " #labelDate").show();
$("#dateElement" + numberOfAppointments + " #labelTime").show();
appointmentList[numberOfAppointments]["RolledOut"] = true;
}
/*adds a new Date Element to the Container div*/
function newDateElement() {
//$(".ui-content").append("<div class='divRollOut' id='unrolled'><a data-role='button' onclick='dateElementClicked(this)'>Neuen Termin Hinzufügen</a></div>");
// $(".ui-content").trigger('create');
var newDateElement = $(document.createElement('div')).attr("class", 'divRollOut');
newDateElement.after().html("<a data-role='button' onclick='dateElementClicked(this)' class='ui-link ui-btn ui-shadow ui-corner-all' role='button'>Neuen Termin Hinzufügen</a>");
newDateElement.appendTo(".ui-content");
alert("newDateElement");
}
</script>
</body>
