CODEWITHSUNDEEP
jqueryhtmlajax
trevoray
trevoray

Reputation: 317

Submitting form without reloading page

EDIT: I see AJAX is the answer. I'm still wondering if there is a simpler way than reprogramming the system. The code is server side that grabs only two parameters, the month and the year. Below is the server side code that gets these parameters on page load. Are we still thinking a complte AJAX rewrite is needed?

      ' Set the Month and Year
      nMonth = Request.QueryString("nMonth")
      nYear = Request.QueryString("nYear")
      if nMonth = "" then nMonth = Month(dtDate)
      if nYear = "" then nYear = Year(dtDate)

      ' Set the date to the first of the current month
      dtDate = DateSerial(nYear, nMonth, 1)

      If strFilter = "" OR strFilter = "0" Then 
          newFilter = "0"
      Else 
          newFilter = strFilter
      End If 



      Set dbConn = GetDataConnection
      strSQL = "GetSchedule " & nMonth & ", " & nYear & ", " & nSite & ", '" & SQLSafe(newFilter) & "' "
      'Response.Write(strSQL)
      'Response.End
      Set rs = dbConn.Execute (strSQL)
      %>


      <form method="get" name="DateSelect" action="<%=curPageName()%>">

I need some help thinking outside the box or maybe inside the box. I may be overlooking something incredibly simple, but I need assistance nonetheless. I have a calendar setup on my main home page. It has a function built in that goes to previous months and future months. Right now, it is built to reload the page to display these previous/next months. Without having to reprogram the entire system, which I did not create, is there a way to access previous and next months without reloading the page with the parameters in the URL?

Here is the code that links to the previous and next months:

<form method="get" name="DateSelect" action="index.asp">
    <table width=85%>
        <tr>
            <td align=center><a class="leftArrow navigation" href="index.asp?nMonth=4&nYear=2015">&lt; </a>
                <span id="calendarDay">May &nbsp;2015</span>
                <a class="rightArrow navigation" href="index.asp?nMonth=6&nYear=2015"> &gt;</a>
            </td>
        </tr>
    </table>
</form>

Upvotes: 1

Views: 172

Answers (4)

lem2802
lem2802

Reputation: 1162

you can use JQuery $.ajax, if not you can build your own implementation:

<script type="text/javascript">
    function callasync(url, id_contenedor) {
        var ajax = false;

        if (window.XMLHttpRequest) {
            //Mozilla, Safari, etc 
            ajax = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //IE       
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                //Versión antigua    
                try {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
        else
            return false;

        if (id_contenedor != '') {
            document.getElementById(id_contenedor).innerHTML = "<table width='100%' height='100%'><tr><td style='text-align: center; vertical-align: center;'><a class='LabelInfo'>Whait...</a><br /><img src='Imagenes/Esperar.gif' /></td></tr></table>";
        }

        ajax.onreadystatechange = function () {
            pageload(ajax, id_contenedor);
        }

        ajax.open('GET', url, true);
        ajax.send(null);
    }

    function pageload(ajax, id_contenedor) {
        if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf("http") == -1))
            if (id_contenedor != '') {
                document.getElementById(id_contenedor).innerHTML = ajax.responseText;
            }
    }
</script>

Upvotes: 1

Katana314
Katana314

Reputation: 8610

To answer your more direct question, which I'll summarize here:

Without having to reprogram the entire system, which I did not create, is there a way to access previous and next months without reloading the page with the parameters in the URL?

No. If the month/day generation is done using a serverside language like PHP, there's no perfectly simple way to retool that to be asynchronous.

The easiest conversion method I can think of is taking the date-generation code, and putting it in a simpler container that your AJAX request returns as HTML, and then replaces the HTML on the page. Keep in mind, this may reset any event listeners like buttons. But, I'll forewarn you that even that method may involve fixing some nitty-gritty parts of the existing code.

Upvotes: 1

Akshay Khale
Akshay Khale

Reputation: 8361

If you don't want to reload page after submitting form then you should submit the form using Ajax

For that you should use Ajax form plugin

Check this example

    <form id="myForm" action="comment.php" method="post"> 
            Name: <input type="text" name="name" /> 
            Comment: <textarea name="comment"></textarea> 
            <input type="submit" value="Submit Comment" />  
    </form>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script>

Upvotes: 0

kspearrin
kspearrin

Reputation: 10738

You can use AJAX to perform requests/responses to the server without reloading the page. These requests/responses usually communicate with JSON data.

As far as your concerns over having to "reprogram the entire system", implementing AJAX is not a simple plug-in and will require you to write some modifications to the code.

You can look into something like jQuery or the jQuery Form Plugin to make AJAX communication easier.

Upvotes: 1

Related Questions