SPA from john Papa

[tulipneo]

Hi ,

I m using Hot Towel template from john papa.

I tried to make a simple Jquery UI button and have been trying for last one week but the template does not allow me to do so.

First thing first inside main.js i changed the sequence so that jquery loads after but it did not help.

require.config({ paths: { "text": "durandal/amd/text" }, shim: { "jqueryui": { "deps": ["bootstrap"] } });

I tried to achieve the jquery UI button by trying to call button rendering inside viewAttached and that did not work.

viewAttached: function () {
$("#mybutton") .button() .click(function (event) { event.preventDefault(); }); }

I tried with 3rd approach through knockout and only thing that works is DatePicker.

All my observation was that css style is not available to the component.

Either Bootstrap overrides or some thing gets messsed. Can u pls comment on this.

Br

Neo

[gvas]

Hello,

Is this related to knockout-jqueryui? Is there any error message on the javascript console? Could you create a jsfiddle showing the problem?

Regards, G

[tulipneo]

Hi Thanks for the quick quick reply. Well i found the root cause.jquery css conflicts with Bootstarp css. seems i can not use both together. The one that loads latter would override the previous one. Suppose i load jquery css first and than bootstrap css. I will never able have the look n feel for a button with Jquery since both use same name for button.

Can u advice me on the issue. on same page i want to use bootstrap button as well Jquery Button Thanks for your time.

Br Neo

[johnnyreilly]

Hi @tulipneo

You might want to check this out: http://addyosmani.github.io/jquery-ui-bootstrap/

It's Addy Osmani's attempt to bring together jQuery UI and Bootstrap. Haven't used it much myself but it seemed to me that it might solve your problem.

[gvas]

Seems that both jQuery UI and Bootstrap defines $.fn.button, see http://dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/

A jsfiddle with the workaround: http://jsfiddle.net/QVmHD/

Regards G

[tulipneo]

Hi Thanks a lot for your time.

I wish i could advice people like you. some day i would be capable to do that. :) One more help if u have time.

I m trying to make a custom binding for JQGRID. I have 2 problems.

* First Grid does not show any data but displays Data when I try to sort any column.
* The pager does not get displayed.Here is my code

View:  

      

Binding: ko.bindingHandlers.CGrid = {         init: function (element, valueAccessor, allBindingsAccessor, viewModel)         {                       var value = valueAccessor();             var pag = value.pager;             var mydata = [{ id: "1", invdate: "2010-05-24", name: "test", note: "note", tax: "10.00", total: "2111.00" },  { id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00" },  { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", tax: "30.00", total: "430.00" }];                        $(element).jqGrid({                 data: mydata,                 datatype: "local",                 height: 350,                 width:1000,                 rowNum: 10,                 rowList: [10,20,30],                 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],                 colModel:[                     {name:'id',index:'id', width:60, sorttype:"int"},                     {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},                     {name:'name',index:'name', width:100},                     {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},                     {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},                     {name:'total',index:'total', width:80,align:"right",sorttype:"float"},                     {name:'note',index:'note', width:150, sortable:false} ],                 pager: pag,                 sortname: 'id',                 viewrecords: true,                 sortorder: "desc",                 loadonce: true             });             $(element).jqGrid('navGrid', pag, { edit: true, add: true, del: true, refresh: false });               }

I will be of Great help with any help ,advice or pointers.

Br Neo

---

From: gvas notifications@github.com To: gvas/knockout-jqueryui knockout-jqueryui@noreply.github.com Cc: tulipneo neo.tulip@yahoo.com Sent: Tuesday, 16 July 2013 4:30 PM Subject: Re: [knockout-jqueryui] SPA from john Papa (#6)

Seems that both jQuery UI and Bootstrap defines $.fn.button, see http://dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/ A jsfiddle with the workaround: http://jsfiddle.net/QVmHD/ Regards G — Reply to this email directly or view it on GitHub.