Passing a variable from onclick to ajax

Question

i am trying to passing a variable (region) from an onclick element to an ajax-function. I am using PHP, SQL and the plugin http://t4t5.github.io/sweetalert/

Here is my Code in the head of an index.php

   <script type"text/javascript">
  function save(){
      $.ajax({
          type: "POST",
          url: "addlandtovisited.php",
          data: {region: region},
          success: function(data) {
              alert("Ajax save executed!");
          }
      });
  }
</script>

<script>
  jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
      map: 'world_en',
      backgroundColor: '#333333',
      color: '#ffffff',
      hoverOpacity: 0.7,
      selectedColor: '#666666',
      enableZoom: true,
      showTooltip: true,
      scaleColors: ['#C8EEFF', '#006491'],
      values: sample_data,
      normalizeFunction: 'polynomial',

      onRegionClick: function (element, code, region) {
        var boton = "button";
        swal({   
              title: ''+region,  
              showCancelButton: true, 
              showConfirmButton: false, 
              text: '<a href="" onclick="save(region)">test</a>',

              html: true 
        });

      }
    });
  });
</script>

The addlandtovisited.php:

<?php
if(isset($_POST['region'])){ 
?>

When i set a string to the ajax-function and delete the region from save(region), it works fine:

data: {region: "TEST"},

text: '<a href="" onclick="save()">test</a>',

BTW, you should bind event using unobstrusive js method, not setting onclick attribute in HTML markup — A. Wolff, Feb 07 '16 at 12:27

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

0

As this thread suggests, there are some issues with the sweetalert repo. For example, I could not make the swal render html text in the body. Switching to sweetalert2 and applying the patch the thread mentions might be a good idea.

I would suggest you use the confirm button instead of creating your own link inside the body of the swal. For example:

swal({
  title: '' + region,
  showCancelButton: true,
  showConfirmButton: true,
  confirmButtonText: "save",
  text: "anything",
  html: true

}, function() { // save button callback
  save(region);
});

Don't forget to add the region parameter to your save() method : save(region).

edited May 23 '17 at 12:15

Community

1
1

answered Feb 07 '16 at 12:35

Derlin

9,572
2
32
53

Thx for your answer. The reason why i use the a-tag for onclick is that i need two links/buttons in the popup. that isnt supported by sweetalert. anyway. i upgraded to v2 and did your changes. Now i get the error that region is not defined (Uncaught ReferenceError: region is not definedsave) – Feb 07 '16 at 13:05
give me a jsfiddle and I will have a look – Derlin Feb 07 '16 at 13:46

Passing a variable from onclick to ajax

1 Answers1