Boostrap 3 Modal + jQuery with "whois script"

Question

I had this working at some point but it sttoped working and I can't figure out why.

Once I click button, modal will open with text loading... and nothing else is happening. I was able to see whois data for selected domain. This is what I should be able to see in modal: http://demo.whmcs.com/whois.php?domain=test.info

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Domain Checker</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function viewWhois(domain) {
    jQuery("#modalWhoisLoader").removeClass('hidden').show();
    jQuery("#modalWhoisBody").hide();
    jQuery("#whoisDomainName").html(domain);
    jQuery("#modalWhois").modal('show');
    jQuery.post("http://demo.whmcs.com/whois.php", "domain=" + domain,
        function(data) {
            jQuery("#modalWhoisBody").html(data);
            jQuery("#modalWhoisLoader").hide();
            jQuery("#modalWhoisBody").show();
        });
}
</script>
</head>
<body>

<button type="button" onclick="viewWhois('test.info')" class="btn btn-default btn-sm">WHOIS</button>

<div class="modal fade" id="modalWhois">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalWhoisTitle">
                    WHOIS Results for <span id="whoisDomainName"></span>
                </h4>
            </div>
            <div class="modal-body text-center hidden" id="modalWhoisLoader">
                <p><i class="fa fa-spinner fa-spin"></i> Loading...</p>
            </div>
            <div class="modal-body" id="modalWhoisBody">
                            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                                            Close Window
                                    </button>
                            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

EDIT:

This is the correct code I'm using (I used http://demo.whmcs.com/whois.php only for purpose of this question):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function viewWhois(domain) {
    jQuery("#modalWhoisLoader").removeClass('hidden').show();
    jQuery("#modalWhoisBody").hide();
    jQuery("#whoisDomainName").html(domain);
    jQuery("#modalWhois").modal('show');
    jQuery.post("whois.php", "domain=" + domain,
        function(data) {
            jQuery("#modalWhoisBody").html(data);
            jQuery("#modalWhoisLoader").hide();
            jQuery("#modalWhoisBody").show();
        });
}
</script>

Why `jQuery.post("http://demo.whmcs.com/whois.php", "domain=" + domain,` gives no error, output or anything. I'm sure that somwhere I've made silly mistake as this was working before. — Solver, Aug 22 '15 at 18:27

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

If you look the Developer Tools of your browser you should see that, after opening the modal, you get a

XMLHttpRequest cannot load http://demo.whmcs.com/whois.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Basically, you are not allowed to call that URL because it does not accept cross domain requests (see here: Loading cross domain endpoint with jQuery AJAX ) .

When requesting a same domain resource, your example should work. Do you have a (non) working example?

Boostrap 3 Modal + jQuery with "whois script"

1 Answers1