this is my server-side code:

modify_emp.php

<?php
    echo $_POST[id];
?>

And this is my Javascript in my html page:

<script>

  $(document).ready(function () {

  var alreadyClicked = false;

  $('.element').hover( 
    //mouseenter function
    function(){
        $('.element').click(
            function(){
            $(this).css("color","blue");
            var objName = $(this).attr('name');
            var objColumn = $(this).attr('id');
            if(!alreadyClicked){
                alreadyClicked = true;
                $(this)
                .prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
                var elemento = $(".newInput");
                var position = elemento.position();
                $(".newInput").css({
                    'position': 'absolute',
                    'top': position.top + 15,
                    'opacity':0.9,
                    'z-index':5000,
                })
                .focus();
                //on enter keypress
                $(document).keypress(function(e) {
                    if(e.which == 13) {

                        $.ajax({

                            url: 'modify_imp.php',
                            type: 'post',
                            data: { id : objName, column : objColumn },
                            success: function(data, status){
                                $("#debug").html(data);
                            }

                        });
                    }
                });
             } //if (!alreadyClicked) end
        }); //end mouseenter function
   },
   //mouseleave function
   function () {
    alreadyClicked = false;
    $(this).css("color","red");
    $(".newInput").remove();
   }
 ); //end .hover

});

The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.

I already tried to pass the return value to a local or global variable but it didn't work. For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.

Can someone explain me why and how can i "store" the server response?

EDIT: Just edited with my entire <script>

this is my server-side code:

modify_emp.php

<?php
    echo $_POST[id];
?>

And this is my Javascript in my html page:

<script>

  $(document).ready(function () {

  var alreadyClicked = false;

  $('.element').hover( 
    //mouseenter function
    function(){
        $('.element').click(
            function(){
            $(this).css("color","blue");
            var objName = $(this).attr('name');
            var objColumn = $(this).attr('id');
            if(!alreadyClicked){
                alreadyClicked = true;
                $(this)
                .prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
                var elemento = $(".newInput");
                var position = elemento.position();
                $(".newInput").css({
                    'position': 'absolute',
                    'top': position.top + 15,
                    'opacity':0.9,
                    'z-index':5000,
                })
                .focus();
                //on enter keypress
                $(document).keypress(function(e) {
                    if(e.which == 13) {

                        $.ajax({

                            url: 'modify_imp.php',
                            type: 'post',
                            data: { id : objName, column : objColumn },
                            success: function(data, status){
                                $("#debug").html(data);
                            }

                        });
                    }
                });
             } //if (!alreadyClicked) end
        }); //end mouseenter function
   },
   //mouseleave function
   function () {
    alreadyClicked = false;
    $(this).css("color","red");
    $(".newInput").remove();
   }
 ); //end .hover

});

The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.

I already tried to pass the return value to a local or global variable but it didn't work. For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.

Can someone explain me why and how can i "store" the server response?

EDIT: Just edited with my entire <script>

• javascript
• php
• jquery
• html
• ajax

• 5 return is a reserved word. try reservedData – 1252748 Commented Nov 7, 2014 at 20:27
• Yeah sorry it's not 'return' in my actual code, i just traslated in english my code so you can understand better. I don't think that's the problem. I just changed it with 'response'. – Notash Commented Nov 7, 2014 at 20:33
• You're setting a click handler inside the hover handler. This means it keeps adding more copies of the click handler every time you move the mouse over the element. So after you mouseover for the 10th time, there will be 10 copies of the click handler; when you click, it will try to run all that stuff 10 times, except that most of it will only run once because alreadyClicked will be true. This uses up a small amount of memory and processor power unnecessarily. The click handler should be set outside the hover handler; the hover handler can be empty. – David Knipe Commented Nov 8, 2014 at 1:01

3 Answers 3

Since you see the result momentarily, I'm going to hazard a guess that you have a form element on your page and when you hit return, it's actually submitting the form. You briefly see the result of the ajax operation and then your form submits causing the page to reload as a new blank page. This is a mon issue and always has these same symptoms.

You can either remove the form element or block the default submission of the form with javascript.

If you show us more of your actual HTML, we could help more specifically with how to prevent the form from submitting.

You can solve this by calling the function in the form tag i.e,

<form action="javascript:AnyFunction();">

your code goes here

.

Another way would be to assign a BUTTON to trigger the ajax, and set the button outside of the FORM