Блог

Я хотел бы пояснить, чем браузерные сценарии (такие как javascript / jquery) отличаются от серверных сценариев (таких как PHP) и как им разрешено взаимодействовать друг с другом.

Если у меня есть php-код внутри моего html-кода, javascript определенно не может изменить какой-либо из этих скриптов, поскольку его на самом деле там нет. Сервер сначала считывает php-код, а затем отправляет его выходные данные (а также любой обычный html-код в файле) в веб-браузер, поэтому веб-браузер никогда не видит весь ваш php-код. С другой стороны, php не может видеть DOM, потому что его еще нет в браузере, и, следовательно, быть динамичным, как javascript. Способ, которым вы заставляете их взаимодействовать, — это ajax…

Мой вопрос таков: у меня есть вызов jquery ajax, который вызывает php-файл для создания таблицы, и данные таблицы содержат ссылку в нем. Есть ли какая-либо причина, по которой, когда я создаю таблицу из этого php-файла, я не могу получить к ней доступ через другой вызов jquery / javascript? Это мой код:

  $(document).ready(function()
   {
        $("#build_table, .Course_Name, .Start_Date, .Book_Title, .Book_Author, .Book_Isbn").click(function()
        {
            var whichButton = $(this).attr("class");
            console.log("Whichbotton = "   whichButton);
            var prog = $("#program option:selected").text();
            var sch = $("#school option:selected").text();
            var trm = $("#term option:selected").text();
            var ext = $("#extension option:selected").text();
            if(prog == "" || sch == "" || trm == "")
            {
                alert("Please enter a selection for each field");
            }
            else
            {
                $.get("build_table.php", {program: prog, school: sch, term: trm, extension: ext, button: whichButton},
                function(table)
                {   console.log("Entered table function");
                    $("#input_table").replaceWith("<div id='input_table'>"   table   "</div>");
                });
            }   
        });
   });
  

и фрагмент моего php-файла:

 $program = $_GET["program"];
$school = $_GET["school"];
$term = $_GET["term"];
$extension = $_GET["extension"];
$button = $_GET["button"];

$con = mysql_connect("127.0.0.1","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$term = str_replace(" ", "", $term); 
$sql = "SELECT * FROM tbl_name WHERE Dep1= '" . $program . "' AND Dep2= '" . $school . "' AND Dep3 = '" . $term . "'";
if($button == "build_table")
{
//add nothing  
}
else
{   echo $button;
$button = str_replace("_", " ", $button);
$sql = $sql . "ORDER BY `" . $button . "` DESC";
}   
mysql_select_db("csv_db", $con);

$result = mysql_query($sql)  or die(mysql_error());
echo $sql;
$num_rows = mysql_num_rows($result);
echo "<br>Number of Rows: " . $num_rows; 
echo "<table id='booklist'><tr>
                         <th>Edit</th>
                         <th class='coursename'><a href='#' class='Course_Name'>Course Name</a></th>
                         <th class='startdate'><a href='#'>Start Date</a></th>
                         <th class='booktitle'><a href='#'>Book Title</></th>
                         <th class='bookauthor'><a href='#'>Book Author</a></th>
                         <th class='bookisbn'><a href='#' class='Course Name'>Book ISBN</a></th>
                     </tr>";

        while($row = mysql_fetch_array($result))
        { 
            echo    "<tr>
                        <td><input type='checkbox'></input></td>
                        <td class='coursename'>" . $row['Course Name'] . "</td>
                        <td class='startdate'>" . $row['Start Date'] . "</td>
                        <td class='booktitle'>" . $row['Book Title']. "</td>
                        <td class='author'>" . $row['Book Author']. "</td>
                        <td class='isbn'><input class='ISBN_number' type='text' value='' size='13' maxlength='13'></input></td> 
                  </tr>";                   
        }               
echo "</table>";

mysql_close($con);
  

Я пытаюсь сделать так, чтобы при нажатии на заголовок (таблицы) Название курса он отсортирует столбец с названием курса (и да, в нем есть пробел … обратные метки позаботятся об этом.) Это не работает. С другой стороны, когда я попытался вставить простой html в свой обычный HTML-код

 <a href="#" class="Course_Name" value="Course Name Sort">Course Name Sort</a>
  

теперь все сработало так, как я ожидал. Я упускаю концепцию или я просто совершаю простую ошибку?

Проблема в том, как вы назначаете свой обработчик кликов:

 $("#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn")
.click(function() { 
    // your handler code
});
  

Здесь говорится следующее: «назначьте обработчик щелчка любым элементам, которые в данный момент соответствуют предоставленному селектору». Этот обработчик не применяется к элементам, которые вы позже создаете динамически (или загружаете через Ajax).

К счастью, jQuery позволяет вам назначать обработчик другими способами, чтобы он применялся к элементам, созданным в будущем: вы можете использовать .live() или .delegate() для настройки своего обработчика, или, если вы используете jQuery 1.7, они устарели в пользу .on() .

Я на самом деле еще не использовал .on() , но вот как вы могли бы использовать .delegate() :

 $(document).delegate(
   "#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn",
   "click",
   function() { 
       // your handler code
});
  

Я предлагаю вам прочитать документ для всех трех методов.