How do I pass parameters to javascript from each page dynamically
The following code provides Remove capability on each of the list page (e.g. sample list page given below), of which only 3 variables (tableId, removeButtonId, headerCheckbox) vary in each page. How do I re-use this script across all pages, instead of defining this in each page. How do I pass parameters to this script from each page dynamically?
<script type="text/javascript">
var tableId = '#usersChildren\\:userList';
var removeButtonId = '#usersChildren\\:removeUsers';
var headerCheckbox = '#selectAll';
jQuery(document).ready(function() {
if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
jQuery(headerCheckbox).hide();
jQuery(removeButtonId).hide();
} else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
jQuery(removeButtonId).hide();
jQuery(headerCheckbox).click(function() {
jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
});
}
jQuery(tableId).find("input[type='checkbox']").each(function() {
if(jQuery(this).attr('id') != headerCheckbox) {
jQuery(this).click(function() {
if (jQuery(headerCheckbox).is(':checked')) {
if(jQuery(tableId).find("input[type=checkbox]:chec开发者_StackOverflow社区ked").length != 1) {
jQuery(removeButtonId).show();
}
} else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
jQuery(removeButtonId).show();
} else {
jQuery(removeButtonId).hide();
}
});
}
});
});
</script>
Put this code in a script that is sourced from a script tag, on each template that needs it:
function bindRemoveButton(tableId, removeButtonId, headerCheckbox) {
if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
jQuery(headerCheckbox).hide();
jQuery(removeButtonId).hide();
} else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
jQuery(removeButtonId).hide();
jQuery(headerCheckbox).click(function() {
jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
});
}
jQuery(tableId).find("input[type='checkbox']").each(function() {
if(jQuery(this).attr('id') != headerCheckbox) {
jQuery(this).click(function() {
if (jQuery(headerCheckbox).is(':checked')) {
if(jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
jQuery(removeButtonId).show();
}
} else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
jQuery(removeButtonId).show();
} else {
jQuery(removeButtonId).hide();
}
});
}
});
}
On each template that needs it do
<script type="text/javascript" src="remove.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var tableId = '#usersChildren\\:userList';
var removeButtonId = '#usersChildren\\:removeUsers';
var headerCheckbox = '#selectAll';
bindRemoveButton(tableId, removeButtonId, headerCheckbox);
});
</script>
Now you can change the bindRemoveButton
function in one place, and in each template you just have to change three variables.
You can put your script in a php file and pass the variable to the query string. Use header("Content-type: application/x-javascript"); to render it as javascript file. Take a look at this example : http://www.webhostingtalk.com/showthread.php?t=494879
Another way is to check your address using location.href. For example your address is page1.html, page2.html page3.html then
if (location.href.match(/page1/)) { //assign id for page 1 //}
etc... search location.href.match for more example and use
精彩评论