Solved

code help needed

Posted on 2010-08-24
39
438 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
ID: 33510294
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
ID: 33510312
So you have

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

?



0
 

Author Comment

by:peter_coop
ID: 33510432
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
ID: 33510572
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
ID: 33510596
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
ID: 33510618
so where do i start mplungjan in getting this to work mplungjan? many thanks
0
 
LVL 75

Expert Comment

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

Expert Comment

by:Michel Plungjan
ID: 33510712
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
ID: 33510767
@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
ID: 33510887
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
ID: 33511001
the form is hidden. how do i open it? that is what i was using facybox for? thanks
0
 

Author Comment

by:peter_coop
ID: 33511024
-> 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
ID: 33511108
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
ID: 33511642
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
ID: 33514841
I'll look tomorrow. Bedtime here
0
 

Author Comment

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

Expert Comment

by:Michel Plungjan
ID: 33518462
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
ID: 33520476
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
ID: 33520502
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:peter_coop
ID: 33521235
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
ID: 33521269
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
ID: 33523689
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
ID: 33523919
So what is needed now?

Are you happy that the page shows the comment?
0
 

Author Comment

by:peter_coop
ID: 33524330
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
ID: 33524855
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
ID: 33525997
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
ID: 33531157
any further help with this or have i left something out? thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33531234
I will look later.
I am quite busy, sorry
0
 

Author Comment

by:peter_coop
ID: 33531777
sorry. course. no problem and thank you
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 33542329
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
ID: 33542481
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
ID: 33542640
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
ID: 33542680
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
ID: 33542684
thank you once again
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33543570
I'll try to find out why
0
 

Author Comment

by:peter_coop
ID: 33548757
thank you
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33548801
No luck so far :(
0
 

Author Comment

by:peter_coop
ID: 33552527
thank you for looking
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33652334
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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…

862 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

25 Experts available now in Live!

Get 1:1 Help Now