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
facybox.js
peter_coopAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
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
 

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

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Posting the JS from the plugin is fairly useless

Instead post a URL with your problem or the html (view-source) of your form/link

For example

<a href="javascript:sometuff()">somestuff</a>
will not work the same as
<a href="#" onClick="sometuff(); return false">somestuff</a>
0
 
Michel PlungjanIT ExpertCommented:
So you have

             <a href="somephp.php" rel="facybox">View php result in the facybox</a>

?



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
peter_coopAuthor Commented:
i have uploaded a file with the various pieces of the form etc. i the edit function is the first called from an onpress event. if you need the php file, let me know. many thanks

PS. mplungjan

the reason for posting the facybox js code is because i was informed that there may be something in there from stopping it working. for example, it works from a normal popup. thanks
html-js-code.txt
0
 
Michel PlungjanIT ExpertCommented:
Do you have this on a site somewhere?

One thing I immediately suggest you remove is
name="submit"
which may interefere with a subsequent
form.submit()
0
 
Michel PlungjanIT ExpertCommented:
What I also see is that you use jQuery to submit the form AND also facy.

Facy does its own ajax
0
 
peter_coopAuthor Commented:
so where do i start mplungjan in getting this to work mplungjan? many thanks
0
 
Michel PlungjanIT ExpertCommented:
ajaxForm seems to be a plugin you ALSO use?
0
 
Michel PlungjanIT ExpertCommented:
You need to do something like this and ONLY this

// bind form using ajaxForm 
    	$('#feditform').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: 'fileeditform',
        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() { 
          jQuery.facybox({ div: '#fileeditform' }); 
        }
    });

Open in new window

0
 
peter_coopAuthor Commented:
@mplungjan

still displays result in php page? also, where does it ref the div #f2 to display the results? i am only learning so i need all the guidance i can get in realtion to what you said i have changed submit name and also from your comments, i do not need to use jquery form plugin? thanks
0
 
Michel PlungjanIT ExpertCommented:
What I mean is you have THREE ways of submitting your form in ONE page
1: jQuery ajax
2. form plugin ajaxForm
3. facybox can also ajax.

Of those you have set up TWO ajax, of which ONE is not active, but is the one you apply the facybox to in case of success and the other one just fades in f2
None of them are applied when the document has loaded.

I strongly suspect that NONE of the javascript you applied work (see the console in FireFox) and what you see is simply the result of a standard form submit.

So.

Make a new page.

Have the form there without anything fancy and have a div called f2
add the jquery and form plugin and leave the facybox for the time being.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script>
  
<script type="text/javascript">
$(document).ready(function() { // when the page loads
// bind form using ajaxForm 
  $('#feditform').ajaxForm({ 
    // target identifies the element(s) to update with the server response 
    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'); 
    }
  });
});
</script>
</head>
<body>
<form id="feditform" action="fileajax.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" type="hidden" value="somevalidid" />
  <label for="custref">File Reference #:</label><input id="custref" name="custref" class="text" type="text" value="" />  
  <label for="boxref">Box Reference #:  </label><input id="boxref" name="boxref" class="text" type="text" value="" />    
  <div id="f2"></div>
</fieldset><br />
<input class="submit" type="submit"value="Update" />
</form>
</div>

Open in new window

0
 
peter_coopAuthor Commented:
the form is hidden. how do i open it? that is what i was using facybox for? thanks
0
 
peter_coopAuthor Commented:
-> I strongly suspect that NONE of the javascript you applied work (see the console in FireFox) and what you see is simply the result of a standard form submit.

wrong. it is passing the form to fileajax.php and based on wether it is valid returns the result. for example. if the fileno is blank it will fire: You must enter a file reference

which is correct. if all data  is valid it will insert into db. thanks
0
 
Michel PlungjanIT ExpertCommented:
I cannot tell you. According to the snippets you posted the ajaxForm was not bound to the form at run time. If it was, then the fade should trigger and you say it did not

Please post the complete page or better, direct me to a URL.
0
 
peter_coopAuthor Commented:
here is the php page code. also, i am slightly confused as to how to proceed. what do i need to remove to get this working from what you have posted to get this working> thanks
fileajax.php-code.txt
0
 
Michel PlungjanIT ExpertCommented:
I'll look tomorrow. Bedtime here
0
 
peter_coopAuthor Commented:
thanks mplungjan don't forget me :-) thanks for your efforts
0
 
Michel PlungjanIT ExpertCommented:
1. test your php by calling it from the location bar with the various parameters to see if you get back correctly formed html/xml - I now see already that you may end up with the contact page inside the div if you call it with cancel
2. please try my code as posted. It should load the result from the php into the f2 div

Once 1 and 2 is done, we can continue to add the effects you seem to want
0
 
peter_coopAuthor Commented:
hi. this is what is coming back in the browser:

<body><div style="padding: 2px; background-color: rgb(255, 255, 170); color: rgb(255, 0, 0); font-size: 12px; font-weight: normal;">You must enter a file reference</div></body></html>

the initial html is firebug info.

i amended your code with just a name in the submit area so the php could catch it and it worked fine.


<html>
<head>
<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="../../js/jquery.form.js"></script>
  
<script type="text/javascript">
$(document).ready(function() { // when the page loads
// bind form using ajaxForm 
  $('#feditform').ajaxForm({ 
    // target identifies the element(s) to update with the server response 
    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'); 
    }
  });
});
</script>
</head>
<body>
<form id="feditform" action="fileajax.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" type="hidden" value="5751" />
  <label for="custref">File Reference #:</label><input id="custref" name="custref" class="text" type="text" value="" />  
  <label for="boxref">Box Reference #:  </label><input id="boxref" name="boxref" class="text" type="text" value="" />    
  <div id="f2"></div>
</fieldset><br />
<input class="submit" type="submit" name="fileedit" value="Update" />
</form>
</div>

</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
So this is not valid xml/html

<body><div style="padding: 2px; background-color: rgb(255,  255, 170); color: rgb(255, 0, 0); font-size: 12px; font-weight:  normal;">You must enter a file  reference</div></body></html>

you need the
<html>or to remove the </html>
So what is returned from the actual php and does the f2 get filled and fades in now?

0
 
peter_coopAuthor Commented:
in forefox this is the page source:

<div style="background-color:#ffa; padding:2px; color:#ff0000;font-size:12px;font-weight:normal">You must enter a file reference</div>

generated page source in code box

yes. in your example as i stated, it returns in form after slight modification. thanks


<html><head><style type="text/css" charset="utf-8">/* See license.txt for terms of usage */
.firebugCanvas {
    position:fixed;
    top: 0;
    left: 0;
    display:none;
    border: 0 none;
    margin: 0;
    padding: 0;
    outline: 0;
}

.firebugCanvas:before, .firebugCanvas:after {
    content: "";
}

.firebugHighlight {
    z-index: 2147483646;
    position: fixed;
    background-color: #3875d7;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugHighlight:before, .firebugHighlight:after {
    content: "";
}

.firebugLayoutBoxParent {
    z-index: 2147483646;
    position: fixed;
    background-color: transparent;
    border-top: 0 none;
    border-right: 1px dashed #E00 !important;
    border-bottom: 1px dashed #E00 !important;
    border-left: 0 none;
    margin: 0;
    padding: 0;
    outline: 0;
}

.firebugRuler {
    position: absolute;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugRuler:before, .firebugRuler:after {
    content: "";
}

.firebugRulerH {
    top: -15px;
    left: 0;
    width: 100%;
    height: 14px;
    background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA'%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5'%FC6%5DS%95pV%95%01%81%FF'%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0'%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC'%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6'%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2'%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB'%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") repeat-x;
    border-top: 1px solid #BBBBBB;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px solid #000000;
}

.firebugRulerV {
    top: 0;
    left: -15px;
    width: 14px;
    height: 100%;
    background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C'%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") repeat-y;
    border-left: 1px solid #BBBBBB;
    border-right: 1px solid #000000;
    border-bottom: 1px dashed #BBBBBB;
}

.overflowRulerX > .firebugRulerV {
    left: 0;
}

.overflowRulerY > .firebugRulerH {
    top: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
}

.firebugLayoutBox:before, .firebugLayoutBox:after {
    content: "";
}

.firebugLayoutBoxOffset {
    z-index: 2147483646;
    position: fixed;
    opacity: 0.8;
}

.firebugLayoutBoxMargin {
    background-color: #EDFF64;
}

.firebugLayoutBoxBorder {
    background-color: #666666;
}

.firebugLayoutBoxPadding {
    background-color: SlateBlue;
}

.firebugLayoutBoxContent {
    background-color: SkyBlue;
}

.firebugLayoutLine {
    z-index: 2147483646;
    background-color: #000000;
    opacity: 0.4;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugLayoutLine:before, .firebugLayoutLine:after {
    content: "";
}

.firebugLayoutLineLeft, .firebugLayoutLineRight {
    position: fixed;
    width: 1px;
    height: 100%;
}

.firebugLayoutLineTop, .firebugLayoutLineBottom {
    position: fixed;
    width: 100%;
    height: 1px;
}

.firebugLayoutLineTop {
    margin-top: -1px;
    border-top: 1px solid #999999;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999;
}

.firebugLayoutLineLeft {
    margin-left: -1px;
    border-left: 1px solid #999999;
}

.fbProxyElement {
    position: absolute;
    background-color: transparent;
    z-index: 2147483646;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}
</style></head><body><div style="padding: 2px; background-color: rgb(255, 255, 170); color: rgb(255, 0, 0); font-size: 12px; font-weight: normal;">You must enter a file reference</div></body></html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I do not understand what you are pasting.

I would expect to see
<form:
.
.
<div id="f2"><div style="background-color:#ffa; padding:2px; color:#ff0000;font-size:12px;font-weight:normal">You must enter a file reference</div></div>

.

.
Or are you just posting the firebug view-source of what is returned?
0
 
peter_coopAuthor Commented:
yes. that is the html that is generated from fileajax.php. there is no form entry because that is handled by form plugin. cheers
0
 
Michel PlungjanIT ExpertCommented:
So what is needed now?

Are you happy that the page shows the comment?
0
 
peter_coopAuthor Commented:
yes. to try and simplify this. all i need to do is find a way to open the form in some type of popup because the form is hidden. thanks
0
 
Michel PlungjanIT ExpertCommented:
Sorry, Can you list what the user sees when he comes to your site and what he then does and when the form should show?
0
 
peter_coopAuthor Commented:
please refer to  ID: 33510432 for the edit function that i use with this form.

1) user clicks edit button which facybox opens with fields completed from above call. which opens the hidden form, 'fileeditform'.

2) the user then makes any edits then the update button in the form sends to fileajax.php for the filtering such as if cusref ='' then send error to #f2.

that is basically it. as i think i said earlier, it works from a normal form just not in facybox. thanks
0
 
peter_coopAuthor Commented:
any further help with this or have i left something out? thanks
0
 
Michel PlungjanIT ExpertCommented:
I will look later.
I am quite busy, sorry
0
 
peter_coopAuthor Commented:
sorry. course. no problem and thank you
0
 
peter_coopAuthor Commented:
hi. as i said in my earlier post. that is why i posted the js for facybox
0
 
Michel PlungjanIT ExpertCommented:
yes, but that needs deeper investigation. At least I now have examples to test. I may not find why. I already looked at generated source and did not see anything special
0
 
peter_coopAuthor Commented:
ok. i shall award the points and if you find a solution perhaps you could add to this question? many thanks for all your efforts and patience. have a good day.
0
 
peter_coopAuthor Commented:
thank you once again
0
 
Michel PlungjanIT ExpertCommented:
I'll try to find out why
0
 
peter_coopAuthor Commented:
thank you
0
 
Michel PlungjanIT ExpertCommented:
No luck so far :(
0
 
peter_coopAuthor Commented:
thank you for looking
0
 
Michel PlungjanIT ExpertCommented:
Here.

Finally

http://plungjan.name/eetest/facy3.html

<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">
$(document).ready(function() { // when the page loads
  $('#formLink').click(function () {
    $('#formDiv').fadeIn('slow');
    $('#feditform').ajaxForm({ 
      // 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() { 
        alert('hurra');
          $('#f2').fadeIn('slow'); // not currently hidden but will be
        }
      });
    return false;
  });
});
</script>
</head>
<body>

<a id="formLink" href="#">Show form</a> 
<div id="formDiv" style="display:none">
<form id="feditform" action="http://plungjan.name/eetest/thanks.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" type="hidden" value="5751" />
  <label for="custref">File Reference #:</label><input id="custref" name="custref" class="text" type="text" value="" />  
  <label for="boxref">Box Reference #:  </label><input id="boxref" name="boxref" class="text" type="text" value="" />    



</fieldset><br />
<input class="submit" type="submit" name="fileedit" value="Update" />
</form>
</div>
<div id="f2">This needs to be updated when the form is submitted!!!</div>

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.