Ajax loaded content and executing a script

[jack4ya]

summary: trying so hard to load the formbuilders response in a div by ajax.

On a 'normal' page the script below works, and I get things as I wish.
(Btw, this script is not mine, it's been floating here and there on this forum/web.
http://www.i-do-this.com/blog/AJAX-Form ... builder/57 )

But if the content of the pade is loaded through ajax, it won't... As I expected.

The code below is the script...
the jquery.form.js is loaded as last in the main template

Code: Select all

	jQuery(document).ready(function(){	
	var contact_form = $('#ajax_form_wrap form');
	  function formValidate(formData, jqForm, options) { 
	    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});
	    return true;
	  };
	 
	    var options = {
	        target: '#ajax_form_wrap',  
	        beforeSubmit: formValidate,  
	        type: 'post'
	     };
	 
	contact_form.attr('action','index.php?page=result&showtemplate=false').ajaxForm(options);
/* 	contact_form.attr('action','{/literal}{ldelim}$cgsimple->self_url(){rdelim}}{literal}#reserveren?showtemplate=false').ajaxForm(options); */
	});

I realize this might be to little info, but am not sure what more info is needed. Please do not hesitate to ask!

[Dr.CSS]

It looks like you are missing these 2 lines and your self_link is not the same as his...

$('#ajax_form_wrap form input[name*=returnid]').attr('value','{/literal}{$content_id}{literal}');
$('#ajax_form_wrap form input[name=page]').attr('value','{/literal}{$page_alias}{literal}');

[jack4ya]

The script is just not fired... If it would the hardcoded line would just show up.

[psy]

You may need to re-initiate js after the ajax page load. Depends how the page is loaded, eg if by a button click, on the parent page:

Code: Select all

$(document).ready(function(){
  $('#mybutton').on('click',function(e){
    e.preventDefault();
    ... your FormBuilder js code here ...
  });
});

[jack4ya]

I tried that, and similar. But no...

I could rewrite ALL my templates not to load through ajax, met through cggetcontentthingie.... But I feel it should not be that difficult... (but apparently it is...)

[jack4ya]

Note to myself...
http://stackoverflow.com/questions/1463 ... get-loaded
?

[velden]

Even read this article https://www.cmscanbesimple.org/blog/for ... modal-view ?

It does not fully apply to your situation probably but might get you started.

What you need to realize is that you must wait for the form to be actually present in the page (DOM) to be able to attach events to it. And the same applies after submitting. For the DOM it seems to be a new form. So events attached earlier aren't valid anymore.

Do you have the form online somewhere?

[psy]

Yes, of course!!! Should have looked at my own code before posting.

The parent page html is:

Code: Select all

<a href="{cms_selflink href='mypage'}&showtemplate=false" class="mybutton">Click me</a>

<div id="dest"></div>

and the js on the parent page is:

Code: Select all

$('.mybutton').on('click',function(e){
    e.preventDefault();
    $('#dest').load($(this).attr('href'),function(){
        ... code for the ajax inserted page ...
    });
});

[jack4ya]

Even read this article https://www.cmscanbesimple.org/blog/for ... modal-view ?

It does not fully apply to your situation probably but might get you started.

What you need to realize is that you must wait for the form to be actually present in the page (DOM) to be able to attach events to it. And the same applies after submitting. For the DOM it seems to be a new form. So events attached earlier aren't valid anymore.

Do you have the form online somewhere?

Yes here http://clockurl.com/P1S... it's just halfway migrating, so forget about the cgsmartimages erros and such...

[velden]

If you use a web inspector like Firebug you see that

Code: Select all

ReferenceError: AjaxForm is not defined
http://<removed>.nl/#reserveren
Line 215

That function is not yet loaded because:
- you're loading it after calling it (include of script with function is below the call)
- javascript is case sensitive (the function is ajaxForm())

Then the function should be called on an object
e.g.:

Code: Select all

$('form#cntnt01moduleform_1').ajaxForm()

If you call that example after loading the content. The form will POST via ajax (you can see that in Firebug too). But still things go wrong. Like the showtemplate=false parameter is not posted and the returned html is not used.

Probably you need to fix some little things to get it working (it can seem a little difficult the first time).

[jack4ya]

I got fed up with this thing (been trying for too long) so I worked around it.

I inserted the page content in the menumanager template not by ajax load but with (just a short snippets, vor complet code)

Code: Select all

	{capture assign='nodeAlias'}{$node->alias}{/capture}
	{capture assign='nodeID'}{$node->id}{/capture}
	{capture assign='nodeMenuText'}{$node->menutext}{/capture}
        {cgsimple::get_page_content($nodeAlias,'','pageContent')}
        {cgsimple::get_page_content($nodeAlias,'imagepageright','imagepageright')}
        {get_template_name page_id=$nodeID assign="templateName"}

All works now.
Added bonus: the salvattore script works also now.

[jack4ya]

Sigh...
Works now (I just could let it go...)
$(document).delegate('input.fbsubmit', 'click', function() {

Code: Select all

$(document).delegate('input.fbsubmit', 'click', function() {	
	var contact_form = $('#ajax_form_wrap form');
	function formValidate(formData, jqForm, options) { 
	    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});
		return true;
	};
 
	var options = {
	    target: '#ajax_form_wrap',  
	    beforeSubmit: formValidate,  
	    type: 'post'
	};
	 
	contact_form.attr('action','index.php?page=results&showtemplate=false').ajaxForm(options);
});