Page not working after JQuery .load()

Question

If mysql code is in index.php file, it working fine, but it cant be refreshed I have tried to move it to another file and then load it with JQuery function .load(),

$("#pagesn").load("data.php");

now it can be refrehed, but links not working anymore any Ideas?

Mysql code:

<?php
 require_once 'libs/db.class.php';
require_once 'libs/global.inc.php';

    $sql1="select * from zinutes LIMIT 3";
    $result1=$db->select($sql1);


          $query="select count(*) as tot from zinutes";
          $countset=$db->runquery($query);
          $count=$db->get_row($countset);
          $tot=$count['tot'];
          $page=1;
          $ipp=3;//items per page
          $totalpages=ceil($tot/$ipp);
          echo"<ul class='pages'>";
          for($i=1;$i<=$totalpages; $i++)
          {
              echo"<li class='$i'>$i</li>";
          }
          echo"</ul>";
        ?>

JS code for clicking the links:

$(document).ready(function(){
    function showLoader1(){
        $('.search-background1').fadeIn(200);
    }
    function hideLoader1(){
        $('.search-background1').fadeOut(200);
        alert("yra");
    }

    $("#pagesn").on("click",".pages li",function(){
        showLoader1();  
        $("#pagesn .pages li").css({'background-color' : ''});
        $(this).css({'background-color' : '#A5CDFA'});                
        $("#resn").load("data1.php?page=" + $(this).attr("class"), hideLoader1);
    });     
});

Tried to include that php file to specific div and then refresh it with JS, got same, not working result.

Answer 1

try using the .ajax() function

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

here is a more extensive example using an XMLHTTPRequest i am using here

// generate section content depending on request type
var requesttype = getUrlVars()["requesttype"];
if (requesttype == undefined) {
  mainmenu();
  document.getElementById("results").innerHTML = "<table border='0' cellspacing='0' cellpadding='0'><tr><td style='border-right:1px solid #E2E2E2'>" + mainmenuContent + "</td></tr></table>";
}

// mainmenu
function mainmenu() {
  document.title = "Upgrade World > Home";
  document.getElementById("breadcrumb").innerHTML = "<span style='color:#000;'>Home</span>";
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
  xmlhttp.open("GET", "proxy.php?requesttype=ModelManufacturers&requestlanguage=" + requestlanguage, false);
  xmlhttp.send();
  xmlDoc = xmlhttp.responseXML;
  var a = xmlDoc.getElementsByTagName("modelmanufacturer");
  prefix = "<table border='0' cellspacing='0' cellpadding='5'>"
  mainmenuContent = "";
  suffix = "</table>"
  for (i = 0; i < a.length; i++) {
    mainmenuContent = mainmenuContent + "<tr><td><a href='index.html?requesttype=ModelTypes&requestlanguage=" + requestlanguage + "&modelmanufacturer=" + encodeURIComponent(a[i].childNodes[0].data) + "'>" + a[i].childNodes[0].data + "</a></td></tr>";
  }
  mainmenuContent = prefix + mainmenuContent + suffix;
}