Solved

error in ajax function

Posted on 2010-08-14
8
385 Views
Last Modified: 2012-05-10
hi
when i run the following code i get an error of:

$("#addform").ajaxForm is not a function. because i am only just learning this language could someone show me why this is causing error. is it because i am not calling the form id directly but the div? many thanks
<script type="text/javascript">

function add() {

// prepare the form when the DOM is ready 

$(document).ready(function() { 

    // bind form using ajaxForm 

    $('#addform').ajaxForm({ 

        // target identifies the element(s) to update with the server response 

        target: '#htmlExampleTarget', 

 

        // success identifies the function to invoke when the server response 

        // has been received; here we apply a fade-in effect to the new content 

        success: function() { 

            $('#htmlExampleTarget').fadeIn('slow'); 

        } 

		

    }); 

});}



form

=================================================



<div id="addform" style="display:none;">

  <form action="filesadd.php" method="post" class="webform">

    <fieldset>

    <legend><span>Enter a File</span></legend>

    <label for="box">Select a Box</label>

    <select name="box">

      <option SELECTED VALUE="">Select a Box</option>

      <?php

do {  

?>

      <option value="<?php echo $row_Recordset1['boxref']?>"><?php echo $row_Recordset1['boxref']?></option>

      <?php

} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));

  $rows = mysql_num_rows($Recordset1);

  if($rows > 0) {

      mysql_data_seek($Recordset1, 0);

	  $row_Recordset1 = mysql_fetch_assoc($Recordset1);

  }

?>

      

    </select>

    <label for="fileno">File Number:</label>

    <input id="fileno" name="fileno" class="text" type="text" />

	<div id="htmlExampleTarget"></div>

    <label for="authorised">Authorised By:</label>

    <input name="authorised" type="text" class="text" id="authorised" value="<?php echo $_SESSION['kt_name_usr']; ?>" />

    </fieldset>

    <input class="submit" type="submit"  name="submit" value="Add File" />

  </form>

</div>

Open in new window

0
Comment
Question by:peter_coop
  • 4
  • 4
8 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Do you load the jquery.form plugin ? Do you have somewhere something like :


<script language="javascript" src="path/to/jquery.form.js"></script>

Open in new window

0
 

Author Comment

by:peter_coop
Comment Utility
hi leak. this is what i have and it is showing ok in firebug net.

<script type="text/javascript" src="/sample/admin/js/jquery.form.js"></script>
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Replace by the following and remove one after one to check when it stop to run


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css"> 
<link rel="stylesheet" href="../themes/jquery-ui-sub-tabs-smoothness.css" type="text/css"> 
<link rel="stylesheet" href="../jq-new.css" type="text/css"> 
<style type="text/css"> 
form { background: #DFEFFC; border: 5px solid #c5dbec; margin: 10px 0; padding: 20px }
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> 
<script type="text/javascript" src="../malsup-tabs-init.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>-->
<script type="text/javascript" src="http://jquery.malsup.com/form/download/jquery.form.js?v2.43"></script> 
 
<!-- 
<script type="text/javascript" src="jquery.form.js"></script>
--> 
<script type="text/javascript" src="malsup-form-demo.js"></script>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
Comment Utility
update :
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css"> 
<link rel="stylesheet" href="http://jquery.malsup.com/themes/jquery-ui-sub-tabs-smoothness.css" type="text/css"> 
<link rel="stylesheet" href="http://jquery.malsup.com/jq-new.css" type="text/css"> 
<style type="text/css"> 
form { background: #DFEFFC; border: 5px solid #c5dbec; margin: 10px 0; padding: 20px }
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> 
<script type="text/javascript" src="http://jquery.malsup.com/malsup-tabs-init.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>-->
<script type="text/javascript" src="http://jquery.malsup.com/form/download/jquery.form.js?v2.43"></script> 
 
<!-- 
<script type="text/javascript" src="jquery.form.js"></script>
--> 
<script type="text/javascript" src="http://jquery.malsup.com/form/malsup-form-demo.js"></script>

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:peter_coop
Comment Utility
leak. got it working of sorts. however the success callback is being shown in the page that the form sends to addfile.php and not the div <div id="htmlExampleTarget"></div> in theform? ie,
0
 

Author Comment

by:peter_coop
Comment Utility
here is the php code for filesadd.php
$sql = "SELECT custref FROM files WHERE custref = '$fileno' ";

$result = runSQL($sql) or die(mysql_error());

if (mysql_num_rows($result)>0){

   echo '<div style="background-color:#ffa; padding:20px">' . $fileno . 'Is already in the database' . '</div>';



}else{

   //insert into db;

   echo '<div style="background-color:#ffa; padding:20px">' . $fileno . 'Successfull' . '</div>';

Open in new window

0
 

Author Closing Comment

by:peter_coop
Comment Utility
thank you
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
You're welcome! Thanks for the points!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 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

10 Experts available now in Live!

Get 1:1 Help Now