JSfiddle : how to create multi-JS/CSS/HTML files project?

Question

Is there a way to create a serious HTML/CSS/JS project with multiple HTML, CSS, JS files on JSfiddle.net ? If yes, how to do it ?

I want to create a basic mobile apps based on HTML/CSS/JS, about a dozen of HTML/CSS/JS files. I would like to develop it all on JSfiddle, my favorite Online JavaScript IDE. But JSfiddle.net while a clean way to test projects stays limited to:

1 html file (personal)
1 CSS file (personal)
1 JS file (personal)
several external resources (CSS, JS libs, data) which request you another webhosting.

The official doc suggesting Github hosting for 1HTML/1JS/1CSS/someDataFiles is not satisfying. I wish all on JSFiddle, and more files in my project.

I don’t think you are supposed to use jsfiddle as your CDN … — CBroe, Mar 22 '13 at 15:05
I want the great JSfiddle as my single [online Javascript IDE](http://en.wikipedia.org/wiki/Online_Javascript_IDE#Comparison). — Hugolpz, Mar 22 '13 at 15:08

score 5 · Accepted Answer · edited May 23 '17 at 11:46

You can do it inside a jsFiddle but there are few limitations, and you are probably not going to be satisfied with it.

You can test only 1 HTML multiple pages template. But in case of jQuery Mobile framework this will be enough, as you can place numerous jQM pages inside a 1 html file.

For example, this is my jsFiddle template when helping to this group: http://jsfiddle.net/Gajotres/yWTG2/

You cant use normal form submitting. Instead you should use ajax to sumbit form data.

In my other answer you can find solutions for ajax form submitting and how to send parameters during the page transition: jQuery Mobile: Sending data from one page to the another

In case you want to communicate with an remote host:

var ajax = {
    sendRequest:function(save_data){
        $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
            data: save_data,
            async: true,
            beforeSend: function() {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                if(result == "true") {
                    $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
                } else {
                    alert('Login unsuccessful, please try again!'); // In case result is false throw an error
                }
                // This callback function will trigger on successful action
            },
            error: function (request,error) {
                // This callback function will trigger on unsuccessful action                
                alert('Network error has occurred please try again!');
            }
        });
    }
}

jsFiddle has a stupid policy where they want to prevent usage of full HTML files. They are trying to enforce this with stupid error warnings in HTML content part. You will need to have something like firebug plugin for Firefox or Chrome to remove this stupidity. Or you can even do it with Grease Monkey plugin.
In case you want to use full HTML template like in this example: http://jsfiddle.net/Gajotres/yWTG2/ you will need to use your javascript code in onDomready state.
Some functionalities are not going to work. Like window.orientationchange event.

Thanks for your tips. I think there isn't out of the box solution. — Hugolpz, Mar 22 '13 at 15:12

JSfiddle : how to create multi-JS/CSS/HTML files project?

1 Answers1