Question : code help needed

hi
i have started to learn jquery + ajax + js and have been trying to solve a problem i have for days. hence the post. i found a lightbox type script that would suit my needs for updating form data etc. however, when the data tries to write the success data to the div on the form, it goes to the calling php page and echoes the data there. i have included the js file and would be grateful if someone could tell me why this is happening? a friend said that it may be using an iframe? that is why it is not working. if you need any further info, like form, php etc i shall be happy to post it. many thanks

Attachments:

facybox.js (13 KB) (File Type Details)

box javascript file

Answer : code help needed

I have no idea why this does not work

It is the ajaxForm that does not take at all

When I remove facybox, it works

http://plungjan.name/eetest/facy.html
http://plungjan.name/eetest/facy1.html

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:

           
           
             <html><head>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

  <script src="http://www.bitbonsai.com/facybox/facybox.js" type="text/javascript"></script>
 
 <script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>
  
<script type="text/javascript">

var options = { 
    // target identifies the element(s) to update with the server response
    beforeSubmit:function() { alert('yes') }, 
    target: '#f2',
    resetForm: false,
    // 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() { 
      $('#f2').fadeIn('slow'); 
    }
  };

$(document).ready(function() { // when the page loads
try{
// bind form using ajaxForm 
  $('#feditform').ajaxForm(options);
}
catch(e) {alert(e.message)}   

});
</script>
</head><body>

<a href="#" onclick="jQuery.facybox({ div: '#formDiv' }); return false">Show form</a>
<div id="formDiv" style="display: none;">
<form id="feditform" action="http://plungjan.name/eetest/dump.php" method="post" class="webform">  
<fieldset>  
  <legend>Update File/Box #</legend>
  <br> 
  <div id="dataText">You can edit either the Box # or File #</div>
  <input id="id" name="id" value="5751" type="hidden">
  <label for="custref">File Reference #:</label><input id="custref" name="custref" class="text" value="" type="text">  
  <label for="boxref">Box Reference #:  </label><input id="boxref" name="boxref" class="text" value="" type="text">    

</fieldset><br>
<input class="submit" name="fileedit" value="Update" type="submit">
</form>
</div>
<div id="f2"></div>

</body></html>

           
         