Learning how to use Phonegap to create an Android application I am still experimenting with the fundamentals of HTML and JavaScript. Trying to add a button, I must have done something fundamentally wrong...
this is my body element:
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="divContent">
<p id="content"></p>
</div>
</div>
To start with I have some basic functionaloty. I have a databasequery (it works) and the result should produce some text and a button:
if(results.rows.item(0).c == 0){
document.getElementById("content").innerHTML=
"You don't have any service items ....etc";
var btn = document.createElement("newItem");
btn.setAttribute("type", "button");
btn.setAttribute("value", "AAARGH!");
btn.setAttribute("name", "btnNew");
document.getElementById("divContent").appendChild(btn);
}
The text is displayed, the button is not and I cannot understand why. From what I have read this is the way to create a button with JavaScript.
Full source is available here: http://code.google.com/p/easy-service/source/browse/trunk/EasyService-Common/app/app.html
You need to create the button node like this:
var btn = document.createElement("input");
The parameter you're passing in is the type of element-- in this case, we want an input element.
Related
So im working on this feature when user can edit the element, (HIS ID) the page has firewalls so its private it requires password to enter just to let you all know, but the problem is at the javascript part i think theres something generating an auto save input button that i cannot identify on the coding it only displays from the source.
explaining: theres one button that you can use to save the changes you made to the element (you can see it below at the input tag) then theres a button above it that i cannot see on the open code but it only displays at the souce and i don't know where it comes from) Please someone help me remove it, that would save me hours of work!
<!DOCTYPE html>
<script data-ad-client="ca-pub-7267901485160871" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link rel='icon' href='favicon.png' type='image/x-icon'/ >
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
</script>
<div class="row">
<div class="column">
<div class="card">
<div class="container">
<h1 style="color: red;">ID</h1>
<div id="edit" contenteditable="true">
<body onload="checkEdits()">
<p contenteditable="true" class="price">2447597194</p>
</div>
</div>
<input type="button" class="w3-btn w3-black" value="Ruaj ndrysh" onclick="saveEdits()"/>
<p></p>
</div>
</div>
</div>
</div>
<div id="update"> - Edit the text and click to save for next time</div>
Well I think itsn't javaScript what is generating the input, only this line of code:
<div id="edit" contenteditable="true">
is what making the input editable.
and in saveEdits() function you are saving the edited info into the localStorage, tharefore you are keep seing it even after a reloading of the page...I think!
I'm setting up a quiz where I can choose the number of questions to be populated by php.
When the last question is cleared it displays a new content.
But I'd like to display it only when one of the button is clicked.
Because the buttons are populated with php I can't use a custom ID.
So I'd like to trigger an event (a popup window) if one of the button is click and stop the event that display the next content.
Unfortunatly I can't achieve this.
Tried to use event.propagation, but my knowledge in coding is so low I don't even know what I do.
$(document).on("click", "#q3a2", function newPopup(url) {
popupWindow = window.open(
"./gluck.html",'popUpWindow','height=10vh,width=auto,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
});
if ($(".questionStep").length <= 0 ) {
$("#Box1").hide();
$("#NewContent").show();
}
<div id="Box1" class="cearfix" style="">
[…]
<article id="step3" class="questionStep clearfix" data-step="3" style="">
<button onclick="scrollToTop()" class="stepButton yesBtn s3" data-step="3" id="q3a1">Yes</button>
<button onclick="scrollToTop()" class="stepButton yesBtn s3" data-step="3" id="q3a2">No</button>
</article>
</div>
At the moment I can pop up the window but the newcontent is displayed. I'd like it to stay hidden until q3a1 is clicked.
Thanks
So I need to make something like this happen - http://jsfiddle.net/3nk8x98g/1/ everything is explained in the link.
What do I use Javascript or AJAX? And maybe someone knows a tutorial or something out there? Thanks.
<body>
<div class="row">
BUTTON1
BUTTON2
BUTTON3
</div>
<div class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
</body>
AJAX is just a JavaScript technique, so yet, you need to use AJAX and JavaScript. Look at this for examples of how to achieve it using JavaScript only.
<body>
<div class="row">
<a id="one" href="#">BUTTON1</a>
<a id="two" href="#">BUTTON2</a>
<a id="three" href="#">BUTTON3</a>
</div>
<div id="content" class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
<script>
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var content = document.getElementById("content");
one.addEventListener("click", function() {
content.innerHTML = "One";
});
two.addEventListener("click", function() {
content.innerHTML = "Two";
});
threee.addEventListener("click", function() {
content.innerHTML = "Three";
});
</script>
</body>
You can do this. Ajax is just for getting data from server without refreshing but you have to use javascript to attach that content to html dynamically.
$('a').on('click', function(){
$('#changeingDiv').html('Changed Content');
}
);
this is just for example. Bind an event to the buttons, and on its click change the content of the div. For different content on different button click you can add id to them and change the content accordingly on some condition.
http://jsfiddle.net/3nk8x98g/2/
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
I have been trying to figure a way to add a div inside another div using a button, but I think the logic for it may be a bit beyond my reach at the moment. Basically I have this labs facilities, and when I create one in a page it should add them to the database, that is done and working.
Then I needed a div acting as popUp to retrive the information of each lab, that also works but if I have more than one lab is displays all the information of those labs in that one popUp meant for one. Which brings me to my next point.
I needed and decided that when I click the Aceptar button the new div created should have a id=n, where for each new div added it goes n+1, so div1 has a id of 1, div 2 of 2 and so on. I think this made using arrays... in that way I can update my php code to say:
function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)
$result = do_query($query);
return $result;
}
Right now this is the code I have...because I am stumped:
Html code in the php. page for the list of labs:
<div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST
<div> //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box"> //So if I add another it would be Lab#4 with id=4
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div
</div>
Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="agregar()"/>
In both pages (list and add) the scripts as well as the includes are present.
And the code I was thinking for adding new divs (as well as removing one) goes along these lines:
function agregar() {
var div = document.createElement('div');
div.className = 'box';
'<div class="box">
<p>Lab HERE GOES NUMBER</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>';
document.getElementById('content').appendChild(div);
}
function eliminar(input) {
document.getElementById('content').removeChild( input.parentNode );
}
But I hitted a mental block about how to proceed now >.< any help would be a godsend, I tried to keep it brief and only put the relevant code but if there is anything else I could provide in order to get some help I will do it.
Thanks a lot in advance and best wishes!
I think you can do this:
div.id = querySelectorAll('lista > div').length +1;
The length varies each time you add the div. So this should work for you.
If I understand the code correctly, you want to click a button and be able to add a div inside another div with the id = to the previous id+1?
JQUERY
$(document).ready(function(){
var counter = 1;
$('#addDiv').click(function(){
$('#'+counter).html('<div id="' + (++counter) + '"></div>');
});
});
HTML
<div id="1">
</div>
<button id="addDiv">Add Div Inside</button>