How to display a HTML modal, depending on result of Javascript/AJAX database call

Question

I'm currently developing a Facebook game using html and Javascript. Right now I have two modals on a html page (ModalA and ModalB), I’m trying to attach both of them to one button, but only one of the modals should appear when the button is clicked. The modal that appears is decided by the result of a check on my database.

Whenever a user clicks on the button, I want to run a check on my database using a Javascript function that sends the user’s Facebook ID by AJAX to my database. This checks a certain value in the database and then sends back either “0” or “1” as the response to the AJAX call.

If the response sent back is “0” then I want modal A to appear on the webpage, however if the response is “1” then I want modal B to appear.

I know AJAX is asynchronous, so if I understand this correctly, I need to use something like e.preventDefault(); to make it wait for the response from the database?

Right now I can make a modal appear by making the button’s a href = the modal’s address, like this:

<td align="center"><a href="#openModalA"><img src="button.png" width="100" height="50"></a></td>

But this code is located directly in the source code of my page, I'm unsure how to set the html "a href" address dynamically using a Javascript function.

The addresses of my two modals are: #openModalA and #openModalB. (the code for these modals is located in the source code for the html page they appear on).

This is my html button:

<td align="center"><a href= ??? ><img src="button.png" width="100" height="50"></a></td>

And this is my current Javascript with AJAX:

function openModal() {

//getting user's Facebook ID
FB.login(function(response) {
  if (response.authResponse) {

     FB.api('/me', function(response) {

     if (response.error) {
       console.log('Error - ' + response.error.message);
     }
     else {
       var userid = response.id;

  e.preventDefault(); 

       $.ajax({
         url: 'scripts/checkmodal.php',
         data: {'userid' : userid},
        type: "POST",
        success: function(response){

                 if(response=="0"){
                          window.location.href = $link.attr('#openModalA');
                         }
                    else{
                         window.location.href = $link.attr('#openModalB');
                      console.log(response);
                              }
                    }
       });
     }
    });
  } else {
    console.log('User cancelled login or did not fully authorize.');
  }
 });
}

I don't know how to link this Javascript to the html button's address, or if I'm doing something very fundamental wrong.

Any help with this would be really appreciated, thanks in advance!

UPDATE

This is the code I currently have:

Button in html:

<td align="center"><a id="yourAnchor" href><img src="button.png" width="100" height="50" onClick=openModal();></a></td>

Javascript:

    function openModal() {

    //getting user's Facebook ID
    FB.login(function(response) {
      if (response.authResponse) {

         FB.api('/me', function(response) {

         if (response.error) {
           console.log('Error - ' + response.error.message);
         }
         else {
           var userid = response.id;

     var $link = $('#yourAnchor');

           if($.ajax({
            url: 'scripts/checkmodal.php',
            data: {'userid' : userid},
            type: "POST",
     async: false
     }).responseText == 0){
          window.location.href = $link.attr('#openModalA');
                             }
                        else{
          window.location.href = $link.attr('#openModalB');
                          console.log(response);
                                  }
                        };
        });
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
     });
    }

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

To set the href you can follow the instuctions of this question:

$("a").attr("href", "http://www.google.com/")

If you really need to wait for the AJAX response you can make a synchronous AJAX call. I found a good question/answer for you describing how to do it.

you have to basically add the attribute

async: false

and collect the result with a

.responseText

You could give your anchor the intended id, so JQuery can find it by id:

<a id="yourAnchor" href></a>

after that, your code would look more or less like this:

var $link = $('#yourAnchor');

if ($.ajax({
     url: 'scripts/checkmodal.php',
     data: {'userid' : userid},
     type: "POST",
     async: false
   }).responseText == 0){
     window.location.href = "#openModalA";
   }
   else{
     window.location.href = "#openModalB";
   }

edited May 23 '17 at 12:23

Community

1
1

answered Aug 20 '15 at 11:13

The Fabio

5,369
1
25
55

Hi @the-fabio thanks for your answer! I'm trying to implement it but it's giving me the following error: ``ReferenceError: $link is not defined`` I don't know how to define the modal's address in my page's html source code as the variable (am I right in thinking that the variable is called ``$link`` and that Modal A or B gets assigned to this depending on the database result?), I have my Javascript changed to your answer, however I was wondering what should the line in my html read in order to connect the Javascript to the html code? Thanks again! – Emily Aug 21 '15 at 00:45
got you... I assumed your code was defining the `$link` variable in other part... give the anchor an id ` – The Fabio Aug 21 '15 at 02:11
Hi @the-fabio thanks again, I've made your changes but it's still not opening up either modal, nothing's happening, however if I keep the "window.location.href =" part, like this: ``window.location.href = $link.attr('#openModalA');`` then the page does attempt to redirect (but it generates an error as it goes to "...mygame/undefined"), so it seems like the html page isn't able to see "openModalA" and "openModalB" but instead goes to an address called "undefined". I've updated my question with the code I'm using at the minute, do you know what could be causing it to not work? Thanks again! – Emily Aug 21 '15 at 07:15
You did't tell me you needed to redirect... the value of `$link.attr('#openModalA')` is `undefined` as this function is trying to read the value of attribute `'#openModalA'` from your link, and this attribute does not exist. Setting the value of `window.location` is enough to redirect. I will update the answer once more with the redirect – The Fabio Aug 21 '15 at 12:27

How to display a HTML modal, depending on result of Javascript/AJAX database call

1 Answers1