Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,072
    Thanks
    4
    Thanked 8 Times in 8 Posts

    form loaded into div via ajax and then submits via ajax

    I have a page with 2 divs. The left div(EmployeeList) contains a list of names. When one of the names in the list is clicked the persons information is displayed in the right div(EmployeeData). If there is a need to edit the persons information, the manager can click a link in the right div that changes the content in that div to be an editable form. Once done editing the info the manager should be able to click the submit button whereupon the updated info should now show in that div. And therein lies my problem. Whenever the button is clicked it wants to take to a new page but I do not want it to move off of this page.

    What I am trying to accomplish is to have the form submit via ajax and stay within that div. I thought jQuery would be the way to accomplish it but i am not able to get it to work.


    The HTML
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Main Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/scripts/admin.js"></script>
    <script type="text/javascript" src="../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.employee.js"></script>
    </head>
    <body>
    	<div id="header">
    		<img src="images/cri.png" />
    		<div id="login">
    			<!--#include file="includes/login.asp"-->
    		</div>
    	</div>
    	<div id="content">
    		<div id="tabs">
    			<!--#include file="includes/tabbar.asp"-->
    		</div>
                              <br />
    		<div id="EmployeeList">
    			
    			<%some asp coding here%>
    		</div>
    		<div id="EmployeeData">
    		
    		</div>
    		<div style="clear:both;">&nbsp;</div>
    	</div>
    	<div id="footer">
    		<!--#include file="includes/footer.htm"-->
    	</div>
    </body>
    </html>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    add target=hidden to the form tag, and the following code to your <body>

    Code:
    <iframe style=display:none id=hidden name=hidden></iframe>
    use the onsubmit() event to end the editing procedure and return the view to the pre-edit state.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    miranda (04-12-2013)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well this is a client side code issue and you are showing your server side source code. we cant see the form and we cant see the js you have already applied. Please show at least a copy of the form's source hml and your currently applied js that relates to the form

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by rnd me View Post
    add target=hidden to the form tag, and the following code to your <body>

    Code:
    <iframe style=display:none id=hidden name=hidden></iframe>
    use the onsubmit() event to end the editing procedure and return the view to the pre-edit state.
    op already is using jQuery, why bother with an iframe?

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by DanInMa View Post
    op already is using jQuery, why bother with an iframe?
    what does jQuery have to do with anything? is converting a form to ajax is going to be easier than adding two static HTML chunks?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,072
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by DanInMa View Post
    well this is a client side code issue and you are showing your server side source code. we cant see the form and we cant see the js you have already applied. Please show at least a copy of the form's source hml and your currently applied js that relates to the form
    I am showing the html from the calling page. Which definitley not what i consider server side code (asp, or php code). do you want to see the HTML that is placed in the EmployeeData div?

    BTW i tried jQuery but i am not at all familiar with it. It did not work.

  • #7
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,072
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by rnd me View Post
    add target=hidden to the form tag, and the following code to your <body>

    Code:
    <iframe style=display:none id=hidden name=hidden></iframe>
    use the onsubmit() event to end the editing procedure and return the view to the pre-edit state.
    Beautiful!! worked perfectly!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •