In the body I have the following:
<body onload="loadCheck1();">
Which points to the following function:
function loadCheck1() {
var chkme1 = "<?php echo $_GET['update']; ?>";
if (chkme1 ==1){
window.location = "viewrecipe.php?recipe_name="+recipe_name.value+"&update=2&texty1="+texty1.value+"&texty2="+texty2.value+"&texty3="+texty3.value+"&texty4="+texty4.value+"&texty5="+texty5.value;
}
if (last==3){
window.location = "viewrecipe.php?recipe_name="+recipe_name.value+"&NewFG1="+texty4.value+"&NewAlc="+texty5.value;
}
}
The URL being viewrecipe.php?update=1 should load the first window.location and viewrecipe.php?update=3 should load the 2nd.
In Chrome this works absolutely fine. In IE I get an error saying "recipe_name" undefined.
The only thing I can think of is that in Chrome the code only activates after the actual loading of the page. As by that time all the field values will be filled in.
Is there an alternative method to running a function once the page has loaded?
There are several variables not defined in your function:
- recipe_name
- last
Are they defined somewhere else?
I guess that texty1 to texty5 are form inputs. If not these variables are not defined too.
You should give us more of your code so we can help you.
Related
I stuck with the inline validation in the kendo grid.
I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:
which event set the input from valid to invalid.
which event displays the error message.
My Current work: https://dojo.telerik.com/OSONo/56
which event set the input from valid to invalid.
...
which event displays the error message.
Just run your kendoValidator with validator.validate();
The error messages are also set with validate().
Something like this should work:
$(document).on('input propertychange', function() {
validator.validate();
});
The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:
errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'
And the whole solution:
https://dojo.telerik.com/OSONo/66
Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.
https://dojo.telerik.com/OSONo/64
my edit:
I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.
In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).
var ValidierungCheckClass = (function () {
return {
AllDOMElements: function () {
$('body').on('input', function () {
var myActiveElement = $(':focus');
if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
var myActiveDOMElement = myActiveElement[0],
start = myActiveDOMElement.selectionStart, //just for IE Support
end = myActiveDOMElement.selectionEnd; //just for IE Support
myActiveElement.trigger("change");
myActiveDOMElement.setSelectionRange(start, end); //just for IE Support
}
})
}
}
});
The change event is allready created from kendo so you dont have to write your own.
At least you have to call the method when creating the website.
<script>
ValidierungCheckClass().AllDOMElements();
</script>
This is my Solution to my problem.
best regards.
I'm protocolling how long someone is staying at a certain jsp-page, so I have three functions called in my body-tag:
<body onunload="pageLeft();" onload="pageEnter(); startInterval();">
pageEnter sends an ajax-request to the server which contains the ID of the page and a '1' for page-enter.
startInterval starts an interval and sends every few seconds an ajax-request to the server which contains a '2' for being still there.
pageLeft send a '3' by ajax so I know the user has left the page.
Most essential are '1' and '3' which are used to group all the protocolled-data.
There is also a form on the page which has a submit-button:
<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost">
I was in the intention the form-data would be transferred to Customers.jsp afterwards the current page is unloaded and Customers.jsp loaded.
All my trials making the procedures in Customers.jsp work failed and now I found out why:
In the database are only 1s and 2s but no 3. This means the current page was never unloaded - yet the procedure has started already...
I thought about manually setting the 3-entry in the Customers.jsp but this would leave two such entries in the database. Also if the user just leaves the page no 3-entry would be left at all.
What am I supposed to do?
Unfortunately onbeforeunload didn't work as expected - after the replacement nothing was called. onbeforesubmit didn't look too promising either (but I haven't tried), but I got another idea:
First: Adding a Function which is called on submit to the form, also a variable to distinguish whether the function had been called or not. Also saving the ID of the interval in the variable intervalid (See: Stop setInterval call in JavaScript):
var nosubmit = true;
$(function () {
$('#Custpostform').submit(function () {
if (nosubmit) {
pageLeft();
clearInterval(intervalid);
nosubmit = false;
return true; // return false to cancel form action
}
});
});
<!-- -->
<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost" name="Custpostform">
The rest remains pretty much the same, just the onunload is now slightly modiefied:
<body onunload="if (nosubmit) {
pageLeft();
nosubmit = false;
}"
It's not really the solution I anticipated but it works as supposed
This way would seem to be better. I can get both onbeforeunload and onunload to work in Chrome and Firefox (I didn't test any others).
See the fiddle for an interactive version.
HTML:
<body onload="testLoad()" onunload="testUnload()" onbeforeunload="return testBeforeUnload()">
</body>
JS:
function testBeforeUnload() {
return "test before unload event";
}
function testUnload() {
console.log("test unload event");
}
I am trying to make an windows store app where the default page (first page that comes up when app loads) changes depending on stored value.
I have following files
- js
|- default.js
- default.html
- page_A.html
- page_B.html
default.js has the following code:
if (localStorage["value"] == undefined || localStorage["value"] == "pageA") {
localStorage["value"] = "pageA";
//WinJS.Navigation.navigate("page_A.html");
window.location.assign = "page_A.html";
} else {
localStorage["value"] = "pageB";
//WinJS.Navigation.navigate("page_B.html");
window.location.assign = "page_B.html";
}
WinJS.Navigation code does not work at all. So I tried using window.location and what's happening is instead of loading the actual page, it loads an empty page as shown below.
I tried using both href and assign for windows.location object. What's interesting is that it seems like href and assign loads the page because if I have page_A/B.js associated with pageA/B.html and have a simple console.log statement, then the log statement does get logged, but it does not render the page.
Any ideas? I've been stuck for a while.
Try putting your default.js at the root of your project, next to page_A.html and page_B.html, or, and I don't know if this works, you can try calling those pages with ..\page_X.html.
Also, you can add an error handler function to your navigate in case there's something else going on that you're not seeing.
WinJS.Navigation.navigate('page_A.html', {}).then(function () {
// it worked!
}, function (err){
// something went wrong
});
Looked through the questions and there are few similar ones on the subject of "ReferenceError foo is not defined". However, I'm not able to detect the error in my code and get it working. It works fine in Chrome and Safari, but not in IE, Opera and Firefox:
The code in the HTML
<a href="javascript:foo(1)" target="_parent">
calls a javascript placed in the header as
<script type="text/javascript" src="http://www.site.com/include/script.js"></script>
which is defined as the following:
function foo(language){
url = window.parent.location.href;
parts = url.split('/');
page = parts[3];
newUrl = "";
if (language == 1){
newUrl = "http://www.site1.com/" + page;
} else if (language == 2){
newUrl = "http://www.site2.com/" + page;
} else{
newUrl = "http://www.site3.com/" + page;
}
window.parent.window.location.href = newUrl;
}
Reading the related questions I tested to change to window.foo = function(language){...}, but it didn't help.
Seems straight forward and as simple as it gets, but of some reason foo is undefined in IE and firefox.
Should be added that the javascript is in the "top.html" which is an embeded iframe for each page. Somehow chrome manages this while IE doesn't (but the script works if I browse to http://www.site1.com/top.html and click on the button calling redirect(language);)
Your problem is that the link is targeted (has a target="_parent" bit).
This means that it runs in the scope of the target window, not in the window it's in. And there is no function named foo there.
It look like your link is in a "iframe" tag, but the foo function is defined in top-level window object's scope.
There a two ways to fix this:
You should use window.partent to reference the top-level window object, try to change the link to
<a href="javascript:window.partent.foo(1)" target="_parent">
Or, move the function code to the same html file's head tag as the link.
By the way, you should use var keyword to declare variables.
I just making small code for tracking app to my website.
I'm pretty new at json so I could not find out what is wrong at my code. It's been two days now:
Here is the code
<http://code.jquery.com/jquery-latest.min.js>
<script type="text/javascript">
$(document).ready(function() {
var inputField = $('#tracking');
var outputElement = $('#textResult');
inputField.keyup(function() {
if (inputField.val().length > 1) {
$.getJSON('http://sporing.bring.no/sporing.json?q=' + inputField.val(),
function(data){
outputElement.html('ID' + data.consignmentSet.consignmentId);
});
} else {
outputElement.html('No result!');
}
});
});
</script>
<div>
<input type="text" id="tracking" style="width: 17;" maxlength="30"/><br/><span id="textResult"></span>
</div>
</body></html>
My source is: http://developer.bring.com/api/trackingapi.html#json
Tracking json source: http://sporing.bring.no/sporing.json?q=TESTPACKAGE-AT-PICKUPPOINT
Links gives result, but i'n not able to display it.
It is simple code, so hopefully someone can explain me what I'm doing wrong...
Thanks
data.consignmentSet contains an array with one element so
data.consignmentSet[0].consignmentId
should work!
You can use JSONLint to validate and pretty print your JSON to better dig into it's structure.
Also, you could use a debugger to explore the content of the data at runtime. Most browsers have their F12 developer tools or you could install Firebug. Then switch to the Script tab, go to the line in code where you access the data and click on the line number. A breakpoint will be set where code execution will stop when running the script. When the breakpoint is reached, you can explore the data in the Watch window.