Solved

code help needed

Posted on 2010-08-24
39
436 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:peter_coop
  • 20
  • 19
39 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
So you have

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

?



0
 

Author Comment

by:peter_coop
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
What I also see is that you use jQuery to submit the form AND also facy.

Facy does its own ajax
0
 

Author Comment

by:peter_coop
Comment Utility
so where do i start mplungjan in getting this to work mplungjan? many thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
ajaxForm seems to be a plugin you ALSO use?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
@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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
the form is hidden. how do i open it? that is what i was using facybox for? thanks
0
 

Author Comment

by:peter_coop
Comment Utility
-> 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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I'll look tomorrow. Bedtime here
0
 

Author Comment

by:peter_coop
Comment Utility
thanks mplungjan don't forget me :-) thanks for your efforts
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
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
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
So what is needed now?

Are you happy that the page shows the comment?
0
 

Author Comment

by:peter_coop
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
any further help with this or have i left something out? thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I will look later.
I am quite busy, sorry
0
 

Author Comment

by:peter_coop
Comment Utility
sorry. course. no problem and thank you
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
hi. as i said in my earlier post. that is why i posted the js for facybox
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:peter_coop
Comment Utility
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
 

Author Closing Comment

by:peter_coop
Comment Utility
thank you once again
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I'll try to find out why
0
 

Author Comment

by:peter_coop
Comment Utility
thank you
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
No luck so far :(
0
 

Author Comment

by:peter_coop
Comment Utility
thank you for looking
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)

763 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

6 Experts available now in Live!

Get 1:1 Help Now