I've been trying to get this to work for ages now, tried loads of SO question/answers but not geting very far.
I think I originally had 2 issues, one which hopefully I've resolved.
I've been using JotForm (the easy form creator that uses prototype). What I have is a facebook style menu (AjaxFlagMenu) which creates a verticle ajax style menu that pulls in html snippets from external files (which in my case all have a Jotform form in there).
At the moment at the top of the 'main' page that contains the menu, I have:
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript" src="/js/jquery.corner.js"></script>
<script type="text/javascript" src="/js/jquery.开发者_开发百科flagmenu.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
var Menu = $("#_Menu").AjaxFlagMenu({
Caption:'Manage Profile',
CaptionClass:'CaptionClass',
onOutClass:'onOutClass',
onOverClass:'onOverClass',
onClickClass:'onClickClass',
hscOutClass:'hscOutClass',
hscClickClass:'hscClickClass',
Loading_gif:'/images/loading.gif',
ajaxContent:'ajaxContent'
});
//Basic
Menu.add({
Title:'Basic Info',
onOutIcon:'/images/icon-vcard-c.png',
onClickIcon:'/images/icon-vcard-d.png',
HtmlSatusContent:'',
url:'/instructor/pages/mp-basic.php',
data:''
});
//Profile Picture
Menu.add({
Title:'Profile Picture',
onOutIcon:'/images/icon-camera-c.png',
onClickIcon:'/images/icon-camera-d.png',
HtmlSatusContent:'',
url:'/instructor/pages/mp-photo.php',
data:''
});
//Pricing and Offers
Menu.add({
Title:'Pricing and Offers',
onOutIcon:'/images/icon-pound-c.png',
onClickIcon:'/images/icon-pound-d.png',
HtmlSatusContent:'',
url:'/instructor/pages/mp-pricing.php',
data:''
});
//Services
Menu.add({
Title:'Services',
onOutIcon:'/images/icon-services-c.png',
onClickIcon:'/images/icon-services-d.png',
HtmlSatusContent:'',
url:'/instructor/pages/mp-services.php',
data:''
});
//Bio and Additional
Menu.add({
Title:'Bio and Additional',
onOutIcon:'/images/icon-bio-c.png',
onClickIcon:'/images/icon-bio-d.png',
HtmlSatusContent:'',
url:'/instructor/pages/mp-bio.php',
data:''
});
$("#_td").corner("4px");
});
</script>
<script src="/js/jotform/prototype.js?v=3.1.92" type="text/javascript"></script>
<script src="/js/jotform/protoplus.js?v=3.1.92" type="text/javascript"></script>
<script src="/js/jotform/protoplus-ui.js?v=3.1.92" type="text/javascript"></script>
<script src="/js/jotform/jotform.js?v=3.1.92" type="text/javascript"></script>
<script src="/js/jotform/calendarview.js?v=3.1.92" type="text/javascript"></script>
What I then need to do, is when the menu item is clicked and loads the HTML from the other page, I need to run JotForm.init();
to enable the JotForm validation functions. However, I don't even seem to be able to alert("Hello World");
to work on the page that is called in.
Any help would be great! Thank you!
In the AjaxFlagMenu.js, at the line the ajax is executed:
//Ajax
var _XMLHTTPRequest = $.ajax({type: "GET",url:_url,data:_data });
Try adding dataType: "html"
like this:
//Ajax
var _XMLHTTPRequest = $.ajax({type: "GET",url:_url,data:_data,dataType: "html" });
This wil evaluate the javascript you load via AJAX.
You will find more info here: http://api.jquery.com/jQuery.ajax/#options
LATER EDIT
The problem is that the AjaxFlagMenu doesn't evaluate the javascript from the ajax response!
Use the JotForm Iframe Code instead. Here is how you can get it. Open your form on the JotForm Form Builder:
- Open "Setup & Share" tab on toolbar,
- Click on "Share Form"
- Click on "Advanced Options"
- Click on "iFrame Code"and copy the form code to your site.
精彩评论