QUESTION How to use Ajax and retrieve data

QUESTION How to use Ajax and retrieve data - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: QUESTION How to use Ajax and retrieve data (/showthread.php?tid=8431)

How to use Ajax and retrieve data - vish93 - 2016-05-24

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 ?

RE: How to use Ajax and retrieve data - morvy - 2016-06-01

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)

RE: How to use Ajax and retrieve data - vish93 - 2016-06-01

(2016-06-01, 23:10:13)morvy Wrote: 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.