I am working on a project that are able to run in both Chrome and IE.My problem is after I change some part of the code to open the modal dialog using jQuery UI, the b.jsp cannot use in IE and Chrome, so I try to change it to window.onload. It works for Chrome but not for IE.In the console,it return "Not implemented". I have 2 jsp file, a.jsp file is the parent page and b.jsp file is the pop up modal dialog.
In my b.jsp ,
<html>
<head>
//some script here
</head>
<body onload = "getData();" >
<form name="form1">
//form table here
</form>
</body>
</html>
Function getData() are from a.jsp,
function getData(){
var materialDesc = document.getElementById("materialDesc").value;
if(materialDesc== "materialDesc[1]"){
alert("No record");
var materialDesc = '';
$("#openModalDialog").dialog("close");
}else{
for(var i=0; i< materialDesc.length;i++)
{
document.all.detail_desc.options[i] = new Option(materialDisplay[i]);
document.all.detail_desc.options[i].value = materialDesc[i];
}
}
}
The message error:
Where is my mistake? I was thinking that the error is cause by the function. Thank you.
Related
I am very new to coding and am trying to create an app for a study. I am having trouble displaying an element on the correct page of my app using cordova and Xcode. Basically, I want to display a clickable phone number at the end of my app and I am having trouble getting the element to show only on that page (and not on every page of the app). I have figured out how to hide the element, but now I can't get it to appear in the right place. Here is my html code:
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<!-- HTML Template -->
<body onload="app.initialize()">
<div class="app">
<div id="window">
<div id="question">
</div>
<div id="popup" style="display:none">
Please call any of the below:
Phone System: 800-555-5555
</div>
</body>
</html>
I tried to include the following in my .js file but it did not work:
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "question":
document.getElementById('question').style.display = "";
document.getElementById('popup').style.display = "none";
break;
case "popup":
document.getElementById('question').style.display = "none";
document.getElementById('popup').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
I also tried adding the following:
$("#popup").hide()
$("#popup").display()
With no luck. Would appreciate any advice! Thank you.
With the help of some friends, I have fixed this problem! I added the following code to the .js file:
if (question.variableName === 'popup') {
$('#popup').show();
Hope this helps someone in the future!
I have an HTML with a Javascript code that tries to open a named window if not exists, creates a form, and than posts to that existing window, using its target attribute.
I have a C# Form, with 2 webbrowsers controls in it, side by side, and than I open this HTML in browser1, sets the browser2.Document.Window.Name = "janelaoperacao", the target of the HTML form, and try to post the HTML form, and it opens a new IE window, instead of showing the result in browser2 window.
When I set browser1.Document.Window.Name="janelaoperacao", the posted HTML form shows up normaly on the browser1 window;
So, my problem is browser1.Document is not viewing the browser2.Document named window, and is trying to open another IE window instead. Am I missing some directives, so they can expose to each other inside the same form?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste Java Script Window.Open identificada</title>
<script type="text/javascript">
var PostObj = (function () {
var hiddenForm;
var i;
var createHiddenForm = function () {
hiddenForm = document.createElement("form");
hiddenForm["style"].visibility = "hidden";
hiddenForm["method"] = "post";
hiddenForm["target"] = "janelaoperacao";
hiddenForm["action"] = sucesso.html;
hiddenForm["name"] = "hiddenForm";
hiddenForm["id"] = "hiddenForm";
document.body.appendChild(hiddenForm);
};
this.submit = function (urlDestino) {
createHiddenForm();
document.getElementById("hiddenForm").submit();
};
return this;
})();
function abreJanelaIdentificada(){
var f = window.open("", "janelaoperacao", "location=no");
}
</script>
</head>
<body>
<div id="idPaginaRealizaCopia">
<script type="text/javascript">
//<![CDATA[
function fazTudo(){
abreJanelaIdentificada();
PostObj.submit("file:///D:/temp/sucesso.html?teste=2");
}
//]]>
</script>
<form>
<input type="button" name="botao" value="Abrir" onclick="fazTudo();" />
</form>
</div>
</body>
And the WebBrowser code that does not work (it opens a new IE window):
//after creating the form and stuff -> no errors before navigate, nor NullExceptions
browser1.Navigate("file:///D:/temp/teste.html");
browser2.Document.Window.Name = "janelaoperacao";
But, if I replace browser2 for browser1, it show the success message in the browser1 window (browser1.Document.Window.Name = "janelaoperacao")
For a few hours I've been trying to understand what's wrong. My purpose is to enable a button after textfields are filled. Code seems fine according to my test at JSFiddle but it's still not working on my server. Am'I missing something or is this a server problem (which is hard to believe since javascript is client-side)?
PS: I'm not expert at HTML, so I don't know how to identate it's syntax; if it's not that readable I'm sorry and would appreciate an edit-help. thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
</script>
</head>
<body>
<section class="container">
<div class="OpenKore">
<div id="absolute">
<form method="GET" action="generate.php">
<fieldset>
<legend><h1>OpenKore Automatic Config:</h1></legend>
LOGIN:
<p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p>
SENHA:
<p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p>
PIN:
<p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p>
<input id="apply" type="submit" name="commit" disabled value="Gerar Configurações">
</fieldset>
</form>
</div>
</div>
</section>
</body>
</html>
When the browsers reads your HTML page, it reads top to bottom. When it gets to your <script> tags it runs them. Now it us doing this before it has got to the rest of the page, i.e. before it even knows about any body or form or input:text tags, so even though you code will run, it will simply not do anything because none of the elements on the page exist yet.
JavaScript 101, make the code run after the page has loaded, if you need to access elements on the page. How do you do that? either put the code at the bottom of the page (move your <script> tags to just before the </body> tag), or wrap your code in a function that is executed after the browser has finished loading the page. Now jQuery has a very helpful way of doing this for you, pass a function to jQuery and it will be executed after the page is loaded.
jsFiddle does this automatically for you, hence the drop down in the top left corner saying 'onLoad'
i.e. your code
$(); //this is the jQuery function
//This is your code wrapped in a function called 'yourCode'
function yourCode() {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
}
$(yourCode); //this is passing the jQuery function a function,
//this will now be execute once the page is loaded
//or what most people do, pass in as an anonymous function
//which eliminates a step
$(function () {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
});
as suggested by #j08691 I would suggest reading about the document ready in jQuery here
My add-on specifically works on a single site.
It injects a contentscript and sends a message to popup(panel in firefox terminology) to display.
Here is my contentscript:
//this code is same for firefox as well as chrome since it is that which manipulates the page in which it is injected, so I think this is indepent of browser
var table = document.getElementsByClassName("collapse")[0];
var marks = new Array();
for(var i=0;i<8;i++)
marks[i] = table.children[0].children[i+1].children[5].innerHTML;
var total=0;
for(var i=0;i<8;i++)
total += Number(marks[i]);
------------------------------------------------
//this code is different for firefox
//code to send the data to popup
var fromDOM = total;
chrome.runtime.sendMessage(fromDOM);//what is the equivalent method for sending a message to popup(panel)?
popup.html
//no change , I think would be same with firefox
<!DOCTYPE HTML>
<html>
<head>
<title>Popup page</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div id="output">
<h1><form name="F1" method="POST">
TOTAL: <p id="total"></p>
PERCENTAGE: <p id="percentage"></p>
</form></h1>
</div>
<script src="popup.js">
</script>
</body>
</html>
popup.js:
//code to load the contentscript into the page
chrome.tabs.executeScript({"file": "contentscript.js"});
//equivalent firefox code??***
-----------------------------------------------------------------
var total= 0,percentage = 0;
chrome.runtime.onMessage.addListener(function(response){
total = response;***
//Getting response sent from contentscript, how can I do the same in firefox?
percentage = total/7.25;
document.getElementById("total").innerHTML = total;
document.getElementById("percentage").innerHTML = percentage.toFixed(2)+" %";
});
What are the specific firefox methods for some chrome API's methods mentioned?
I'd be glad if any one could help me out.
Thanks
There's something wrong with my script, it doesn't render the JS correctly. I tried to pinpoint the problem but cannot find any typo. If i load the page, the tag is blank, making all css & other JS disabled. But suprisingly the data is loader correctly. If i remove the script, everything went to normal.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
// Create a connection to the file.
var Connect = new XMLHttpRequest();
// Define which file to open and
// send the request.
Connect.open("GET", "Customers.xml", false);
Connect.setRequestHeader("Content-Type", "text/xml");
Connect.send(null);
// Place the response in an XML document.
var TheDocument = Connect.responseXML;
// Place the root node in an element.
var Customers = TheDocument.childNodes[0];
// Retrieve each customer in turn.
$("#middle").ready( function () {
document.write("<ul class='product'>");
for (var i = 0; i < Customers.children.length; i++)
{
var dul = "wawa"+[i];
//document.getElementById(dul).addEventListener('click', storeData, false);
var Customer = Customers.children[i];
// Access each of the data values.
var Pic = Customer.getElementsByTagName("pic");
var Name = Customer.getElementsByTagName("name");
var Age = Customer.getElementsByTagName("tipe");
var sex = Customer.getElementsByTagName("country");
var checked = window.localStorage.getItem("selected"+i);
// Write the data to the page.
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write(".jpg'><a href='display.html?id="+i+"'>");
document.write(Name[0].textContent.toString());
document.write("</a><div class='age'>");
document.write(Age[0].textContent.toString());
document.write("</div><div class='sex'>");
document.write(sex[0].textContent.toString());
document.write("</div><div class='cex'>");
document.write("<input name='checkbox' type='checkbox' id='wawa_"+i+"'");
if (!checked) {
document.write(" onClick='cbChanged(this, "+i+")'");
} else {
document.write("checked onClick='cbChanged(this, "+i+")'");
}
document.write("></div></li>");
}
document.write("</ul>");
});
function cbChanged(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
</script>
</head>
<body>
<div class="container">
<div class="content" id="middle">
</div>
<div class="content" id="footer">
</div>
</div>
</body>
</html>
Ok here's the full source.
You don't close the HTML img tag right
Change
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write("'.jpg><a href='display.html?id="+i+"'>");
// ^ this quote
To
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write(".jpg'><a href='display.html?id="+i+"'>");
// ^ should be here
If you open the developer console you can usually see where errors like this take place. It will also output and javascript errors that you come across so it will make that part a whole lot easier. Do you have any errors in your console?
The dev consoles are:
Chrome: It is built it.
Firefox: Firebug
Safari: It's built it
EDIT:
Don't do var functionName = function() {..} unless you know about how hoisting works. This is contributing to you problem so change
cbChanged = function(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
To
function cbChanged(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
Without the above changes the function cbChanged is not hoisted. So if you call it before it is reached you will get an error.
There are several other things that stand out to me on this. You might want to spend some more time on your javascript fundamentals. Read up on why document.write is a bad thing. Try removing parts of the script to narrow down what is causing the problem. It would have made this easier to fix if you had made a fiddle.