Jquery conflict with Prototype_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-01 23:26 出处：网络

I used \'lightbox\' in Prototype and \'Export to CSV\' in Jquery. Currently, Prototype is conflict with Jquery library. Below is the code for export function, the 1st scri开发者_Python百科pt is Jquery

相关专题：jquery

I used 'lightbox' in Prototype and 'Export to CSV' in Jquery. Currently, Prototype is conflict with Jquery library. Below is the code for export function, the 1st scri开发者_Python百科pt is Jquery export library and 2nd script is Javascript.

Once adding 'jQuery.noConflict();' in the 1st line of the export library, the export function doesn't work. So my question is how to make both of them work in the same page.

    <script type="text/javascript">

    jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);


    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};
        </script>




        <script type="text/javascript">
        function getCSVData(){
            var csv_value=$('#insideTable5').table2CSV({delivery:'value'});
            $("#csv_text").val(csv_value);
        }
        </script>



        <input type="image" src="images/Excel.jpg" value="Get CSV File" onclick="getCSVData()"/>

        <table id='insideTable5' border='1'>
             .
             .
             .
        </table>

If you wrap the code like so:

(function( $ ){

    // CODE HERE

})( jQuery );

Then it will still work after no-conflict. This will make it so that $ is still jquery within this code but not outside of it.

Then in your own function, either use jQuery in place of $, or use noConflict to assign it to a different variable name.

function getCSVData(){
    var csv_value=jQuery('#insideTable5').table2CSV({delivery:'value'});
    jQuery("#csv_text").val(csv_value);
}

Instead of loading two frameworks for only two features and worrying about conflict, load one and use it. Your users will have less code to download and your JavaScript code base will be much more easily scalable, updates will be easier, etc.

JQuery has many lightbox plugins. One of my favs is http://colorpowered.com/colorbox/