My head is about to explode. I can't get this to work the way i want, and i can't seem to find out what's wrong with it.
I have a form which i need to process with AJAX.
But before i do that, i want to save it in window.sessionStorage.
The functionality has to work cross-device, and i'm having trouble with iOS.
There's alot of questions around stackoverflow and google concerning this, with various fixes. But none of them seem to work for me.
I have this form:
<form role="form" id="searchForm" data-method="search" action="" onsubmit="return doStuff('search')" data-ajax="false">
<div class="form-group">
<input type="search" id="search" name="s" class="form-control" placeholder="Search...">
<span class="help-block"><small>Search by partnumber, suppler or free text</small></span>
</div>
<button type="submit" data-ajax="false" class="btn btn-block btn-warning">Search</button>
</form>
Now, when the form is submitted, it runs through a function at about 200 lines, i've narrowed it down to where the code breaks.
Right here:
sessionStorage.last = search;
return false;
I
've gone from localStorage to sessionStorage in hope that, that might solve the problem, it didn't
I've tried the "right" way to set the variables with this sessionStorage.setItem('last', 'search')
But to no help.
The form is still being submitted regardless of what i do.
If i return false; BEFORE the sessionStorage it works fine, and stops the form.
It works fine on desktops and android, but it fails misserably on iOS devices
Debugging i've tried:
console.log(sessionStorage.last) returns null
console.log(typeof sessionStorage) returns object
console.log(sessionStorage.last = 'foo') returns foo
If you need more code / need me to try anything, please tell me!
According to Apple's docs, it should work:
https://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html
I've used localStorage without any issues, but not sessionStorage (though the docs say it should be interchangeable). You could try a try-catch block, so that the code doesn't crash, and you can get some clues. Apple mentions it could throw a QUOTA_EXCEEDED_ERR exception.
try {
sessionStorage.setItem("last", search);
} catch (e) {
alert("error: " + e);
}
Related
I have added the Classic TinyMCE editor to my website (angularjs version) and have the problem that when typing something into the editor, deleting it, and typing in something else doesn't update correctly.
When I write in "Test Support answer", delete it and then type "Maybe it'll work?"
and submit the ticket response, the outcome will be "Test Supp".
This only happens when the whole message is deleted. Deleting part of the message don't seem to cause any problems.
Did anyone else have any similar problem and may know a way of fixing it?
Fixed it myself. Implemented it different on another site and there it seems to work fine. Im not sure what's causing the problem but here's how I fixed it.
Old Implementation:
<form method="post" ng-controller="TinyMceController">
<textarea ui-tinymce="tinymceOptions" ng-model="ticketContent"></textarea> </br>
<button type="button" ng-controller="ticket-answer" ng-click="addAnswerAction()" style="background:#ff6464;color:#fff !important;">Create</button>
</form>
New Implementation (that fixed it):
<form method="post" >
<div ng-controller="TinyMceController">
<textarea ui-tinymce="tinymceOptions" ng-model="ticketContent"></textarea> </br>
<button type="button" ng-click="addAnswerAction(textContent)">Create</button>
</div>
</form>
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 this error but I can't see how to fix it. I've used JSLint with some results (it just tells me document isn't a global value, or the 'else clause' was not needed, etc) but no solution.
I have a form to be submitted and I need to compare that both email fields are equal. So I want a nice simple email1 == email2 script, jQuery isn't my strongest point, but I came up with this:
My form ID is "regIn", my email fields are type="email" (HTML5) and id="MailA" and id="MailB" respectively.
I have preloaded jquery 1.11.1.min.js
My jQuery code (see below why the #forgotten is still in there):
$(document).ready(function() {
$('#forgotten').click(function() {
$('#passbox').toggle(360);
return false;
});
$('#regIn').submit(function() {
// * referenced; but this isn't in the code: alert('alert1');
if ($('#MailA').val() === $('#MailB').val()) {
return true;
}
$('#errorMsg').innerHTML("Emails need to be the same!");
alert('Hello');
return false;
});
});
So - I use Alerts to see how far the script gets (i know, tacky debugging). firebug doesn't report page errors or script errors that I can see. The "alert 1" always fires on form submission, and successfully shows me the values of #MailA.val() and #MailB.val(),
But the if statement doesn't seem to fire at all. I have tried making the values variables (var d1 = $('#MailA').val() etc. ) but that doesn't change anything, the form always submits and neither the if or the else (which did surround the text below the if statement clause but JSLint said it wasn't needed so I removed it).
I have also used variations of syntax, using != and == but was also reading from JSLint that === and !== are preferred.
My HTML:
<form enctype="multipart/form-data" name="regIn" id="regIn" autocomplete="off" accept-charset="utf-8" action="#" method="post">
<div class="inputContainer">
<input type="email" value="" tabindex="31" id="MailA" name="regMailA" required>
</div>
<div id="errorMsg"></div>
<div class="inputContainer">
<input type="email" value="" id="MailB" tabindex="32" name="regMailB" required>
</div>
<div class="registerRow">
<input type="submit" class="regButton" value="Register" tabindex="34">
</div>
</form>
As I said, I've looked around for the last hour or so and I just can't see what it is.
Obviously the code is stripped down for the question, the only other aspect is that there is another piece of jQuery in the document ready function - as shown the #forgotten appears for showing / hiding an info. box, this works fine.
please note that you are using:
$('#errorMsg').innerHTML("Emails need to be the same!");
if you try to alert $('#errorMsg').innerHTML it will be undefined.
When you using JQuery selectors $('#errorMsg') JQuery will wrap the dom object with JQuery dom object that own JQuery special methods(val, html, etc), so you don't have access to the core method innerHTML, instead you should use:
$('#errorMsg').html("Emails need to be the same!");
Enjoy!
so I´m trying to make window.open function work, however I am not able to see it working correctly in Mozilla neither in IE, in both is opening a new tab, however it works correctly in Chrome,.. Here´s the thing:
<input type="submit" value="<%=I18n._("Register")%>" onclick="window.open('http://url.com')" class="button" />
I´ve tried almost everything I guess: location.href, window.self.. etc but nothing seems to work. How can I open this in self?
Thanks in advance.
You are canceling the navigation by submitting the form. You can do the following to prevent the default action (submit the form) and do the navigation instead:
<input type="submit" onclick="window.location.href='http://url.com'; return false;" class="button" />
I removed the value because you're not submitting the form anyway. Feel free to put it back if you use it for anything else, it shouldn't break anything.
Ok, I am developing a simple program to do xmlhttprequests so I can get a handle on how they work. On that page I have a simple text box, a label, and a button. When the button is clicked it sends out a request to another page via the javascript method, and it stores the response in the label.
(this is all the code in the body)
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(text1.value,'')">BUTTON</button>
This works perfectly in google chrome. But when it came time to try it out in IE7 it gave me an error. It said "Error: 'text1' is undefined". I've been trying to tweak everything I can to see if it makes a difference but now I'm kind of lost.
Any help would be much appreciated
edit: checkname function per request
The method calls loadXMLDoc which creates the xmlhttprequest object, forking the construction for older IE who use ActiveX and modern browers who have it native. It also creates a method to watch the status change, and if it is done successfully it recalls checkname with checkName('',results)
function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('label1');
message.innerHTML = response;
}else{
// Input mode
loadXMLDoc("http://localhost/xmlTest/Return.aspx","input="+input);
}
}
In your JavaScript "checkName(text1.value,'')" it is unclear what text1.value is referencing. You're assuming it's referencing the DOM Object you've declared in your HTML and FireFox seems to make that assertion as well however IE doesn't. text1 could have easily been a reference to an object declared earlier in your JavaScript code.
var text1 = {value: ""};
Frankly I'm surprised that FireFox didn't throw an error.
When referring to DOM objects (i.e. HTML elements) you need to use the document.getElementById or document.getElementsByName methods.
The following example was tested and works in both FireFox and IE and I would assume to work in Chrome, Safari and Opera as well.
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
"text1" is the id of the input, but you haven't declared that the text1 variable in the JavaScript refers to that.
Perhaps this will work for you:
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
It uses document.getElementById to retrieve the input before trying to find its value.