Как мне обратиться к переменной php в jQuery? - PullRequest
Новая
       23

Как мне обратиться к переменной php в jQuery?

0 голосов
/ 03 марта 2012

Я новичок в jQuery, у меня есть немного скрипта, и я хочу смешать jQuery с PHP. У меня есть курсы, и в этих курсах есть уроки. Учитель назначен преподавать курс. Мне нужна ссылка, в которой при нажатии на нее появляется всплывающее окно, в котором отображаются сведения об уроке или курсе. Моя проблема заключается в том, что у меня будет несколько ссылок и, следовательно, диалогов / модальных окон на странице, так что $ l ['id'] и $ c ['id'] будут разными. Как я могу поэтому использовать $ l ['id'] и $ c ['id'] в или с jQuery, учитывая, что скрипт jQuery находится внутри файла представления, и я создаю сам фактический контент в контроллере и передаю его на Посмотреть. Извините, если я не вижу смысла, потому что сам все еще в замешательстве. 

view.php
<script type="text/javascript">
$(function(){
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("#tabs").tabs();   
        $('#dialog').dialog({   
                             modal: true
                            });          
})
</script>
<h1>Student Hub: Courses for <?php echo $studentName;?></h1>

<div id="tabs">
    <?php echo $content;?>
</div>



controller.php  
This is in a foreach loop
<div class="lessonDetails">
    <p><a href="#lessonInfo'.$l['id'].'">Lesson Details:</a><p>
    <div id="lessonDialog'.$l['id'].'" title="Lesson Details">
    '.$l['name'].'
    </div>
</div>  

<div class="courseDetails">
    <p><a href="#courseInfo'.$c['id'].'">Course Timetable & Resources</a><p>
    <div id="courseDialog'.$c['id'].'" title="Course Details">
    <p>'.$c['fullname'].'</p>
    <p>'.$c['summary'].'</p>
    <p>Upcoming Lessons: </p>
</div>

Ответы [ 5 ]

2 голосов
/ 03 марта 2012

Технический ответ - нет, так как один из них является языком на стороне сервера, а другой - языком на стороне клиента; Вы не можете получить доступ к переменным PHP через JavaScript (jQuery). Однако вы можете перенести переменные PHP на свою HTML-страницу при генерации, а затем забрать их с помощью JavaScript или jQuery.

Читая ваш сценарий, я думаю, что вы слишком усложняете вещи. Подумайте о вашем приложении; не думайте о технических аспектах, а скорее о том, как это должно быть изложено. Я предполагаю, что у вас есть контроллер студентов, контроллер уроков и контроллер курсов. Эти контроллеры будут иметь действия, называемые view или аналогичные, и затем эти действия будут использовать идентификатор для отображения конкретного студента / курса / урока.

В вашей HTML-странице / представлении / шаблоне у вас должны быть только обычные URL-адреса. Затем следует использовать JavaScript для улучшения веб-сайта. Так что в вашем случае я бы разметил его примерно так: 

<ul class="courses">
<?php foreach ($courses as $course): ?>
  <li><a href="/courses/view/<?php echo $course->id; ?>"><?php echo $course->title; ?></a></li>
<?php endforeach; ?>
</ul>

В таком случае во внешнем файле JavaScript будет функция, которая прослушивает щелчок по тегу <a> и вместо перехода по этому URL вместо отображения содержимого страницы во всплывающем / модальном окне. 

<script>
    $('.courses a').click(function(e) {
        e.preventDefault();
        // load external page and display it in a modal
    });
</script>

Таким образом, если по какой-либо причине JavaScript недоступен, пользователь будет перенаправлен на страницу сведений о курсе. Если у них есть JavaScript, они получат модное всплывающее окно.

Надеюсь, это поможет. Если вам нужно что-то прояснить, дайте мне знать, поскольку я написал это в первые часы после нескольких JD и Cokes!

0 голосов
/ 03 марта 2012

Вот решение, использующее диалог jQueryUI. Идентификаторы не требуются, однако, если они необходимы, добавьте их в качестве атрибута данных к этим ссылкам 

<p><a href="#courseInfo'.$c['id'].'" data-id="'.$c['id'].'" >Course Timetable & Resources</a><p>

Это позволяет легко получить идентификатор с помощью метода jQuery data ().

Диалог создается и уничтожается при каждом использовании. Как отмечено в комментариях, понятия не имею, какой контент идет в диалоге. Я могу легко настроить, если это AJAX от HREF 

$('.lessonDetails a, .courseDetails a').click(function(){
    var $this=$(this);
    /* if need the id associated to link*/
    var id=$this.data('id');    

    var content= ''/* ???????   */  

    var title=$this.parent().next().attr('title')
    loadDialog(title, content);
    return false; /* stop browser following href*/

})


function loadDialog(title, content) {

    var dialogOpts = {
        modal: true,
        title: title,
        width: 800,
        close: function() {
            /* remove this dialog from DOM on close*/
            $(this).remove()
        }
    };
    $('<div>').append(content).dialog(dialogOpts);  

}
0 голосов
/ 03 марта 2012

Вы можете разместить теги в своем коде JavaScript. Так как этот код находится на стороне сервера, он будет «рендерится» на ваш клиентский код JavaScript. Таким образом, ваш JavaScript может получить доступ к значениям, хранящимся в вашем PHP-скрипте.

0 голосов
/ 03 марта 2012

Может быть, вы можете создавать формы, в которых есть скрытые значения. 

<?php foreach($lesson as $l): ?>
  <form method="POST" action="">
    <input type="hidden" name="lesson_id" value="<?php echo $l['id']; ?>" />  
    <a href="#" class="model_window">Click</a>
  </form>
<?php endforeach; ?>

JavaScript: 

$(document).ready(function() {
  $('.modal_window').click(function() {
    var form = $(this).closest('form');
    var lesson_id = $(form).find('input[name=lesson_id]').val();

    // Do something with lesson_id
  });
});

Идея одинакова для курсов.

****** Редактировать **** ****

Может быть, вы можете попробовать использовать входные массивы. Предполагая, что у вас есть что-то вроде этого 

<input type="hidden" name="courses[]" value="1" />  
<input type="hidden" name="courses[]" value="2" />

JavaScript: 

var courses = $(form).find('input[name^=courses]');
$(courses).each(function() {
  var course = $(this).val();
});
0 голосов
/ 03 марта 2012

вы можете создать в каждой ссылке несколько дополнительных атрибутов и с помощью jQuery получить информацию с помощью функции attr $ ('a'). Attr ('courses').

что-то вроде 

<a href="#" class=".information" teacher="idTeacher" course="idCourse" >list </a>

затем с помощью jquery 

$('.information').click(function(){
teacher= $(this).attr('teacher');
course=$(this).attr('course');



});

не забудьте использовать $ ('. Information'). Live (), если вы используете AJAX для получения данных с сервера и разбора их для создания ссылок

...