I have a VS2010,C# ASP.NET web app, I've written a JavaScript (in aspx page) that works perfect in firefox but almost does nothing in chrome or IE, it is my function:
<script type="text/javascript" >
function onRadioChange(rowIndex, value, myHref) {
var q = document.getElementById('HF').value.toString();
var q2 = q.split(',');
var new_HF = '';
for (var i = 0; i < rowIndex; i++) {
new_HF += q2[i] + ',';
}
new_HF += value.toString() + ',';
for (var j = rowIndex; j < q2.length - 1; j++) {
if (j > rowIndex) {
new_HF += q2[j] + ',';
}
}
document.getElementById('HF').value = new_HF;
//user has voted all questions? enable hpAccept so that he can go to next questionnaire
var q5 = new_HF.split(',');
var all_ok = true;
for (var g = 0; g < q5.length; g++) {
if (q5[g] == '0')
all_ok = false;
}
if (all_ok) {
document.getElementById('hpAccept').disabled = false;
document.getElementById('hpAccept').href = myHref;
}
}
it seems that this function does nothing in IE or chrome, I placed and alert to display some info but nothing was displayed in chrome or IE, what is wrong with them?
another problem is on the last parts, the hyperlink is initially disabled, but it is enabled in firefox no luck in IE or chrome, what is the problem here? how can I make this function cross-browser?
[EDIT] I put an alert('1') exactly after function definition line and I saw nothing in chrome and IE, it seems that this function is not called in these browsers, I use r.Attributes.Add("onChange", "return onRadioChange('" + (i - 1).ToString() + "','1','" + myHref + "');"); for calling this function in codebehind, r is a dynamically created radiobutton.
You are not supposed to disable the a tag.
The following elements support the disabled attribute: BUTTON, INPUT,
OPTGROUP, OPTION, SELECT, and TEXTAREA.
Source: http://www.w3.org/TR/html4/interact/forms.html#adef-disabled
That´s why document.getElementById('myLink').disabled returns undefined.
Duplicate of Radio Button change event not working in chrome or safari
Solution: For Radiobuttons, use the onClick event instead of onChanged
Related
I’m facing a small issue in JavaScript. I need to to make a code stop and do nothing for a while. I tried setTimeout, but it only scheludes the function, continues in executing the code and then comes back. I really need to wait for the user to put some value in the input field and then press the button. The sleep function on the beginning of my code works, but the code somehow stops showing my html input form and button. I can’t figure out why. I also can’t use onclick attribute on the submit button, because of the same problem. Does someone know what can be the problem here??
var returning = 0; // variable for deciding which part of function to use
function sleep(milliseconds) { // sleep method found here on stackoverflow
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function acceptValue(){
// show an input field with button next to it
if (returning == 0) {
var co = document.createElement("input"); // show input field and set attributes
var kam = document.getElementById("telo");
var indexId = 0;
while(document.getElementById("pole" + indexId) != null) {
indexId++; // look for closest unused id name
}
co.setAttribute("id", "pole" + indexId);
kam.appendChild(co);
var co1 = document.createElement("input");
var kam1 = document.getElementById("telo");
var indexId1 = 0;
while(document.getElementById("cudlik" + indexId1) != null) {
indexId1++; // look for closest unused id name
}
co1.setAttribute("id", "cudlik" + indexId1); // show button and set attributes
co1.setAttribute("type", "submit");
co1.setAttribute("value", ">");
co1.setAttribute("onclick", "vraceni()");
kam1.appendChild(co1);
console.log(document);
document.getElementById("telo").appendChild(document.createElement("br"));
returning = 1;
acceptValue();
} else if (vrat == 1) {
sleep(500);
acceptValue();
}
} else {
var indexPole = 0;
while (document.getElementById("pole" + indexPole) != null) {
indexPole++;
}
vrat = 0;
return document.getElementById("pole" + (indexPole - 1)).value; // return the value from last shown input field
}
}
function returnFunc() {
vrat = 2; // called from html button
}
Thanks,
Adam Hendrych
I think the feature you are attempting to create here may need some re-architecting. It feels very strange to have all these while loops and sleep tricks in place.
What you describe wanting this code to do is basically the default behavior of how inputs and buttons work. A simple form containing an input and submit button, with an onsubmit handler on the form, should meet the "accept input and fire an action when the button is pressed" requirement.
An example
so i've got this script:
window.onload = function() {
var myValues = localStorage.getItem("myValues") ? JSON.parse(localStorage.getItem("myValues")) : [];
var myTables = localStorage.getItem("tableValues") ? JSON.parse(localStorage.getItem("tableValues")) : [];
makeDuplicates(myTables);
var divElements = document.querySelectorAll("#namefield");
for(var i = 0; i < myValues.length; i++) {
alert("In table: " + divElements[i].textContent + ", trying to change: "+myValues[i]);
divElements[i].textContent = myValues[i];
}
}
I did a little test with alert, the element it gets is right and myValue[i] exists but the value in div does not change with the code below alert. I don't know what else should i show in this occasion or is this enough?
As for more clarification - the similar code works in another javascript i'm using for another .html and this particular page loads the table in which i have td which content will be changed before the for cycle starts (got it with alert).
Any ideas why the change does not occur?
Added images for clarification:
This is a link to a HTML: http://pastebin.com/x5sbbj6b
The code below, works ... sometimes, but I don't know why it doesn't work all the time.
I'm trying to determine how many people press the "Buy Now" PayPal button that's on different webpages.
Currently, each page on the site fetches a 43 byte 1x1 gif from unique locations (thanks to mod_rewrite) that is easily grep'able in the Apache access log. My thinking was that if I could change the URL for that image with javascript, I could track the click in the access log while still having the browser's forward and back buttons work.
The code below (Override_Form_OnClick()) looks for a form on the page (there's only one) and attaches a handler (my_shopping()) to the form's onclick handler.
The my_shopping() handler then updates the image resource named my_stats (again, there's only one), attaches the form element's submit function to the image's onload handler, then returns false so that the form doesn't get submitted until the new image loads.
That's the intention, but it doesn't always log the new image in the access log. Granted, I've only been testing it in Chrome using the dev tools, so maybe it's an issue with other browsers?
<script>
function my_shopping(onload_handler, shopping_tag) {
'use strict';
var my_img_elements = document.getElementsByName('my_stats'),
my_img_url,
i,
len;
len = my_img_elements.length;
if (len > 1) {
alert("Multiple my_stats elemetns on page: only expected 1.");
}
for (i = 0; i < len; i += 1) {
my_img_url = my_img_elements[i].src;
my_img_url = my_img_url.replace(".gif", "." + shopping_tag + ".gif");
my_img_elements[i].onload = onload_handler;
my_img_elements[i].src = my_img_url;
}
return false;
}
function Override_Form_OnClick() {
'use strict';
var elements = document.getElementsByTagName('form'),
element,
i,
len;
len = elements.length;
if (len > 1) {
alert("Multiple 'form' elements on page: only expected 1.");
}
for (i = 0; i < len; i += 1) {
element = elements[i];
element.onclick = function () { my_shopping(element.submit, "shopping.PayPal") };
}
return true;
}
Override_Form_OnClick();
</script>
The policy of the website has a strong preference for using only javascript.
Maybe this will work. Let me know.
for(var i=0,l=my_img_elements.length; i<l; i++){
var mi = my_img_elements[i], ni = new Image;
ni.src = mi.src = mi.src.replace(".gif", "." + shopping_tag + ".gif");
ni.onload = onload_handler;
}
i am using a javascript where in i am creating multiple div (say 5) at runtime, using javascript function, all the divs contain some text, which is again set at runtime, now i want to disable all the divs at runtime and have the page numbers in the bottom, so that whenever user clicks on the page number only that div should get visible else other should get disable, i have created a function, which accepts parameter, as page number, i enable the div whose page number is clicked and using a for loop, i disable all the other divs, now here my problem is i have created two functions, 1st (for adding divs and disabling all the divs except 1st) and writing content to it, and other for enabling the div whose page number is clicked, and i have called the Adding div function on body onload; now first time when i run, page everthing goes well, but next time when i click on any of the page number, it just gets enabled and again that AddDiv function, runs and re-enables all the divs..
Please reply why this is happening and how should i resolve my issue...
Below is my script, content for the div are coming using Json.
<body onload="JsonScript();">
<script language="javascript" type="text/javascript">
function JsonScript()
{
var existingDiv = document.getElementById("form1");
var newAnchorDiv = document.createElement("div");
newAnchorDiv.id = "anchorDiv";
var list = { "Article": articleList };
for(var i=0; i < list.Article.length; i++)
{
var newDiv = document.createElement("div");
newDiv.id = "div"+(i+1);
newDiv.innerHTML = list.Article[i].toString();
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
existingDiv.appendChild(newDiv);
existingDiv.appendChild(newAnchorDiv);
}
for(var j = 2; j < list.Article.length + 1; j ++)
{
var getDivs = document.getElementById("div"+j);
getDivs.style.display = "none";
}
}
function displayMessage(currentId) {
var list = {"Article" : articleList}
document.getElementById("div"+currentId).style.display = 'block';
for(var i = 1; i < list.Article.length + 1; i++)
{
if (i != currentId)
{
document.getElementById("div"+i).style.display = 'none';
}
}
}
</script>
Thanks and Regards
Try adding return false; to the page link to prevent the page from being reloaded.
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+");return false;'>"+(i+1)+"</a> ";
Your page links are reloading the page. You just have to change one line and your script works ok.
// change
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
//to
newAnchorDiv.innerHTML += "<a href='#' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
I see that theres is no build in way for doing tabs/indents in MarkItUp? So I did something like
onTab: {
keepDefault: false,
replaceWith: function(markItUp) {
return miu.openEachLineWith(markItUp, ' ');
}
},
openEachLineWith: function(markItUp, openingStr) {
var textarea = markItUp.textarea,
selStart = textarea.selectionStart,
selEnd = textarea.selectionEnd,
selText = textarea.value.substring(selStart, selEnd),
lines = [],
charsAdded = 0;
lines = selText.split(/\r?\n/);
for (var i = 0, len = lines.length; i < len; i++) {
lines[i] = openingStr + lines[i];
charsAdded += openingStr.length;
}
textarea.selectionEnd = selEnd + charsAdded;
return lines.join('\n');
}
which works but, how can I set the selection after replacing the the text, I want it to select the tabbed text, also I prefer the way the editor here on SO works where when I bold some text, it selects the bolded text instead of moving the cursor to the end, can I do that with markItUp too?
I've been working on a script to do this. Here's an example: http://jsfiddle.net/timdown/dp2WL/2/
It indents when Tab is pressed and outdents when Shift + Tab is pressed and doesn't require any library. It hasn't had as much testing as I'd like, but seems to work well in all major browsers, including IE 6. The main code comes from an open source project I'm working on. The bit that enables tab indentation is at the bottom:
window.onload = function() {
rangyInputs.init();
rangyInputs.enableTabIndentation(document.getElementById("test"), " ");
};
You must set the selection in the afterInsert callback (not in replaceWith)