Popup with AJAX and jQuery

This is what you need:

  

I need to open a popup with the information in my database when I click on a certain item on a grid that I'm displaying on the screen. [...]

     

- SirSmart, May 7, 2014

Therefore, I will supply part of it.

First, in order not to re-create the wheel, we'll use jQuery UI to bring our modal to life ( or " pop-up " if you prefer). To do this, download here with at least core and the widget → dialog .

Once downloaded and installed - just call the required .js files through the <script> tag in your app's HTML - we'll make clicking a specific thing a dialog is open. 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 , href="http://code.jquery.com/ui/jquery-ui-git.css"> jquery-ui-git.css

To view a real-time example, visit jsFiddle .

What we did so far was this:

  

I need to open a popup [...] when I click on a certain item on a grid that I'm displaying on the screen.

Now we need this:

  

[...] with the information in my database [...]

In order to be able to perform such an act, I would need to know specifically about your database. In fact, even if I did, I would not do it for you - I'll give you the knife and the cheese.

With the modal on hand ...

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

If you want to go the right way, I suggest you do a requisition AJAX requesting the information of a specific user. To do this, you follow in the logic that we wrote in HTML / JavaScript about " clicking and opening modal ", but before filling the popup with the data element information, make the request want and reply to 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 submitting your server's response in the form json - this is a good practice that brings flexibility and scalability.

To conclude: the flow of this service is relatively simple. After the client clicks on some list item, you are going to 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 type GET to localhost/user/1 (for example), this means - not necessarily, but in our case - that we will have a return of type JSON, which is totally interoperable with the request AJAX we had done previously. The server response will be a vector with the user information in question. You iterate with this data and distribute it visually with JavaScript. The result will be as expected.

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

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

Depending on what kind of message you want to display, you can put this code inside your function.

alert ('Message via alert');

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

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

<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 Modal hidden it is best to do via CSS with display: none;

Example

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 in JSFiddle .

Based on your question:

  

I have an approval system and need to display a message to the user every time he clicks the approve button. How can I do it?

I assume that you are already able to approve. To finally show a message - that based on your code there is nothing related - you should add the following excerpt in the success fragment of your $.ajax , like this:

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

Remembering that alert() is a native JavaScript function, and that if you want something personalized you should do it, however following the same logic.

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 "Message" attribute you in the success of the ajax call can simply put the message content inside some html tag to 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 success.

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