Running Javascript from AJAX file

Question

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!

Answer 1

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!

Answer 2

Use the JotForm Iframe Code instead. Here is how you can get it. Open your form on the JotForm Form Builder:

1. Open "Setup & Share" tab on toolbar,
2. Click on "Share Form"
3. Click on "Advanced Options"
4. Click on "iFrame Code"and copy the form code to your site.