0

I have a text input where a user can perform a search (for a username or email address held in a database). I already have a PHP script which does the searching etc.

I want to display the search results in a Bootstrap 3 modal - or an error message if there are none.

I'm struggling to understand the full logic of doing this.

What I have so far:

Search input and button:

<input type="text" name="search">
<button id="searchBtn">Search</button>

PHP function (accessible via /ajax/search/) which accepts POST data (e.g. $_POST['search']), queries the database. At the moment this returns an array - empty if no results.

What is the correct order to run things? I know that I need to pass my search input to /ajax/search/. But I also need to open a modal - both of these are presumably done on clicking Search (searchBtn). Do I submit the form with jquery's ajax method first, and then get the success to open the modal?

To further complicate matters, once this modal is shown there will be a series of tickboxes next to users that were found. This will need to be posted elsewhere... But I'm not even getting this far yet.

I'm struggling to understand this and have read a few posts already such as Bootstrap 3 with remote Modal and this Placing the results of a form post into a modal in Bootstrap 3

If there are any tutorials which show this please could someone point me at one as I can't find one, particularly where things aren't marked "this has been deprecated".

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131

2 Answers2

1

A simple example to consider:

JS

$('#myModal').on('shown.bs.modal', function() {
  $(".modal-body").html("Loading...");
  $.ajax({
    url: "/path/to/request",
    data: { 
         // Parameters if needed
    },
    method: "POST",
    success: function(data) {
      $(".modal-body").html(data);
    }
  })
});

Example (mockup) at:

https://jsfiddle.net/4bkhLatg/

apokryfos
  • 38,771
  • 9
  • 70
  • 114
  • That seems to meet my needs. Just need to figure out the best way to format the data (json perhaps) because the HTML inside the modal will be a load of form elements. I'm not sure if getting my PHP script to output the HTML is the best (modern) way? Thanks though, I'll accept this as the answer. – Andy Oct 27 '16 at 15:01
  • @Andy JSON is probably a good way to transmit the data. If you set the headers correctly then the `data` variable in the `success` function will also parse it automatically, which makes it easy to work with. – apokryfos Oct 27 '16 at 15:10
0

I see what you're up against. Bootstrap is just your "display", but in looking at Bootstrap to teach the "go get" portion of it, the goodies are lost on the bus that passed by. Jump onto this very simple example of external Ajax:

http://www.w3schools.com/jquery/ajax_ajax.asp

Then after (hidden) update of (hidden #div1):

$("#div1").html(result);

you call your bootstrap modal to show the (hidden) div:

$('#div1').modal('show')
WEBjuju
  • 5,797
  • 4
  • 27
  • 36
  • Ok, so effectively load the ajax results into a hidden div and then trigger something to make that div visible? – Andy Oct 27 '16 at 14:47
  • That is one way to skin that cat, yes. Other skins probably include creating that modal div on the fly within the js...but if you already have the modal and just "repurpose" it each time you have new content, then life is a little less confusing, perhaps. – WEBjuju Oct 27 '16 at 14:49