Jquery conflict with Prototype
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/
加载中,请稍侯......
精彩评论