I am developing a small web application specifically for IE8 (I know you all feel the pain already). In this application, I have an Update "button" that (when clicked) generates a box where they user can click Yes or No. I used JavaScript to generate the box and the input tag with type="submit".
Here is a snippet of the code:
HTML
<form action="." method="POST" id="yield_curve_form" enctype="multipart/form-data">
<div class="fileUploadDiv">
<img id="yieldCurve" src="../img/market/yield_curve.jpg" alt="ZBPF Bond Market" >
<div class="fileUploadButton">
<span>Upload New Image</span>
<input type="file" name="image_file" accept="image/*" class="uploadInput">
</div>
<div class="fileUploadReq">
<p>Image Requirements:</p>
<ul>
<li>Format: .png, .jpg, .jpeg, .bmp, .tif, .tiff</li>
<li>Resolution: 650 x 383</li>
<li>Maximum size: 2.0 MB</li>
</ul>
</div>
</div>
<button type="button" class="marketUpdateButton" onclick="confirmUpdate('yield_curve');">Update</button>
JS
function confirmUpdate(name)
{
// Create a div element
var div = document.createElement('div');
// Give it an ID
div.id = 'preSubmitAlert';
// Create a child h2 tag
var h2 = document.createElement('h2');
h2.innerHTML = 'This is a permanent change';
// Create a child p tag
var pMessage = document.createElement('p');
pMessage.innerHTML = 'Did you double check the data? It is important the data is accurate before you submit it.';
// Create child input tags
var inputYes = document.createElement('input');
var inputNo = document.createElement('input');
// Set parameters for input tags
inputYes.type = 'submit';
inputYes.name = name + '_update';
inputYes.value = 'Yes. Update the data.';
inputYes.id = 'inputYes';
inputNo.type = 'button';
inputNo.value = 'No. Take me back, please.';
inputNo.id = 'inputNo';
// Append the children to
div.appendChild(h2);
div.appendChild(pMessage);
div.appendChild(inputYes);
div.appendChild(inputNo);
// Create the background for transparency (needed for IE8 support)
var bg_div = document.createElement('div');
bg_div.id = 'bg_div';
// Create a screen and append the above div to it
var screenDiv = document.createElement('div');
screenDiv.id = 'screenDiv';
// Appending div and bg_div to screenDiv
screenDiv.appendChild(div);
screenDiv.appendChild(bg_div);
// Appending screenDiv to the body tag
document.body.appendChild(screenDiv);
// This line needs a reference to the #screenDiv is, which is inserted in the DOM only in the above line.
inputNo.onclick = function(){destroyElement(document.getElementById('screenDiv'))};
inputYes.setAttribute('form', name + '_form');
}
Question
Why isn't the the <input type="submit" ...> not submitting the data when clicked?
Obs.: This piece of code works on every other browser, including higher versions of IE.
Thank you in advance.
Change this...
document.body.appendChild(screenDiv);
To this...
document.getElementById(name + '_form').appendChild(screenDiv);
I doubt very much that IE8 supports the HTML5 form attribute so you'll need to make the submit button a descendant of the form.
I can't find any official documentation on this though and I doubt anybody is going to the trouble of researching it properly.
Related
I'm supposed to display an image after the user inserts its URL. It works fine on the first click, but instead of replacing the previous image with the new URL when the user input a new one, it just creates a new image below the previous.
That's my function so far:
HTML:
<p id="tt">Display an image using the image's URL</p>
<label>URL:
<textarea rows="1" cols="40" placeholder="Image URL" id="url"></textarea>
</label><br>
<label>Caption:
<textarea rows="1" cols="40" placeholder="Image caption" id="caption"></textarea>
</label><br>
<button id="btn">Add Image</button>
<br>
<div id="imgDiv"></div>
JS:
var getBtn = document.getElementById("btn");
getBtn.addEventListener('click', function() {
var figure = document.createElement("figure");
var image = document.createElement("IMG");
var figcaption = document.createElement("figcaption");
//attributing the input value in the first textarea as source for the image to be displayed
var url = document.getElementById("url").value;
image.src = url;
image.height = "200";
image.id = "newImage";
figure.appendChild(image);
//making the image a link to its url
var a = document.createElement("a");
a.href = url;
a.appendChild(image);
figure.appendChild(a);
//creating a Node and setting the input value from the second textarea as caption
var caption = document.getElementById("caption").value;
var text = document.createTextNode(caption);
document.getElementById("imgDiv").appendChild(figure);
figure.appendChild(figcaption);
figcaption.appendChild(text);
document.getElementById("menu").add(option);
//clear textarea after submitting url and caption
document.getElementById("url").value = "";
document.getElementById("caption").value = "";
});
EDIT - JSFiddle: https://jsfiddle.net/hpnLycer/4/
Can someone give me a hint how to solve this?
I tried understanding by reading "similar" questions, but I didn't find any that would solve my case.
Thank you anyway.
Hope this snippet will be useful
HTML
<input type ="text" id="imageIp" placeholder="New Image url"> <button id ="changeDisplay" > Change Display </button>
<div class ="demoDiv" id = "demoDiv">
</div>
CSS
.demoDiv{
margin-top:10px;
height:300px;
width:300px;
background-image: url("http://freebigpictures.com/wp-content/uploads/shady-forest.jpg");
JS
var getButton = document.getElementById("changeDisplay");
getButton.addEventListener('click',function(){
var getNewImage = document.getElementById("imageIp").value;
console.log(getNewImage);
document.getElementById("demoDiv").style.backgroundImage = "url('"+getNewImage+"')";
})
WORKING EXAMPLE
EDIT
In the latest snippet you have not defined these two arrays
imageArray
captionArray
You need to define them before you can push content in it.I have initialized that at the beginning but you can put them accordingly.But they must be initialized before you can put content in it.
var getBtn = document.getElementById("btn");
var imageArray = []; // Initializing imageArray
var captionArray=[]; // Initializing captionArray
getBtn.addEventListener('click', function() {
// rest of code
))
NOTE:Also in your snippet there is no HTML element with id menu,so when I run this code it thrown an error.
WORKING EXAMPLE WITH SUPPLIED CODE
Yes, I know something like this has been asked over here before and I have searched but the one that is closest to what I'm trying to achieve doesn't have an answer ( Search iframe content with jquery and input element on parent page ) and the one that does is making use of nested iframes ( Access the content of a nested Iframe ) and I didn't quite understand the solution (VERY new with javascript so please bear with me). Honestly, it's getting a bit frustrating (it's quite late over here) so I thought I might as well ask.
I have an iframe that displays a page from my site therefore the page is from the same domain. What I would like to do is to search the iframe for some text using javascript (not jquery). The search input box, however, is on the parent page.
I've done something similar to this before by putting the search input box in the page displayed in the iframe instead ( I followed this tutorial: http://help.dottoro.com/ljkjvqqo.php ) but now I need to have the search input box on the parent page because I going to make it "sticky" so that it will follow the user as they scroll down the page. I've resized the parent page height to be the same as the length of the page in the iframe by also using javascript.
So, my question is: How can I use javascript to search text that is in the iframe by using a search input box that is on the parent page?
My HTML so far:
<input type="text" name="page_no" size="3"/>
<input type="submit" name="goto" value="Go"/>
<iframe id='iframe2' src="http://example.com/files/<?php echo $filename;?>" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("iframe2").style.height = document.getElementById("iframe2").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("iframe2").style.height = parseInt(i) + "px"; }
Not sure how to move on from there. I'd really appreciate some help.
Thanks in advance!
EDIT:
The search works now (saw that I put the javascript above the html so I put it under it to get it working) so this is what I want to do with the search results:
I intend to use the search box to enter a page number such that when the user clicks "Go" the search will look for that page and scroll the user down to where the result (that is, the page number) is.
EDIT 2: I just thought I'd mention that my page numbers are written like this: -2- for page 2, -3- for page 3, etc.
I believe this is the solution you need,
HTML:
<!--added an id of search to the input element-->
<input id="search" type="text" name="page_no" size="3"/>
<!--changed input type to button and added an id of go-->
<input id="go" type="button" name="goto" value="Go"/>
<iframe id='iframe2' src="iframe.html" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>
Javascript(make sure the iframe is in the same domain):
//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function
//get the search value
var search = document.getElementById("search").value;
//get the html of the iframe(must be in the same domain)
var iframe = document.getElementById("iframe2").contentDocument.body;
/*create a new RegExp object using search variable as a parameter,
the g option is passed in so it will find more than one occurence of the
search parameter*/
var result = new RegExp(search, 'g');
//set the html of the iframe making the found items bold
iframe.innerHTML = iframe.innerHTML.replace(result,"<b>" + search + "</b>" );
};//end function
Here is a link that will explain some additional flags you can use with the RegExp object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Below is an improved version of Javascript to scroll to Page Number.
Place it inside of your on click event for the go button. The code requires that you place an id with the page number inside of an element at the top of each page. Example <h3 id="3">Page 3</h3>.
//get the search value
var search = document.getElementById("search").value;
//get the id of the search term
var iframe = document.getElementById("iframe2");
//the url of the page loaded in the iframe
var iframeURL = "iframe.html";
//set the source of iframe appending a link to an element id
iframe.src = iframeURL + "#" + search;
Solved! Thanks Larry Lane for your help.
Here is the present Javascript. Hope it helps someone.
<script type="text/javascript">//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function
//get the search value
var search = document.getElementById("search").value;
//put hyphens for the page number
var pagehyph = '-' + search + '-';
//get the html of the iframe(must be in the same domain)
var iframe = document.getElementById("iframe2").contentDocument.body;
//remove the hash from the iframe src if there is one
var url = document.getElementById("iframe2").src, index = url.indexOf('#');
if(index > 0) {
var url = url.substring(0, index);
}
var newurl = url + "#" + search;
/*create a new RegExp object using search variable as a parameter,
the g option is passed in so it will find more than one occurrence of the
search parameter*/
var result = new RegExp(pagehyph, 'g');
//set the html of the iframe and add a page anchor
iframe.innerHTML = iframe.innerHTML.replace(result,"<a id='" + search + "'>" + search + "</a>" );
//set new src for the iframe with the hash
document.getElementById("iframe2").src = newurl;
};//end function
</script>
As you can see from the code, I've added a page anchor so the page scrolls to the page anchor when they click 'Go'.
function myFunction(x) {
var att = document.querySelector("iframe[id=iframe2]").getAttribute(x);
alert(att);
}
<input type="text" name="page_no" size="3"/>
<input type="submit" name="goto" onclick="myFunction(document.querySelector('input[name=page_no]').value)" value="Go"/>
<hr />
<iframe id='iframe2' src="https://www.example.com" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>
I have a messages page where i can see them as a list. If i select each one of them, I display them in the right side of the page. For that, I have two javascript functions for "next" and "previous" buttons for the messages' page. So I have a list of messages on the screen, if I click "next", I see the next page of messages and so on.
Everything work allright, the only problem is in Chrome, it wouldn't load the page number in a span section on the bottom of the page. This is the function for next page:
$("#next").click(function() {
var currentPageElem = $("#currentPage");
var totalPagesElem = $("#totalPages");
var minItemElem = $("#minItem");
var maxItemElem = $("#maxItem");
var totalItemsElem = $("#totalItems");
var itemsOnPageElem = $("#itemsOnPage");
var currentPageValue = parseInt(currentPageElem.val(), 10);
if (currentPageValue < totalPagesElem.val()) {
currentPageElem.val(currentPageValue + 1);
}
//the first record on the current page
minItem = $(this).getMinItem(currentPageElem.val(), itemsOnPageElem.val());
minItemElem.val(minItem);
//the last record on the current page
maxItem = $(this).getMaxItem(currentPageElem.val(), itemsOnPageElem.val(), totalItemsElem.val());
maxItemElem.val(maxItem);
$(this).showItems(minItem, maxItem);
var pageHtml = $(".pages").html();
$(".pages").html($(this).newPageHtml(pageHtml, currentPageElem.val()));
}); });
$.fn.newPageHtml = function(pageHtml, currentPage) {
var idx1=pageHtml.indexOf("Pagina ");
var idx2=pageHtml.indexOf(" / ");
var prevPage = pageHtml.substring(idx1 + 7, idx2);
return pageHtml.replace(prevPage, currentPage);
};
This is the html code that involves the js:
<input type="hidden" id="totalPages" name="totalPages" value="${totalPages}"/>
<input type="hidden" id="currentPage" name="currentPage" value="${currentPage}"/>
<input type="hidden" id="minItem" name="minItem" value="${minItem}"/>
<input type="hidden" id="maxItem" name="maxItem" value="${maxItem}"/>
...
<div class="controls">
<a class="prev" id="prev"></a>
<a class="next" id="next"></a>
<span class="pages">
<fmt:message key="messages.page">
<fmt:param>${currentPage}</fmt:param>
<fmt:param>${totalPages}</fmt:param>
</fmt:message></span></div>
are you try in firefox or safari?
what is your java version?
are you review in about:config if you have enable java/javascript in Chrome
I have solved the problem. There was an issue with the CSS files that wouldn't allow the text to transform correctly in Google Chrome. So I modified the style of the span class from above like this:
<span class="pages" style = " position: absolute; ">
Initially, the position of the span class was relative. I think Chrome has a problem with this type of CSS.
I have looked for possible roots of my issue but have been unable to do so.
I have some java Script that dynamically creates a list of check boxes. Some have text other have anchor links with text inside that.
It looks like this:
createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
var liElement = document.createElement("li");
var checkBoxElement = document.createElement("input");
checkBoxElement.setType = "checkbox";
checkBoxElement.name = "sensorName";
checkBoxElement.id = "check" + sensorId;
checkBoxElement.setAttribute("type", "checkbox");
checkBoxElement.setAttribute("runat", "server");
checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
if (checked)
checkBoxElement.setAttribute("checked", "true");
if (makeHyperLink) {
var linkElement = document.createElement("a");
linkElement.setAttribute("style", "color:white;");
linkElement.setAttribute("href", "#");
linkElement.id = "link" + sensorId;
linkElement.text = "" + sensorName;
checkBoxElement.appendChild(linkElement);
} else {
checkBoxElement.setAttribute("text", sensorName);
}
liElement.appendChild(checkBoxElement);
this.checkboxes++;
return liElement;
}
This returns the element to be appended to my div.
It creates this list correctly and the HTML looks like this:
<ol id="sensorList"><li>
Sensors
</li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
Item1
</a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
Item2
</a></input></li>
</ol>
The webpage looks like this:
I have tried removing all of my css incase it was something to do with that and nesting the text in other tags: <p> , <h1>but nothing changes.
Any thoughts on what the root of this problem might be. I am still fairly new to web programming.
Thanks
input element can't have children. So this:
checkBoxElement.appendChild(linkElement);
is incorrect.
Instead use label element that contains both checkbox and link:
var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);
Edit:
You can't click on link element to change checked state of the checkbox. because it refreshes the page (with href='#'). What do you want to do with link element?
hope someone can help a noob. Many thanks in advance.
I have an index page with links to hundreds of other pages holding song words.
I have built each song page but it would be MUCH simpler to have one MASTER page that took a variable from the index page and found the corresponding words (which exist as png graphics.)
I have sorted Step 1 - I can pass a variable from the index page to the master page using:
<a href="javascript: window.open('MUSIC/beatles/mastertest2.html?song=ER', '_parent')">
where song=ER is the variable to display the words for Eleanor Rigby. For Step 2, I can also retrieve that information in the master page with:
var imageSrc = (qs("song")+".png"); document.write(imageSrc);
which will display the text ER.png which is the name of the image I want to display.
For Step 3 I am trying to get this same variable read into:
<input type="image" src="imageSrc;">
to display the picture. I have searched this and other forums for days now and nothing suggested works for me. I could be missing out an essential early step in the coding?
Update:
My master html file has this code to retrieve the variable:
function qs(search_for) {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0 && search_for == parms[i].substring(0,pos)) {
return parms[i].substring(pos+1);;
}
}
return "";
}
And it uses this code to disply the variable (appended with .png) just to prove to me that it is getting through:
var imageSrc = (qs("song")+".png");
document.write(imageSrc);
Then I am trying to feed the variable into a routine to display the png selected. The next script doesn't work but I am thrashing about trying anything right now:
var imageSrc = (qs("song")+".png");
document.write(imageSrc);
<input type="image" src="#imageSrc;" border="0" value="Notes" onClick="placeIt(); showIt()">
<input id="song-image" type="image">
var imageSrc = 'ER.png';
var input = document.getElementById('song-image');
input.src = imageSrc;
If you have already <input type="image"> in your HTML page, you must add an id and then set it's src attribute with
HTML:
<input id="song-image" type="image">
JS:
var imageSrc = 'http://www.lorempixel.com/200/100';
var input = document.getElementById('song-image');
input.src = imageSrc;
JSFiddle for testing.
If I understood you right, its very simple. Are you looking for this?
var input = document.createElement('input');
input.type = 'image';
input.src = imageSrc;
document.body.appendChild(input);
If you can print the variable imageSrc using document.write, then you can use it like shown above.