Why Ajax doesn't load?

Question

This is my code :

<html>
    <head>
        <title>Magento 2 </title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
                function ajaxCall(){
                    $.post( "insert.php", function( data ) {
                        alert(data);
                        //$( ".result" ).html( data );
                    });
                }
        </script>
        <a href ="" onclick ="javascript:ajaxCall();"style="text-decoration:none;"><input type ="button" value="Executa"></a>
    </body>
</html>

the insert.php file contains:

<php 
   echo 1;
?>

I don't know what i wrote wrong ? It doesn't alert ! I tried to see also with firebug, but it doesn't display anything. Im wondering what im doing wrong ?. Thx

Answer to your next question: You aren't opening your PHP tag correctly ` — George, Feb 25 '14 at 09:59

score 2 · Accepted Answer · answered Feb 25 '14 at 09:57

2

in your href="" add a "#" or javascript:void(0)

like this it will work.

 <a href ="javascript:void(0)" onclick ="javascript:ajaxCall();"style="text-decoration:none;"><input type ="button" value="Executa"></a>

answered Feb 25 '14 at 09:57

Maz I

3,664
2
23
38

it works. but what does it javascript:void(0) mean ? – Attila Naghi Feb 25 '14 at 09:59
you can say it just makes a link as dead. and onClick event will be called instead. doing only href="" infact makes page to reload. – Maz I Feb 25 '14 at 10:00

score 2 · Answer 2 · answered Feb 25 '14 at 09:58

Prevent the default event of the a tag:

Javascript

function ajaxCall(event){
    event.preventDefault();
    $.post( "insert.php", function( data ) {
        alert(data);
                        //$( ".result" ).html( data );
    });
}

HTML

<a href ="" onclick ="javascript:ajaxCall(event);"style="text-decoration:none;"><input type ="button" value="Executa"></a>

score 1 · Answer 3 · answered Feb 25 '14 at 09:57

1

Different name for onclick handle and the real function.

 <a href="" onclick="ajaxCall();"style="text-decoration:none;"><input type="button" value="Executa"></a>

answered Feb 25 '14 at 09:57

Mardie

1,663
17
27

score 1 · Answer 4 · answered Feb 25 '14 at 09:57

1

Using a inside an tag doesn't work with every browser. Try to replace the with a .

answered Feb 25 '14 at 09:57

nowhere

1,558
1
12
31

score 1 · Answer 5 · answered Feb 25 '14 at 09:58

1

need href ="javascript:void(0);"

try this

<a href ="javascript:void(0);" onclick ="ajaxCall();"style="text-decoration:none;"><input type ="button" value="Executa"></a>

answered Feb 25 '14 at 09:58

Satish Sharma

9,547
6
29
51

score 0 · Answer 6 · answered Feb 25 '14 at 10:02

0

just put that onclick functinality on the button. and avoid the anchor tag. anchor tag by default got a functionality.

<input type ="button" value="Executa" onclick ="javascript:ajaxCall();"/>

answered Feb 25 '14 at 10:02

Joe

618
1
9
18

score 0 · Answer 7 · answered Feb 25 '14 at 10:08

0

add "return false;" to the end of onclick function;

and

between onclick and style should have space :)

like this

<a href ="" onclick ="javascript:ajaxCall();return false;" style="text-decoration:none;"><input type ="button" value="Executa"></a>

answered Feb 25 '14 at 10:08

liu lei

41
4

Why Ajax doesn't load?

7 Answers7