i am creating a survey app where user can create surveys, those surveys are stored in separate html files (example: 123.html), in order to be able to edit this file like add or remove textbox or checkbox... i read the file with cordova and put the contents in an iframe,what i am trying now is when user clicks in this iframe user should be able to edit the clicked element. however sometimes the click works and sometimes not. i have tried many different codes but none seems to be fine, when it works then on reloading the page it doesnt work anymore some sample code i already tried:
$(function(){
$('#ifr2').on('click',function(){
$('#ifr2').contents().find("h2").click(function(){alert('title');});
var q=$('#ifr2').contents(); console.log(q);
$(q).find('html').on('click',function(e){console.log(e.target.id);});});
});
and:
$(function(){ var r= $('#ifr2').contents().find("body");console.log(r);
$(r).on('click',function(event){
console.log(event.target.nodeName);
});
// alert(event.target.nodeName);});
and:
$("#ifr2").contents().find("h2").on('click',function(){alert('h2');});
and:
$('#ifr2').load(function(){
var iframeBody = $('body', $('#ifr2').contentWindow.document);
$(iframeBody).on('click', 'h2', function(event) {
console.log(event.target.nodeName);
});});
the first one and last one works only sometimes, so after reading alot of pages here and from google i decided it would be better to just put the content in a div instead of an iframe
<div id="test" style="border:1px solid black; padding:10px 10px 10px 10px; " data-role="none"></div>
putting the content into the div works but now there is an issue with the checkboxes and radiobuttons which come from the html file, they are not aligned, i tried to align them but also failed, take a look at the screens:
i also tried to align the labels for the chkboxes and radios like this:
function testf(){
$('#test label').css({"float":"right"});
}
after seeing that the div content is kind of messed up, i copied the div content into another page just for testing and there it is aligned properly
for me it is not important if its a div or an iframe, important is that i can easily click in it for editing and that it is aligned properly when it is loaded.
the file content is the following:
<!DOCTYPE html>
<html>
<head>
<title>Umfrage</title>
</head>
<body>
<h2 style="text-align:center;">survey title</h2>
description <br>
<form>
<fieldset style="border:1px solid black"><legend><b>1</b></legend><p>question 1</p><textarea name="txtarea1"></textarea></fieldset><br>
<fieldset style="border:1px solid black"><legend><b>2</b></legend><p>radiobuttons </p>
<input id="radio1" name="radio1" type="radio"><label for="radio1">a</label><br>
<input id="radio2" name="radio1" type="radio"><label for="radio2">abcdefg</label><br>
<input id="radio3" name="radio1" type="radio"><label for="radio3">c</label><br></fieldset>
<fieldset style="border:1px solid black"><legend><b>3</b></legend><p>chkboxquestion</p>
<input id="chkbox1" name="chkbox1" type="checkbox"><label for="chkbox1">a</label><br>
<input id="chkbox2" name="chkbox1" type="checkbox"><label for="chkbox2">b</label><br>
<input id="chkbox3" name="chkbox1" type="checkbox"><label for="chkbox3">abcde</label><br></fieldset>
<hr id="hrid">
<input value="Abschicken" type="submit">
</form>
</body>
</html>
edit
solved it by using the below code for changing the div css:
$('#test :radio, :checkbox, label').css({"float":"left","line-height": "1.6em","height":"1.6em","margin":"0px 2px","padding":"0px"});
$('#test :radio, :checkbox').css({"clear":"left"});
thanks to TheGr8_Nik from How to align checkboxes and their labels consistently cross-browsers
there is no need for an iframe now, div is better
