Popup with AJAX and jQuery

Question

I need to open a popup with my database information, when you click on a certain item in a grid that I’m displaying on the screen. How do I display this popup?

Answer 1

This is your need:

I need to open a popup with my database information, when clicking a certain item on a grid that I am displaying on the screen. [...]

— Sirsmart, 7 May 2014

So I’m gonna supply part hers.

First, in order not to recreate the wheel, we will use the jQuery UI to give life to our modal (or "pop-up", if you prefer). For this, download it here with at least the core and the dialog widget.

Once downloaded and installed - just call the files .js needed through tag <script> in your application’s HTML - we will make sure that by clicking on something specific, a dialogue be opened. See:

HTML

<div class="grid">
    <ul>
        <li data-id="1" data-name="João da Silva" data-age="25"><a href="#">João</a></li>
        <li data-id="2" data-name="Felipe Nogueira" data-age="30"><a href="#">Felipe</a></li>
    </ul>
</div>

<div class="dialog"></div>

Javascript / jQuery

var $item = $('.grid ul li'),
    $dialog = $('.dialog');

$dialog.dialog({
    autoOpen: false,
    modal: true
});

$item.on('click', function() {
    var $id = $(this).data('id'),
        $name = $(this).data('name'),
        $age = $(this).data('age');
    
    $dialog.html('Este é o ' + $name + '. Ele tem ' + $age + ' anos e é o ' + $id + 'º usuário registrado.');
    $dialog.dialog('open');
});

Dependencies: jquery-2.1.1.min. js, jquery-ui.min.js and jquery-ui-git.css

To view an example in real time, visit jsFiddle.

---

What we’ve done so far is this:

I need to open a popup [...] when clicking on a certain item in a grid that I am displaying on the screen.

Now we need this:

[...] with my database information [...]

In order to accomplish such an act, I would need to know specifically from your database. In fact, even if I did, I wouldn’t do it for you - I’ll give you the knife and the cheese.

With the modal at hand...

... there are several ways to complete it with your user information. A simple example I gave out through the HTML attributes data. The problem of this is that it sounds like "gambiarra" because it is not the best practice to perform such an action.

If you want to follow the right path, I suggest you make a requisition AJAX requesting information from a specific user. To accomplish this, you follow the logic we write in HTML/Javascript about "click and open modal", but before filling the pop-up with the information of the elements data, make the request you want and answer it with the data of the element you clicked on.

For example:

[...]

$item.on('click', function() {
    var $id = $(this).data('id');

    $.ajax({
        url: '/user/' + $id,
        dataType: 'JSON',
        success: function (user) {
            $dialog.html('Este é o ' + user.name + '. Ele tem ' + user.age + ' anos e é o ' + $id + 'º usuário registrado.').dialog('open');
        }
    });
}

Try sending your server’s response in the format json - this is good practice that brings flexibility and scalability.

To conclude: the flow of this service is relatively simple. After the customer clicks on some item in the list, you will make an AJAX request for some route of your application. In our case, we were using /user/$id. Therefore, when a request is made of the type GET for localhost/user/1 (for example), this means - not necessarily, but in our case - that we will have a JSON-type feedback, which is fully interoperable with the AJAX request we had previously made. The server response will be a vector with the information of the user in question. You iterate with this data and distribute it visually with Javascript. The result will be as expected.

Answer 2

If you already have a function Aprovar() then to run this function every click, then you can tie an event like this:

$('button').on('click', Aprovar);

Depending on what type of message you want to display you can place this code within your function.

Alert('Message via Alert');

or by opening a dialog with jQuery, or by placing the message on the page with $('seletor').html('Mensagem via HTML');

To open a dialog you must load the jQuery UI and have "prepared" the HTML elements for that:

<div id="myDialog"><div id="myDialogText"></div></div>

Then you can change the text dynamically with $("#myDialogText").text('Mensagem via Modal'); and then open/close Modal

To open Modal you can use $("#myDialog").dialog('open');
To close Modal you can use $("#myDialog").dialog('close');

To open the page with hidden Modal the best is to do via CSS with display: none;

Example

Answer 3

Based on your question:

I have an approval system and need to display a message to the user every time they click the Approve button. How can I do?

I assume you’re already getting the approvals. To finally show a message - which based on your code there is nothing related - you must add the following snippet to the fragment success of your $.ajax, thus:

function Aprovar() {
   $.ajax({
   [...]
       success: function (data) {
           alert("Aprovado com sucesso!");
           $("#listaParticipante").html(data);
       },
   [...]
   });
}

Remembering that, this one alert() is a function native and that if you want something custom you should do it yourself, but following the same logic.

Answer 4

You need to return a json string from the server and parse it to become an object variable .

//JQuery
var objJson = $.parseJSON("string json");

//Javascript
var objJson = JSON.parse("string json");

Let’s say that in this json object you have the attribute "Message" you in the ajax call Success can simply put the content of the message inside some html tag for display.

success: function (data) {
  $("#listaParticipante").html(data);
  var objJson =  $.parseJSON(data.d);
  $("#algum-elemento").text(objJson.Mensagem);
}

If it is not a dynamic message you can simply add the message in the Success.

success: function (data) {
  $("#listaParticipante").html(data);
  $("#algum-elemento").text("Mensagem estática");
} 

Answer 5

Using the library jQuery UI:

HTML:

<button id='link'>Clique-me!</button>

<div id='div' title='Meu título'></div>

Javascript:

$('#link').click(function() {
  $('#div').html('Meu texto').dialog();
});

See on Jsfiddle.