I'm trying to follow this guide and I'm having a bit of an issue I can't figure out how to fix.
Basically in PassKeys.html you have these 2 following bits of code:
<button class="btn btn-success" onclick='start()'>Add Key</button>
function start(){
$("#modal-title").html("Enter a token name")
$("#modal-body").html(`<p>Please enter a name for your new token</p>
<input type="text" placeholder="e.g Laptop, PC" id="key_name" class="form-control"/><br/>
<div id="res"></div>
`)
$("#actionBtn").remove();
$("#modal-footer").prepend(`<button id='actionBtn' class='btn btn-success' onclick="begin_reg()">Start</button>`)
$("#popUpModal").modal('show')
}
Now I'm no JavaScript expert but I would wager that when I click that button (which I can see in my webpage) a function should run that activates a modal.
In the example provided by the guide things do work exactly that way, but in my application it doesn't seem to, and the code itself is exactly the same.
What could be the cause of that?
Related
I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip
I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.
On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.
This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});
I have issue I'm making asp .net application any on my view page I got problem.
When I run application in Chrome everything works perfect, but when I run it in Mozilla it just somehow add's disabled="" on my button - when I see page source attribute is added.
Here's my button code:
<button class="btn btn-warning btnBid" value="Bid" type="button" id="#Html.Raw("btn" + item.IDAuc)">
Bid
</button >
I still don't know why this happened, but as one solution I've called initialize() function in JavaScript in which I've just set all buttons' class to be btn and simply just call:
$(".btn").prop("disabled", false);
I'm trying to piece together a basic page using PHP & JS to take me to a google map related to a search box. However the JS script will only run with an alert, no other function type will run:
The address bar just changes to "Domainx.com/?searchButton="
The code for the button is:
<button class="btn btn-success btn-lg" name="searchButton" onclick="searchFunction()">Search </button>
and directly under it (within the body) is have my script:
<script>
function searchFunction() {
alert("pressed");
}
</script>
When i change the alert to anything else i.e. window.location.href = "http://www.google.com"
it simple stays on the page and only the address bar changes.
You probably wanted to use window.open("http://www.google.com/search?q=the_meaning_of_life");
If you wanted to use reload onclick, the following should work:
<input type="button" value="Reload Page" onClick="window.location.reload()">
There is an example of how to dow it here - http://www.mediacollege.com/internet/javascript/page/reload.html
This is not a major issue, but I've never seen the behavior I'm about to describe, and I thought if a group of people could help me understand it, it would be you guys. Basically, when I put a button in a header, my data-ng-click did not fire. When I wrote out the same line again, the click worked fine. My question is basically, am I missing something with my code that causes my issue? I'll go through the steps I've just followed to troubleshoot this;
I have a page, it looks like;
<div data-ng-app="myApp" data-ng-controller="myController">
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
I click the button, the showMe function which is defined in $scope in my controller doesn't alert as I would expect. So, I modify my code;
<div data-ng-app="myApp" data-ng-controller="myController">
Click Me
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
And the alert shows. So, I wonder if it's something to do with my putting the button in header causing some issues for whatever.
<div data-ng-app="myApp" data-ng-controller="myController">
<div class="row">
<h1>Title</h1>
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
</div>
And nothing works. So, I decided to type out the same button again, above the existing button and see if a particular element was causing an issue. I started with button with data-ng-click. Alert fires. I keep adding things back in until I get
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
<button type="button" class="btn btn-primary pull-right" data-ng-cliok="showMe()">Click me</button>
And the new button works. So, I delete the new button, the old button doesn't work. I delete the old button, the new button works. I open the file in a text editor and show all characters, nothing out of the ordinary, it's not a result of any copy and paste mistake.
I'm obviously going to leave the new button in place, but if I an explanation is possible, then I would like to try and get one.
So, pixelbits pointed out my issue. On my monitor, the font I was using in the editor makes very little distinction between the c and an o in the word click. Even though I believed myself to have read over the line several times, it wasn't until I went back to look at the line looking for that particular issue that I realized I had just completely overlooked it.
Thank you pixelbits, and thank you guys for taking the time to look.
My button with id "jump-button" is not working at all. Whenever it is clicked nothing will happen. (I have added a alert(); to the onclick attribute so I know when the button is working.
The other two buttons (next and prev) are working absolutely fine.
<body>
<div id="fact">Fact #1: In 2002, the most popular boat name in the U.S. was Liberty</div>
<input id="next" type="image" src="images/next-button.png" name="next" value="Next" onClick="num++;document.getElementById('fact').innerHTML=getFact(num);"/>
<input id="prev" type="image" src="images/prev-button.png" name="previous" value="Prev" onClick="num--;document.getElementById('fact').innerHTML=getFact(num);"/>
<p id="jump-text">Jump To Fact #</p>
<input id="textarea" type="text" name="factNumber" />
<input id="jump-button" type="image" src="images/jump-button.png" name="jump" value="Jump" onClick="alert();num = document.getElementById('textarea').value;document.getElementById('fact').innerHTML='getFact(num);"/>
</body>
External JS File (it has been inported in the HTML header)
facts = [element1, element2, ... wayy too many elements to have them all here];
var num = 1;
function getFact (num){
return 'Fact #' + num + ' ' + facts[num-1];
}
As you can see, this is a very simple app being built (something that just runs through various interesting facts). I am fairly new to javascript, so please excuse me if I made a very blatant error.
My CSS file is very nice and simple too, I doubt it it causing the trouble, but if it is required I will shot it upon request.
Lastly, the rest of the html <head> is also very simple (only consists of some meta data, title, css and javascript imports).
If anyone needs more information to help me get the "jump" button working, please ask.
You have a stray ' in your inline onClick attribute.
// ---------------------------------------------------v
onClick="...document.getElementById('fact').innerHTML='getFact(num);"