Question

I’m a complete beginner with jQuery and I have this bit of script here and I want to mix jQuery with PHP. I have Courses and in those Courses are Lessons. A Teacher is assigned to teach a Course. What I want is a link where if I press it a popup appears and in it shows the Lesson details or Course details. My problem is that I will be having multiple links and thus dialogs/modal windows in a page such that $l[‘id’] and $c[‘id’] will be different. How can I therefore use $l[‘id’] and $c[‘id’] in or with jQuery given that the jQuery script is inside the view file and I’m creating the actual content itself in the controller and passing it onto view. Sorry if I don’t make sense cause I’m still quite confused about all this myself.

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>                                                                  

Answer 1

Technical answer is you don’t as one is a server-side language and one is a client-side language; you can’t access PHP variables via JavaScript (jQuery). You can, however, drop your PHP variables into your HTML page on generation, and then pick them up with JavaScript or jQuery.

Reading your scenario, I think your over-complicating things. Think of your application; don’t think of the technical aspects, but more the way it should be laid out. I’m guessing you have a students controller, a lessons controller, and a courses controller. Those controllers will have actions, called view or similar, and then these actions will take an ID to display a particular student/course/lesson.

In your HTML page/view/template, you should have just vanilla URLs. JavaScript should then be used to enhance the website. So in your case, I would have mark-up it up similar to as follows:

<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>

I’d then, in an external JavaScript file, have a function that listens for a click on the <a> tag and instead of navigating to that URL, instead displays the page content in a pop-up/modal window.

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

This way, if for some reason JavaScript’s not available then the user will be taken to the course details page. If they do have JavaScript, then they’ll get a fancy modal pop-up.

Hope this helps. If you need anything clearing up then let me know, as I have wrote this in the early hours after a few JD and Cokes!