Как сказать, какое JQUERY всплывающее окно для отображения

Question

Наконец-то понял это благодаря One Mad Monkey, но забыл кавычки в моей переменной $ eventDate для SQL-запроса. Спасибо за помощь, ребята:)

  $(".date_has_event").live("click",function(){
    console.log('you clicked', this);

    var dateClicked = $(this).attr('id');
    $.ajax({
            type:"GET",
        url: "popup_events.php",
        data:"date="+dateClicked,
        success: function(data){
            $(".popupContent").html(data);
        }});
        //centering with css
        centerPopup();
        //load popup
        loadPopup();

    });  

Это связано с моим файлом popup_events.php:

<?php

    include ("Includes/dbConnect.php");

    $eventDate = $_GET['date'];

    $query = "SELECT * FROM events WHERE eventDate='$eventDate'";
    $check = mysqli_query($cxn,$query) or die("Couldn't execute query!");

    while($row = mysqli_fetch_array($check))
      {
          $id = $row['eventID'];

          echo "<div class='submit_event_list'><a href='individual_event_page_main.php?id=$id'>";
          echo $row['eventName'];
          echo " | " . $row['host'];
          echo " | " . $row['venue'];
          echo " | " . $row['eventDate'];


          echo "</a></div>";
          echo "<br />";
      }     
?>

Answer 1

Если вопрос "это возможно?" Ответ - да. Конечно, вы можете привязать события к вашему HTML, которые будут отображать всплывающее окно. Люди делают это постоянно, так что это не очень ценный вопрос!

Более широкий вопрос: "Я делаю это хорошо?" ответ сложнее, а также расширяет границы «соответствующего» вопроса переполнения стека, который должен иметь более сфокусированную область, чем этот.

Я говорю "имей это!" безопасно зная, что вы можете добавить всплывающие окна. Тогда возвращайтесь, когда у вас есть более конкретные вопросы. Вещи, о которых я бы подумал, когда вы начнете:

1. Является ли JavaScript лучшим способом динамического создания календаря? Вы вообще используете серверный язык? Это может быть лучшее место. И если вы используете JS, почему бы не построить календарь полностью, а затем вернуться и заполнить его?

2. Вам нужно сделать синхронный вызов ajax? Есть ли способы, которыми вы можете создать его так, чтобы он мог с радостью получать новую информацию и не беспокоиться о том, возвращается ли он последовательно или нет? (подсказка, это может относиться к # 1)

3. Информация, кроме подсказки: live() является устаревшей функцией. Начиная с jQuery 1.7, вместо этого я хотел бы использовать .on(). Существует эквивалент для .live() с использованием .on(), но я не думаю, что вы должны его использовать ... вы должны использовать эквивалент .delegate(), поскольку у вас должен быть предок вашего календаря, который может служить слушателем (вместо этого всего документа!). Если вы используете jQuery 1.5.x или 1.6.x, тогда используйте .delegate().

4. Может быть, это должен был быть первый вопрос: вы изучили UI-фреймворки, которые уже включают календари и всплывающие окна (они не включают в себя управление событиями, так что у вас еще есть интересная работа)?

Answer 2

Я не уверен, что у вас действительно есть вопрос ... Но, похоже, вам, возможно, просто нужна помощь, чтобы узнать, какое всплывающее окно отображать.

в вашем:

$(".popup").live("click",function(){})

вы можете использовать специальную переменную "this", чтобы определить, какой из ваших дней был нажат.

например.

$(".popup").live("click",function(){ 
    console.log('you clicked', this);

    //to get the date id (your formatdate) from this
    var dateClicked = $(this).parent().parent().attr('id');

    //have to do parent() twice because you put your .popup under <div class='title'>
})

Чтобы сделать это проще ... вам следует рассмотреть возможность изменения события click для использования .date_has_event вместо .popup, чтобы вы могли сделать это вместо этого:

$(".date_has_event").live("click",function(){ 
    var dateClicked = $(this).attr('id');
})

как только вы узнаете, в какой день щелкнули, вы, вероятно, захотите отобразить содержимое всплывающего окна этого дня (список событий за этот день) в всплывающем окне.

Вот где вы должны использовать ajax-запрос, отправленный некоторому внутреннему коду, который в основном представляет собой php-код, который вы уже вложили в свой (этот материал в вашем #popupContact). Вы должны переместить этот код куда-нибудь .. скажем, "getEvents.php"

например.

$(".date_has_event").live("click",function(){ 
    var dateClicked = $(this).attr('id');
    $.ajax({
        type: "GET",
        url: "getEvents.php",
        dataType: "json",
        data: "date="+dateClicked,
        success: function(data){
           //fill your popup with the data received

        }   
    })
})

Я думаю, этого должно быть достаточно, чтобы помочь вам. Удачи.