Question

This is jQuery UI code example:

 <script type="text/javascript">
  //function to execute when doc ready
  $(function() {

    //make tooltip on mouseover
    $("#container a").mouseover(function(e) {

      //create tooltip
      $("<div>").text($(this).attr("title")).addClass("tooltip ui-widget-header ui-corner-all").css({left:e.pageX, top:(e.pageY - 40)}).appendTo($("body"));

      //set timeout to show tooltip
      tip = setTimeout("$('.tooltip').show('drop', { direction:'up' }); ", 750);

      //suppress title
      $(this).attr("title", "");

    });

    //make tip track with pointer
    $("#container a").mousemove(function(e) {
      $(".tooltip").css({'left':e.pageX, 'top':e.pageY - 35});
    });

    //remove tooltip on mouseout
    $("#container a").mouseout(function(e) {

      clearTimeout(tip);

      //put title text back
      $("#" + e.target.id).attr("title", $(".tooltip").text());

      //hide and remove tooltip
      $(".tooltip").remove();
    });
  });
</script>



    <script type="text/javascript">
  //define function to be executed on document ready
  $(function(){

    //create the tabs
    $("#myTabs").tabs();

    //define handler for change event on select element
    $("#fileChooser").change(function() {

      //load either file 1 or file 2
      this.selectedIndex == 0 ? loadFile1() : loadFile2();

      //load the new file
      function loadFile1() {
        $("#myTabs").tabs("url", 2, "tabContent.html").tabs("load", 2);
      }

      function loadFile2() {
        $("#myTabs").tabs("url", 2, "tabContent2.html").tabs("load", 2);
      }
    });
  });

</script>

If I convert to the format of CakePHP.
Could you give me an example? I try to read in nut and bolt and CakePHP manual but I don’t understand.

Thank you.

Answer 1

Don’t bother.

Cake 1.3 JsHelper is just that – a helper intended to abstract the most common and repetitious code – ajax pagination, simple element loads, animation appropriate to navigational elements, that kind of thing. The library, as it ships, is universal to 3 of the most popular javascript libraries – jQuery, MooTools and Prototype (defaults to jQuery and can be changed in the controller) so the developer can choose whichever flavor they prefer, use multiple libraries, etc. Because the abstractions only cover the most common behaviors libraries tend to offer, there’s a pretty good chance whatever else you might want to use will match up with little effort, too.

For what it does, it’s pretty brilliant – it’s mainly a DRY invocation and takes the drudgery out of behaviors. However, it’s an abstraction layer. It doesn’t replace client-side scripting, especially for anything remotely complex. I’d suggest against making a huge time investment building out custom functionality as any problems that arise in generated code are much harder to debug, let alone fix; all Cake is doing is writing out the code to include in the markup anyway.

Just write the client-side code natively and include it in your $this->Html->scripts() or buffer and execute it. It’s much more reliable, predictable and manageable.