undefined function when triggering a onmouseover of a div with jQuery

Question

I am getting undefined function error. I have defined this function on onmouseover but it is not working.

My code is

HTML

<div class="col2" onmouseover="show_info('<?php echo $sub_menu['page_id'];  ?>');" onmouseout="hide_info();">
<a href="#">
<img src="css/images/img1.png" />
<h3><?php echo $sub_menu['page_title'];  ?></h3>
</a>
</div>   

Script

<script>
        function show_info(id)
        {
        alert('hiiii');
        var data = "page_id ="+id;
        $.ajax({
        url:"get_page_info.php", type:"post",data=data,cache:false,
        success: function(html)
            {
            document.getElementById('hide').style.display='none';
            document.getElementById('show').innerHTML=html;
            }
        });
        }

        function hide_info()
        {
            document.getElementById('hide').style.display='block';
            document.getElementById('show').style.display='none';
        }
    </script>

Please suggest

Answer 1

You have a syntax error here

url:"get_page_info.php", type:"post",data=data,cache:false,

Change it to

url:"get_page_info.php", type:"post",data:data,cache:false,

Working demo

You also have a problem with your data declaration "page_id ="+id; . You mean "page_id="+id; , or indeed var data = {page_id: id};

Here is how you would handle this using jQuery to avoid the problem completely.

Working demo

HTML - use a class and store the info in data.

<div class="col2 showinfo" data-showinfo="123"><h3>456</h3></div> 
<div id="show" style="display:none">show</div>
<div id="hide">hide</div>

So in your PHP this would read

<div class="col2 showinfo" data-showinfo="<?php echo $sub_menu['page_id']; ?>">

jQuery

<script>
$(function(){

    $('.showinfo').hover(
        function(){ // first one is mouseover
            var data = {page_id: $(this).data('showinfo')};
            data.html="this is page " + data.page_id; // jsfiddle test
            console.log(data);
            $.ajax({
                url:"/echo/html/", // jsfiddle test
                type:"post",
                data:data,
                cache:false,
                success: function(html){
                    console.log(html);
                   $('#hide').toggle();
                   $('#show').toggle().html(html);
                }
            });            
        }, 
        function(){ // second one is mouseout
            $('#hide, #show').toggle();
        }
   );
});
</script>

Answer 2

在第7行的脚本中有语法错误data=data必须是data:data