2 JS functions with same name conflict

Question

Short

Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:

• jQuery UI very important for me because nearly all UI things built based on it

Answer 1

All other answers fixing conflict between jQuery UI button and bootstrap button but you can't use bootstrap data-api for renamed button() function. Only manually using new-named bootstrapBtn() function.

I find a solution:

• Find and replace all occurences of regex (\$[.\w]+\.)button to \1btn in bootstrap.js file.

• Or use this sed script:

  #!/bin/bash
  # Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
  sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
  sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js
  

After that you can use bootstrap data-api for button binding and also manually use btn() function in place of button() for Bootstrap while still use jQuery UI button() function.