Question

I have a div that contains a student’s schedule, and there is a drop-down box for selecting by semester.

Once they select the semester, there is an ajax post, but when it refreshes, it displays the entire website within that div (with the appropriate schedule for that semester).

It looks like an iframe within a webpage, as seen here: http://cl.ly/Dy3b

Here is the ajax post script

<script type="text/javascript">
  $(document).ready(function() {

  $('#term').change(function() {

    var form_data = {
      term : $('#term').val(),
      ajax : '1'
    };

    var u = $("#schedulePortletURL").attr("href");

    $.ajax({
      url: u,
      type: 'POST',
      data: form_data,
      success: function(msg) {
        //alert(u);
        $('#view-schedule').html(msg);
      }
    });

    return false;
  });

  });
</script>

If possible, could you give me some suggestions of what to investigate to correct this? Thank you

Answer 1

My guess is that the call to the server is returning a full HTML page, and your code then puts the full HTML page into the view-schedule div.

To resolve this, create a new HTML page that you can call that contains a html fragment – the chunk that you want to live in the view-schedule div. Then change schedulePortletURL to point to the new HTML page.

Alternately, you could get the html back (the msg) and parse it to pull out the data you are interested in, then insert the filtered data into the view-schedule div.

Does the existing website have a API at all that you can call?