binding AJAX dinamically loaded form

[Guest]

Hy guys.

 

I use forms plug in for it's ajaxForm function to submit my form without leaving page.

 

And it works fine for forms, that get loaded on page-load. But when I add form dynamically via AJAX, form off course does not get bound to function. All clear by now.

 

I know I should re-bound dynamically loaded content. Problem is I don't know how !

 

 

Code I use at the moment does not have any .load() event in which I could put new bounding function. And to be honest, I'm more or less scraping examples from all over internet and so I don't know how to rewrite code from start to reflect my needs.

 

What I have:

 

This loads my AJAX form in to html element:

<script type="text/javascript">
function referentNov(strrefnov) //dodaj prikaz div novopriporocilo (odmakne display:none). ce ni morda ze, glede na to da skrije ce je string "" in nato ponovno pokaze kadar je vrednost izbrana.
{
if (strrefnov=="")
  {
  document.getElementById("referentpodatki").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttprefnov=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttprefnov=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttprefnov.onreadystatechange=function()
  {
  if (xmlhttprefnov.readyState==4 && xmlhttprefnov.status==200)
    {
    document.getElementById("referentpodatki").innerHTML=xmlhttprefnov.responseText;
    }
  }
xmlhttprefnov.open("GET","full-path-to-file.php?q=" + strrefnov,true);
xmlhttprefnov.send(null);

if(document.getElementById("novopriporocilo").style.display != 'none'){ 
	document.getElementById("novopriporocilo").style.display = 'none'; 
	document.forms["novopriporocilo"].reset()
}
$('div#successprip').fadeOut();
$('div#succesreferentnov').fadeOut();

}
</script>

 

And function referentNov() gets called from OnChange event of option drop-down.

 

I process my existing forms with code:

 

<script type="text/javascript"> 
// wait for the DOM to be loaded
( function($) {
$(document).ready(function() { 

	var optionsref = { 
		beforeSubmit:  validateref,  // pre-submit callback
		success:       shranjenref  // post-submit callback 
	}; 

	// bind 'referentshrani' and provide a simple callback function 
	$('#referentshrani').ajaxForm(optionsref); 
}); 

// pre-submit callback 
function validateref(formData, jqForm, options) { 

    var IDobiskreferentaValue = $('input[name=IDobiskreferenta]').fieldValue(); 
    var datumreferentaValue = $('input[name=datumreferenta]').fieldValue()
var imereferentaValue = $('input[name=imereferenta]').fieldValue();
var priimekreferentaValue = $('input[name=priimekreferenta]').fieldValue();
var naslovreferentaValue = $('input[name=naslovreferenta]').fieldValue();
var naseljereferentaValue = $("#naseljereferenta").val();
var telefon1referentaValue = $('input[name=telefon1referenta]').fieldValue();

    if (!IDobiskreferentaValue[0] || !datumreferentaValue[0] || !imereferentaValue[0] || !priimekreferentaValue[0] || !naslovreferentaValue[0] || !naseljereferentaValue[0] || !telefon1referentaValue[0]) { 
        alert('Hej, Nekaj ne ?tima! Preveri ali so vsa obvezna polja označena z * izpolnjena!'); 
        return false; 
    }
}

// post-submit callback 
function shranjenref()  { 
$("#referentshrani").clearForm().clearFields().resetForm();
$('form#referentshrani').hide();
$('div#succesreferentshrani').fadeIn();
return false;
} 
} ) ( jQuery );
</script>

 

 

Like I said, I think I should re-bound new AJAX element to this second code, after it's pulled in my main HTML. But I don't know how to bring all this together !

 

If anybody could help me on this one, I would be very grateful! Thank you!