简体   繁体   中英

onclick execute javascript function and return results in a div

First off, let me apologise if this is a duplicate but none of my searches left me any more enlightened than I am currently. That said, I am currently trying my hand at JavaScript/Ajax/jQuery and I have hit a slight snag.

I want to include a functionality check on my home page where users can test that their browsers are configured to allow JavaScript & cookies (I'm not overly concerned about making the code degradable if a user's browser doesn't allow for JavaScript & cookies as this site is for exclusive use of our company's clients and we, pretty much, dictate the terms and conditions for using our website).

Now, after a bit of research (GIYF and all that), it appears that the best way to do this would be to let JavaScript set the cookie, thereby killing two birds with one stone. Granted, we won't be able to narrow down the failure to "one or the other" but I am trying to keep this as simple (for me) as possible. Even so, I am not sure if I am going about this the right way. Here is the code from my .js file:

function error_reporting (level) {
 // http://kevin.vanzonneveld.net
 // +   original by: Brett Zamir (http://brett-zamir.me)
 return this.ini_set('error_reporting', level);

}

var set = $(document).getUrlParam('set');

if(set !== 'yes') {

  var date = new Date();
  var midnight = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);

  $.cookie('candcptest', 'ok', {

    expire: midnight,
    path: '/',
    domain: 'candcp.rossdb.net',
    secure: false

  }, function() {

    window.document.reload();

  });

} else {

  var candcptest = $.cookie('candcptest');

  if(candcptest !== undefined) {
    var ccptresult = 'Thank you.  Your browser is configured to allow JavaScript and accept cookies.  You may proceed with login';
  } else {
    var ccptresult = 'Thank you.  Unfortunately, your browser is not configured correctly.  Please check your settings or contact the Dev Team for assistance';
  }
};

(I had previously written a very basic test for allowing cookie in PHP and then modified that to create this so the above may be way off the mark in and of itself)

Now, ideally, I would like to use jQuery, as this seems like a task well-suited to it but, clearly, I have no idea how to go about this. This is what I have in my HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="styles/global.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.getUrlParam.js"></script>
    <script type="text/javascript">
      $(function() {
        $('a#ccpt').click('js/candcptest',function() {
          $('div#ccptresult').append(result);
        });
      });
    </script>
  </head>

  <body class="body">
    <table width="1000" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
      <tr>
        <td width="1000" height="545" align="center" valign="middle">
          <table border="0" align="center">
            <tr>
              <td width="750" height="150" align="center" class="text0down">
                This website makes use of JavaScript and cookies and it is essential that your browser is configured correctly in order for this website to work. If you are unsure if your browser is set up correctly, click <a href="#" class="text0down" id="ccpt">here</a> to test.
                <div id="ccptresult"></div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Now, the idea (just in case my js is so unintelligible that you can't figure out what I am trying to do) is that, when a user clicks the link (a#ccpt), the js will execute and the result (var result) will be displayed in the div (div#ccptresult).

I think it goes without saying that testing the page does absolutely nothing whatsoever so something is seriously not right but considering that, up until 7 days ago, I had never written a single line of js code, it's no surprise that my knowledge is nowhere near good enough to figure out where I have gone wrong on my own.

Any help would be greatly appreciated.

if i have understood correctly

$(function() {
        $('a#ccpt').click(function() {
          //execute the js function here
          $('div#ccptresult').append(result);
        });
      });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM