javascript - undefined function when triggering a onmouseover of a div with jQuery -
i getting undefined function error. have defined function on onmouseover not working.
my code
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
you have syntax error here
url:"get_page_info.php", type:"post",data=data,cache:false,
change to
url:"get_page_info.php", type:"post",data:data,cache:false,
you have problem data
declaration "page_id ="+id;
. mean "page_id="+id;
, or indeed var data = {page_id: id};
here how handle using jquery avoid problem completely.
html - use class , store 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 php read
<div class="col2 showinfo" data-showinfo="<?php echo $sub_menu['page_id']; ?>">
jquery
<script> $(function(){ $('.showinfo').hover( function(){ // first 1 mouseover var data = {page_id: $(this).data('showinfo')}; data.html="this 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 1 mouseout $('#hide, #show').toggle(); } ); }); </script>
Comments
Post a Comment