CODEWITHSUNDEEP
jqueryajax
yuri1000
yuri1000

Reputation: 361

jQuery Ajax triggering 2 events together from single click

I barely know jquery ajax. I am trying to trigger 2 events together from a single click. But somehow its not working. I do not understand where I am lacking.

$(document).ready(function() {
  $("#trigger").click(function(e) {
    e.preventDefault();
    var text = $(this).data('text');
    var formname = $(this).data('formname');
    var agree = confirm(text);
    if (agree)
      var getcururl = window.location.href;
    var testid = $('#testid').val();
    $.ajax({
      method: 'POST',
      url: 'test.php',
      data: {
        getcururl: getcururl,
        testid: testid
      },
      success: function(data) {
        if (data != '') {
          alert(data)
        }
      },
      error: function(data) {
        alert('Something went wrong, Please contact admin');
      }
    });
  });
  else
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="trigger" href="#" data-text="Are you sure?" data-formname="testform">Click</a>
<input type="hidden" id="testid" value="myname" />

Looking for advice about the issue am facing. If am running just ajax post without confirm alert, then it works, I want to show the alert before user clicks on that button and then process the ajax post upon agree.

Am I doing correct?

JSFIDDLE DEMO

Upvotes: 1

Views: 66

Answers (4)

roshini
roshini

Reputation: 112

yes you miss placed or not closed if condition braces following is working code..

<a id="trigger" href="#" data-text="Are you sure?" data-formname="testform">Click</a><input type="hidden" id="testid" value="myname" />

js code is...

$(document).ready(function() {
$("#trigger").click(function() {        
var text = $(this).data('text');
var formname = $(this).data('formname');
var agree = confirm(text);
if (agree){
var getcururl = window.location.href;
var testid = $('#testid').val();
$.ajax({
method: 'POST',
url: 'test.php',
data: {
getcururl: getcururl,
testid: testid
},
success: function(data) {
if (data != '') {
alert(data)
}
},
error: function(data) {
alert('Something went wrong, Please contact admin');
}
});
} else
return false;
});
});

Upvotes: 0

spaniol6
spaniol6

Reputation: 606

You have some syntax errors. There is more than one line after your if statement so you have to close it in brackets. Your else block was also outside of $().click's callback function

$(document).ready(function() {
  $("#trigger").click(function(e) {
    e.preventDefault();
    var text = $(this).data('text');
    var formname = $(this).data('formname');
    var agree = confirm(text);
    if (agree) {
      var getcururl = window.location.href;
      var testid = $('#testid').val();
      $.ajax({
        method: 'POST',
        url: 'test.php',
        data: {
          getcururl: getcururl,
          testid: testid
        },
        success: function(data) {
          if (data != '') {
            alert(data)
          }
        },
        error: function(data) {
          alert('Something went wrong, Please contact admin');
        }
      });
    } else
      return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="trigger" href="#" data-text="Are you sure?" data-formname="testform">Click</a>
<input type="hidden" id="testid" value="myname" />

Upvotes: 1

Gregg Duncan
Gregg Duncan

Reputation: 2725

It may work if you move your "else" statment to where it belongs. but the better way would be break it into multiple functions. This makes it easier to understand and maintain.

$(document).ready(function() {
        $("#trigger").click(function(e) {
            var text = $(this).data('text');
            var agree = confirm(text);
            if (!agree){
                return false;
            }
            runAjax();
        });

    });

function runAjax(){
    var getcururl = window.location.href;
    var testid = $('#testid').val();
    $.ajax({
        method: 'POST',
        url: 'test.php',
        data: {
            getcururl: getcururl,
            testid: testid
        },
        success: function(data) {
            if (data != '') {
                alert(data)
            }
        },
        error: function(data) {
            alert('Something went wrong, Please contact admin');
        }
    });
}

Upvotes: 4

Rahul Gavande
Rahul Gavande

Reputation: 324

You missing brackets out there in if

I can see syntax error:

You should do following

$(document).ready(function() {
  $("#trigger").click(function(e) {
    e.preventDefault();
    var text = $(this).data('text');
    var formname = $(this).data('formname');
    var agree = confirm(text);
    if (agree){
        var getcururl = window.location.href;
        var testid = $('#testid').val();
        $.ajax({
            method: 'POST',
            url: 'test.php',
            data: {
            getcururl: getcururl,
            testid: testid
         },
         success: function(data) {
            if (data != '') {
            alert(data)
          }
         },
         error: function(data) {
            alert('Something went wrong, Please contact admin');
         }
      });
     });
  }
  else
  {
       return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="trigger" href="#" data-text="Are you sure?" data-formname="testform">Click</a>
<input type="hidden" id="testid" value="myname" />

Upvotes: 0

Related Questions