0

I am working on a small script that performs an Ajax call and returns data as Json.

If the result is not empty, the script displays an alert containing the returned data.

This works fine but I would like to display the data as a list, my question is how could this be done?

The json

["Baskerville Suite","Bolton Suite"]

The jquery/ajax call

hotelid= "EXBHX";
$(document).ready(function() {
  $.ajax({
  type: "Post",
  url: "../ipad_status.php",
  data: { HotelID : hotelid },
  success: function(data) {
    var result = $.parseJSON(data);
    console.log(result);
    if(result != 0){
      $.alert({
        title: 'Room displays offline!',
        content: 'Room(s): <BR/><BR/>' + result + '',
        icon: 'fa fa-rocket',
        animation: 'zoom',
        boxWidth: '50%',
        closeAnimation: 'zoom',
        buttons: {
          okay: {
            text: 'View rooms',
            btnClass: 'btn-blue',
            action: function() {
              window.top.location.href = '../confmon_a.php'
            }
          },
          Close: function() {
            text: 'Close'
          }
        }
      });
    }
  }
  });
});

Many thanks in advance for your time.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
DCJones
  • 3,121
  • 5
  • 31
  • 53

1 Answers1

2

Assuming https://github.com/craftpip/jquery-confirm is used, then just join the result like

  • 'Room(s):<br/><br/>'+result.join('<br/>'),

or

  • 'Room(s):<br/><br/><ul><li>'+result.join('</li><li>')+'</ul>',

or link them:

var result = ["Baskerville Suite", "Bolton Suite"],
  $list = $("<div/>").append("<ul/>");
  
$.each(result, function(i, text) {
  $("<li/>").append(
    $("<a/>", {
      href: "../confmon_a.php?room=" + text.replace(/\s/g, "_")
    }).text(text)
  ).appendTo($list)
})
$.alert({
  title: 'Room displays offline!',
  content: 'Room(s):<br/><br/>' + $list[0].innerHTML, // because $.alert wants html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  boxWidth: '50%',
  closeAnimation: 'zoom',
  buttons: {
    okay: {
      text: 'View rooms',
      btnClass: 'btn-blue',
      action: function() {
        window.top.location.href = '../confmon_a.php'
      }
    },
    Close: function() {
      text: 'Close'
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join – mplungjan Aug 13 '18 at 07:25
  • See update which links each room to a URL you specify – mplungjan Aug 13 '18 at 07:45
  • 1
    many thanks for your code, above and beyond to make it even better. – DCJones Aug 13 '18 at 07:48
  • @DCJones - yeah, the initial answer was really too simple for more than a comment and then you could delete your question. Now it is more useful for others since it includes the generation of a list of links – mplungjan Aug 13 '18 at 08:00
  • Thanks - well mostly SO is bashed for not being friendly when people ask simple questions, but I was intrigued when my jQuery failed to show proper in the alert :) I try to help, even when I close questions – mplungjan Aug 13 '18 at 08:10