如何在jQuery中引用php变量


How do I refer to a php variable in jQuery?

我是jQuery的初学者,这里有一些脚本,我想将jQuery与PHP混合使用。我有课程,这些课程就是课程。老师被指派教授一门课程。我想要的是一个链接,如果我按下它,会出现一个弹出窗口,其中显示课程详细信息或课程详细信息。我的问题是,我将在一个页面中有多个链接,因此对话框/模式窗口,这样$l[‘id’]和$c[‘id‘]就会不同。因此,如果jQuery脚本在视图文件中,并且我正在控制器中创建实际内容并将其传递到视图中,我如何在jQuery中或与jQuery一起使用$l['id']和$c['id']。如果我说不通的话,我很抱歉,因为我自己对这一切仍然很困惑。

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>                                                                  

技术答案是您不需要,因为一种是服务器端语言,另一种是客户端语言;您不能通过JavaScript(jQuery)访问PHP变量。但是,您可以在生成时将PHP变量放入HTML页面,然后使用JavaScript或jQuery进行提取。

读到你的剧本,我觉得你把事情搞得太复杂了。想想你的申请;不要考虑技术方面的问题,而应该更多地考虑它的布局方式。我猜你有一个学生控制器,一个课程控制器和一个课程管理员。这些控制器将具有称为view或类似的操作,然后这些操作将使用ID来显示特定的学生/课程/课程。

在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之后的凌晨写了这篇文章!

您可以在每个链接中创建一些额外的属性,并使用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');

});

如果您正在使用一些AJAX从服务器获取数据并对其进行解析以创建链接,请记住使用$('.information').live()

您可以在JavaScript代码中放置标记。由于该代码是服务器端的,它将"呈现"到您的JavaScript客户端代码。因此,您的JavaScript可以访问PHP脚本存储的值。

下面是一个使用jQueryUI对话框的解决方案。不需要ID,但如果需要,将其作为链接的数据属性添加

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

这允许使用jQuery data()方法轻松获取ID。

每次使用都会创建和销毁对话框。正如评论中所指出的,不知道对话框中包含了什么内容。如果是来自href的ajax,我可以很容易地进行调整

$('.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);  
}

也许您可以创建包含隐藏值的表单。

<?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();
});