jQuery按钮单击事件后，PHP脚本的响应消失

Question

Here I posted one variable to PHP script. Response from php script I am writing to some div . But after button click, instantly the response disappears:

When I do alert(arabic); it displays but as I close prompt, it disappears.

Why does it reload the page after response from php script?

    $( "#submit" ).click(function() {    
            var cat = $("#cats option:selected").html();    
//          alert(test);    
            var arabic = document.getElementById("arabic").value;    
            //alert (arabic)    
            dataInsert(arabic);    
            });    
        function dataInsert(arabic)    
        {                   
            var xmlhttp;    
            //alert("hi");    
            show.innerHTML = '';    
            if (window.XMLHttpRequest)    
            {    
                // code for IE7+, Firefox, Chrome, Opera, Safari    
                xmlhttp=new XMLHttpRequest();    
            }    
            else    
            {    
                // code for IE6, IE5    
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    
            }               
            xmlhttp.onreadystatechange=function()    
            {    
                //document.getElementById("old-records").innerHTML = "";                    
                if (xmlhttp.readyState == 4 && xmlhttp.status==200)    
                {    
                    var div2 = document.getElementById("show");    
                                div2.innerHTML = xmlhttp.responseText;    
                }    
            }         
            xmlhttp.open("POST","koove_insertpost_db.php");                 
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    
            xmlhttp.send('arabic=' + arabic ) ;             
            //alert(arabic);    
        }           

Answer 1

It looks like your button is trying to submit something, thus overlapping your callback function. You might want to use the parameter event to stop it's propagation.

Check this code:

$( "#submit" ).click(function(event) {

    event.stopPropagation();

    var cat = $("#cats option:selected").html();    
    //alert("test");    
    var arabic = document.getElementById("arabic").value;    
    //alert (arabic)    
    dataInsert(arabic);

    return false;

    });    
}

You should also return false at the end of the callback function, in order to completely stop processing the event after your instructions. This is the key to perform your dataInsert() function without interruption.

Answer 2

Are you using jQuery? looks like it with the $( "#submit" ).click(function() {}); why not make life easy and just use

$( "#submit" ).click(function() { 

   var arabic = $("#arabic").value(); 

    $.post("koove_insertpost_db.php",{"arabic" : arabic}, function( data ) { 
        $('#show').html(data);
    });
});

http://api.jquery.com/jquery.post/

you can also check the success status etc for data validation from the server.

I cant comment yet so i believe @feijones has the answer! ( especially return false; )

ps Alert works because it halts the execution of the JavaScript until you close the dialog, which then submits the form and reloads the page.