2

I use Codeigniter and Bootstrap.

I have a button:

<a class="btn btn-success" id="btnid" href="http://site/controllerName/parameter">Text</a>

If I click to the button its call a controller with one parameter then the controller redirects to a site.

My question is that is there a way to call the controller with a parameter but skipping the redirection?

V. Mark
  • 195
  • 2
  • 4
  • 14

5 Answers5

4

Try following

$(document).ready(function(){ // Add your event handlers inside ready block
    $("#btnid").click(function(event) { // button event handler
          event.preventDefault(); // prevent page from redirecting
          $.ajax($(this).attr('href')).done(function(response) { // send call
             // after call 
           });
    });
});

For details refer to - ajax, preventDefault

Edit

As there are more than one link. You can use class selector. Currently, you have 2 classes btn and btn-success. You can use either of them, however, I will suggest you to add one more class let us say btn-api

Then update your click selector to

$(".btn-api").click(function(event)) {
      event.preventDefault(); // prevent page from redirecting
      $.ajax($(this).attr('href')).done(function(response) { // send call
         // after call 
       });
});
Nikhil Aggarwal
  • 28,197
  • 4
  • 43
  • 59
0

https://api.jquery.com/event.preventdefault/ - prevents the default action

$( "a" ).click(function( event ) {
  event.preventDefault();
}
Or Harel
  • 525
  • 1
  • 6
  • 13
  • Did you read this: _My question is that is there a way to call the controller with a parameter but skipping the redirection?_ – Rayon Dec 12 '15 at 19:51
  • @OrHarel - OP demands 2 things. 1. Send call. 2. Stop redirection. Your answer covers the 2nd point only. – Nikhil Aggarwal Dec 12 '15 at 19:55
0

You need to use event.preventDefault(); This is an exemple with just JavaScript (Not jQuery)

<script>
    function stopDefAction(evt) {
        evt.preventDefault();
    }

    document.getElementById('btnid').addEventListener(
        'click', stopDefAction, false
    );
</script>

You can find documentation and complete exemple here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Rombau
  • 59
  • 4
0

You can call a javascript method which does a ajax call. Then there will be no redirect.

<a class="btn btn-success" id="btnid" onclick="javascript:theFunction();" href="#">Text</a>

<script type="text/javascript">
    function theFunction () {
         event.preventDefault();
         // add your ajax call to the controller here e.g 
         $.ajax({
            url: "http://site/controllerName/parameter"
            }).done(function() {
                // action when the controller call returns 
            });
        }
</script>
unicorn2
  • 844
  • 13
  • 30
  • `onclick="javascript:theFunction();"` ? Why so ? – Rayon Dec 12 '15 at 19:57
  • Have a look at this answer I think it is well explained http://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-code – unicorn2 Dec 12 '15 at 20:12
  • Why to use inline js event binding ? Refer this: http://jsfiddle.net/rayon_1990/2zyshj4u/ – Rayon Dec 12 '15 at 20:16
  • Ah oki, yes I see now! No need then to hook the function to the onclick instead of the href. – unicorn2 Dec 12 '15 at 20:19
0

By default a click on the a link to a controller will either render this controller's view or redirect to another view. To stop redirecting, you must call the controller via AJAX. To fully understand this, lets see what happens when you don't use ajax:

  1. You click on the link which triggers the request.
  2. The request is routed to your controller.
  3. The controller processes the request. The ending line of the controller is something like $this->load->view('your-view');
  4. This loads the raw HTML after any view logic has been processed and sends it back to your browser via normal HTTP. This issues a redirect (or a refresh if it was the same page).

What AJAX does, is that it takes the data received in step 4, and makes it available in a variable via javascript. To see this, we can write a code snippet:

HTML

<a onclick="getAjaxData()" class="btn btn-success" id="btnid">Text</a>

The easiest way to use ajax is via JQuery. Javascript

    function getAjaxData(e) {
        // Make sure that the link default action doesnt occur.
        e.preventDefault();
        $.ajax({
            type: 'GET', // depending on the controller method.
            url: 'http://site/controllerName/parameter',
            success: function(data)
            {
                // The variable data contains the data returned from the controller.
            },
            error: function()
            {
                alert('Something went wrong!');
            }
        });

Now if you leave things as they are, the vairable data will contain the raw HTML returned from the controller. Usually if you will use AJAX, it is better to either return HTML snippets which you can append directly to your current HTML DOM, or return data in JSON format, which you can then process via javascript.

Omar Sourour
  • 399
  • 2
  • 8