QUESTION How to use Ajax and retrieve data

[vish93]

Hello guys, I have currently got a list of items displaying, which when clicked should reveal a modal with further details. Now, I have got the modal showing part to work via:

Code:

<div class="portfolio-modal modal fade" id="job-description" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl"> </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <!-- Project Details Go Here -->
            <h2 class="modal-title" id="exampleModalLabel"></h2>
            <p class="item-intro">Lorem ipsum dolor sit amet consectetur.</p>        
            <?php $jobid = "<p class='jobid'></p>"; ?>
            <p><?php include_job_details($jobid);?></p>
            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Then I have a custom plugin with this function, which should get the correct further details and display them:

PHP Code:

function include_job_details($thejob){
    echo($thejob); 
    global $jobs_list;
    $jobs_list = read_jobs_from_file();
        //find the job details to output
        $iterator = 0;
        $job = array();
        for ($iterator = 0; $iterator < count($jobs_list); $iterator++){
            $job = $jobs_list[$iterator];
            if ($job['jobID'] == $thejob){
                break;
            }
        }
        ?>    
        <div class="job-listing-middle">
            <span class="job-title"><?php echo $job['title'];?></span><span class="job-location"><?php echo $job['location'];?></span>
            <span class="job-salary"><?php echo $job['salary'];?></span>
            <span class="job-description" style="margin-top:5px"><?php echo $job['description'];?></span>
        </div>
        <div class="job-listing-button">
            <span class="job-tag">Click to apply online</span>
            <div class="job-button-container">
                <a class="job-apply-button" href="./<?php printf("./apply-for-a-job?jobID=%s&title=%s", $_GET['jobID'], urlencode($job['title']));  ?>" title="">
                    <span>Apply Online</span>
                </a>
            </div>
        </div> 
        <?php
        
} 


I call this function in the modal code above. The p tag with the class jobid is where I am setting the specific list item clicked and the variable value for $thejob via:

Code:

$('#job-description').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('id') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.jobid').text(recipient)
  
})

As you probably can tell very confusing, I just want to get the modal that pops up populated with the related information. The function works, I just need help on how I can set the variable $thejob or use ajax ?

[morvy]

I would use plugin Extra Router, or create a template file, create page ajax and then call it like domain.com/ajax?jobid=123 ..and you can call the function directly in ajax template file (but it's not ideal, Extra Router is much better option)

[vish93]

I would use plugin Extra Router, or create a template file, create page ajax and then call it like domain.com/ajax?jobid=123 ..and you can call the function directly in ajax template file (but it's not ideal, Extra Router is much better option)

I got it to work in the end via ajax.