Solved

How do I call MVC Controller from with Javascript function

Posted on 2012-03-28
5
1,925 Views
Last Modified: 2012-04-10
I have a onclick event on a submit button in my CI app.  So when user clicks submit, it goes to my js function that disables the button, but it does not continue processing.  I used this “document.forms[“mainFrm”].submit();”, but because of the way the code is written I need it to go directly to a controller and finish processing.

So how do I call a CI controller from my js function?

Here is the function that is being called onClick:
function disableWhenSubmit()
{
 alert ("You did get here");
 var holdBtnElement = document.getElementById('btn_Add');
 holdBtnElement.disabled = true;
 holdBtnElement.value = "sending ...";
 //document.forms["createRequestForm"].submit();
 <?= base_url();?>index.php/request"; //this is what I am working on
} 

Open in new window


and here is the button:
<input type="submit" id="btn_Add" name="btn_Add" value="Submit"> 

Open in new window

0
Comment
Question by:justmelat
  • 3
  • 2
5 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I may not be understanding this correctly, but it looks like you've decoupled the front end from the server-side action script, yet you want to depend on the success of the server-side action script.  I think that is a computer-science no-no.  Can you please explain in plain language what effect you are trying to achieve and why?  Maybe there is a predictable design pattern that can meet your needs.
0
 
LVL 1

Author Comment

by:justmelat
Comment Utility
Hi Ray:

When I hit the submit button, I want to disable it immediately, change it's display value to Sending...[just a visual for the client] then I want the button to continue doing what it was set to do which was to call the controller and run a bunch of functions to send the data on.  

Currently, you hit submit, controller is called, all functions run - but the problem is, depending on the issues with the client's browser and/or network, the user "may" be able to hit the submit button again and again be of sluggishness.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
One strategy is to disable multiple submits of the same data.  Have a quick look at this.
<?php // RAY_multi_submit.php
error_reporting(E_ALL);


// PREVENT MULTIPLE SUBMISSIONS DUE TO REPEATED REFRESH, CLICKS ON SUBMIT BUTTON, OR FIRING THE BACK BUTTON
// EXAMPLE:
//    if ( multi_submit() )
//    {
//       handle error
//    }
//    else
//    {
//       normal processing
//    }


// ALWAYS START THE PHP SESSION ON EVERY PAGE
session_start();



// A FUNCTION TO RETURN TRUE OR FALSE ABOUT MULTI-SUBMIT CONDITIONS
function multi_submit($type="POST")
{
    // MAKE THE FUNCTION WORK FOR EITHER GET OR POST SUBMITS
    $input_array = (strtoupper($type) == "GET") ? $_GET : $_POST;

    // GATHER THE CONTENTS OF ALL THE SUBMITTED FIELDS AND MAKE A MESSAGE DIGEST
    $string = NULL;
    foreach ($input_array as $val)
    {
        // CONCATENATE ALL SUBMITTED VALUES
        $string .= $val;
    }
    $string = md5($string);

    // IF THE SESSION VARIABLE IS NOT SET THIS IS NOT A MULTI-SUBMIT
    if (!isset($_SESSION["_multi_submit"]))
    {
        // SAVE THE SUBMITTED DATA MESSAGE DIGEST
        $_SESSION['_multi_submit'] = $string;
        return FALSE;
    }

    // IF THE SESSION DATA MATCHES THE MESSAGE DIGEST THIS IS A MULTI-SUBMIT
    if ($_SESSION['_multi_submit'] === $string)
    {
        return TRUE;
    }
    else
    {
        // SAVE THE MESSAGE DIGEST TO DETECT FUTURE MULTI-SUBMIT
        $_SESSION['_multi_submit'] = $string;
        return FALSE;
    }
}



// SHOW HOW THIS IS DONE
if (!empty($_POST))
{
    if (multi_submit())
    {
        die("ALREADY GOT THAT");
    }
}



// CREATE THE FORM FOR THE DEMONSTRATION
$form = <<<FORM
<form method="post">
ENTER SOMETHING, THEN REENTER IT
<input name="foo" />
<input type="submit">
</form>
FORM;

echo $form;

Open in new window

0
 
LVL 1

Author Comment

by:justmelat
Comment Utility
Hi Ray:

thanks for the idea:

this seems to be working, I just hid the submit button upon click using jquery: $(document).ready(function(){ $("#btnSubmitJob").click(function(){ $(this).hide(); $("#btnSubmitJob").before("Processing...."); }); }); –
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
You might want to do both - hide the button and also user server-side programming to avoid re-processing the data.  I am wondering what might happen if the client fiddled with the back and forward browser controls?
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now