www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to make Javascript work inside a page called with AJAX?

Hybrid View

  1. #1
    Join Date
    Jun 2011
    Posts
    2

    How to make Javascript work inside a page called with AJAX?

    Hello guys,

    I am using a form validation class I got from the internet. Now I have a main page wherein I have a <div id="form"></div> that, using AJAX, displays other pages with forms like textboxes, etc. for a user to input.


    Here is the code for my main page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Community Mapping and Profiling System - Home</title>
            <link rel="stylesheet" type="text/css" href="../mainDesign.css" />
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">  
            </script>
            <script language="JavaScript" src="../Javascript/validation.js" type="text/javascript" xml:space="preserve"></script>
        </head>
        <body onload="initialize()">
        <center>
            <table class="center" width="1200">
                <tr>
                    <td align="right" colspan="6" class="greeting">Welcome, <?php echo $user ?>! <a href="../Login/dLogout.php">Logout</a></td>
                </tr>
                <tr>
                    <td>
                        <?php include("../Header/headerPO.php"); ?>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="1200" class="white">
                            <tr>
                                <td valign="top" align="center" width="200">
                                    <form name="myform2">
                                              SOME TABLE HERE WITH CHECKBOXES (deleted it cause it is too long)
                                    </form>
                                </td>
                                <td valign="top" align="center">
                                  <div id="map_canvas"></div>
                                </td>
                                <td valign="top" width="400" align="left">       
                                  <div id="form">
                                      Click the map where you want to add information.
                                  </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td><?php include("../Header/footer.php"); ?></td>
                </tr> 
            </table>
        </center>
        </body>
    </html>
    Then this is an example page of what goes into to the <div id="form"></div>
    Code:
    <form id="myform" name="myform" action="dAddThreat.php?lng=<?php echo $lng; ?>&lat=<?php echo $lat; ?>" method="post">
        <table>
            <tr>
                <td colspan="3"><font color="red">* - Required Fields</font></td>
            </tr>
            <tr>
                <th colspan="2" align="center" class="sidemenu">Add Possible Threats</th>
            </tr>
            <tr>
                <td align="right">Type:</td>
                <td align="left">
                    <select name="threatList" style="width:99%;">
                        <?php getDropdown(); ?>
                    </select>
                </td>
                <td><font color="red">*</font></td>
            </tr>
            <tr>
                <td align="right">Name:</td>
                <td align="left">
                    <input type="text" name="txtName" maxlength="50" style="width:99%;" />
                </td>
                <td><font color="red">*</font></td>
            </tr>
            <tr>
                <td align="right">Address:</td>
                <td align="left">
                    <textarea name="txtAddress" style="resize: none; width: 300px; height: 150px; white-space: nowrap;">
                    </textarea>
                </td>
                <td><font color="red">*</font></td>
            </tr>
            <tr>
                <td align="right">Notes:</td>
                <td align="left">
                    <textarea name="txtNotes" style="resize: none; width: 300px; height: 150px; white-space: nowrap;">
                    </textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="button" name="back" value="Back" onClick="show_pageAdd('back',<?php echo $lat; ?>,<?php echo $lng; ?>)" />
                    <input type="submit" name="s" value="Add" />
                </td>
            </tr>
        </table> 
    </form>
    <script language="JavaScript" type="text/javascript" xml:space="preserve">//<![CDATA[
          var frmvalidator  = new Validator("myform");
          //frmvalidator.EnableOnPageErrorDisplaySingleBox();
          frmvalidator.EnableMsgsTogether();
    
          frmvalidator.addValidation("txtName", "req", "Please enter a name.");
    
        //]]>
    </script>
    With this, the form still submits even thought the textbox "txtName" is empty. I have used this form validation for every project I developed and I know that this would work in a solo page (no AJAX calls to display it in <div> or whatsoever)

    I hope you get what my question is! Please help me!! I am desperate!! Thanks!!

  2. #2
    Join Date
    Jun 2011
    Posts
    23
    Heh.. I tried that yesterday, and it didn't work.
    I can give you an explanation, but it is based purely on my logic and some minor tests, and not on any prior knowledge.

    AJAX loads the whole HTML code, everything, but only after the page loads.
    As far as I know, Javascript added to the HTML after the page load simply doesn't work...

  3. #3
    Join Date
    Jan 2009
    Posts
    40
    I think I know what you're sayin, basically, aside from validating the fields, should that fail, the form shouldn't submit.

    I'd use jQuery (as you've declared in your scripts), and add an id to the submit button, with code like:

    Code:
    $('#submit').click(function(e){
    	e.preventDefault();
    
    	// rest of your validation code...
    
    	// validates?
    	if (canSubmit) {
    		$('#myform').submit();
    	}
    });
    Hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles