Simple function not working in Chrome and Chromium

Question

This simple piece of chode is not working in Chromium(Ubunto) and Chrome.

HTML

<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >

SCRIPT

var req;
function saveFavPunch(){
    alert('govind singh');
    if(!req){
        req=$.ajax({
            type:"POST",                
            url:"edit?editType=saveFavPunch",
            data: {"value":document.getElementById("punchId").value},
            complete:function(){req=false},
            success: function(data){
                $.fancybox.close();
                if(data==""){
                    alert("ERROR!");
                }else{
                if(data=="0"){
                    alert("Internal Error Occurs, please try after some time");
                }else{
                    document.getElementById("favPunchline").innerHTML=data;
                }
                }                       
            }//end success
        });
    }
}

hi, please provide a better description of what you're trying to do. — Lea Rosema, Feb 20 '14 at 11:47
There's is nothing wrong with the code you posted. It's something else. Since it's a simple example, you probably should post the entire code. — victorantunes, Feb 20 '14 at 11:54
i think onClick is not working in my code.when i tried @user2806799's solution its works fine. — Govind Singh, Feb 20 '14 at 12:07
I edited my answer with a link to a fiddle with the working ajax call on button click — Sam, Feb 20 '14 at 12:22

Sam · Answer 1 · 2014-02-20T12:14:35.173

4

Can't add a comment yet, nothing's wrong with the code, but to make it work in jsfiddle change onLoad to noWrap

Description of what each of the settings does: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions

Basically you need it to be in a simple <script> tag, not in the onLoad event

Fiddle with the code you provided: http://jsfiddle.net/Sam88/YEPm3/12/

edited Feb 20 '14 at 12:14

answered Feb 20 '14 at 11:51

Sam

166
5

+1 I think this is correct, but I'm getting a 500 Internal Server error from a JSONP call when I switch, so it might be that they're having some server side issues right now. – falstro Feb 20 '14 at 11:53
@Sam i know my fiddler link is not working properly and the issues is of nowrap, but in my website my ajax call is not called for chrome and chromium users. i want to know reason,and by the way thanks for your work, your link works perfectly. – Govind Singh Feb 20 '14 at 12:35

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Since you mentioned jQuery in your tags, I thought I'd give a jQuery solution: Fiddle

Html:

<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" />

Javascript:

$("#saveFavPunch").on("click", function () {
    alert('hello2');
});

:)

Edit

Javascript Not Running On JSFiddle is a possible duplicate of your question. I am quoting the selected answer:

The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options

a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).

So instead of you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.

I recommend b as it encourages best practices.

its helps me. but i still not know the reason why my code is not running — Govind Singh, Feb 20 '14 at 12:15

score 1 · Answer 3 · answered Feb 20 '14 at 11:57

Just one change — JSFiddle setting from "onLoad" to "No wrap - in " and it works:

http://jsfiddle.net/3f7PT/

The problem with the onLoad option is that this is what it outputs in the results:

//<![CDATA[ 
    window.onload=function(){
        function saveFavPunch(){
            alert('hello2');
        }
}//]]>

So your function gets unintentionally wrapped in another function which stops it being found from that onclick call.

Hope this helps.

score 0 · Answer 4 · answered Feb 20 '14 at 11:50

The following entire script works properly in Chrome for me.

<html>
<head>
<script>
function saveFavPunch(){
    alert('hello2');
}
</script>
</head>
<body>
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
</body>

score 0 · Answer 5 · answered Feb 20 '14 at 11:50

0

This works

document.getElementById("saveFavPunch").addEventListener("click", saveFavPunch);
function saveFavPunch(){
    alert('hello2');

}

http://jsfiddle.net/6sg9R/

answered Feb 20 '14 at 11:50

spassvogel

3,479
2
18
23

score 0 · Answer 6 · answered Feb 20 '14 at 11:52

0

Ye JSFiddle is very finicky about Alerts. It works no problem as Spassvogel shows but your way should work as well from file as opposed to on JSfiddle.

answered Feb 20 '14 at 11:52

Mike R

110
2
10

Siddh Vhatkar · Answer 7 · 2014-02-20T12:28:41.997

-3

Even those you having this type of problem then use div tag

    <div id="saveFavPunch" style="height:30px; widht:100px; display:block;" onClick="saveFavPunch()">Save</div>

I think Using this code Your problem will solve.

edited Feb 20 '14 at 12:28

answered Feb 20 '14 at 12:09

Siddh Vhatkar

1
1

Simple function not working in Chrome and Chromium

7 Answers7