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

**jujusauga** · 06-21-2011 12:42 PM

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!!

**AJAXnub** · 06-21-2011 02:00 PM

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...

**Jester** · 06-21-2011 10:37 PM

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: How to make Javascript work inside a page called with AJAX?

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions