Search Results

Search found 468 results on 19 pages for 'knockout sortable'.

Page 8/19 | < Previous Page | 4 5 6 7 8 9 10 11 12 13 14 15  | Next Page >

  • Jqgrid search option not working and edit popups not closed after submit

    - by Sajith
    i have facing two problem in Jqgrid. Search option not working and there is not closed editpopups after submit. my code below <table id="jQGridpending" style="width:auto"> </table> <div id="jQGridpendingPager"> </div> <table id="searchpending"></table> <div id="filterpending"></div> jQuery("#jQGridpending").jqGrid({ url: '@Url.Action("DiscountRequest", "Admin")', datatype: "json", mtype: "POST", colNames: [ "Id", "ClientName", "BpName", "Pdt", "DiscountReq", "DiscountAllowed", "Status", ], colModel: [ { name: "Id", width: 100, key: true, formatter: "integer", sorttype: "integer", hidden: true }, { name: "ClientName", width: 150, sortable: true,search:true,stype:'text', editrules: { required: false } }, { name: "BpName", width: 200, sortable: true, editable: false, editrules: { required: false } }, { name: "Pdt", width: 150, sortable: true, editable: false, editrules: { required: false } }, { name: "DiscountReq", width: 150, sortable: false, editable: false, editrules: { required: false } }, { name: "DiscountAllowed", width: 200, sortable: true, editable: true, editrules: { required: true } }, { name: 'Status', index: 'Status', width: 200, sortable: false, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: "pending:pending;approved:approved;rejected:rejected" } }, @* { name: "Status", width: 200, sortable: false, editable: true, editrules: { required: true, minValue: 1, }, edittype: "select", editoptions: { async: false, dataUrl: "@Url.Action("GetStatus", "Admin")", buildSelect: function (response) { var s = "<select>"; s += '<option value="0">--Select--</option><option value="pending">pending</option>'; return s + "</select>"; } } },*@ //{ name: "Status", width: 150, sortable: true, editable: true, editrules: { required: true } }, //{ name: "Created", width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "n/j/Y g:i:s A" }, align: "center", sorttype: "date" }, ], loadtext: "Processing pending request data please wait...", rowNum: 10, gridview: true, autoencode: true, loadonce: true, height: "auto", rownumbers: true, prmNames: { id: "Id" }, rowList: [10, 20, 30], pager: '#jQGridpendingPager', sortname: 'id', sortorder: "asc", viewrecords: true, jqModal: true, caption: "Pending List", reloadAfterSubmit: true, editurl: '@Url.Action("UpdateDiscount", "Admin")', }); jQuery("#jQGridpending").jqGrid('navGrid', '#jQGridpendingPager', { search: true,recreateFilter: true, add: false, searchtext: "Search", edittext: "Edit", deltext: "Delete", }, {//EDIT url: '@Url.Action("UpdateDiscount", "Admin")', width: "auto", jqModal: true, closeOnEscape: true, closeAfterEdit: true, reloadAfterSubmit: true, afterSubmit: function () { // Reload grid records after edit a entry in the db. $(this).jqGrid('setGridParam', { datatype: 'json' }); return [true, '', false]; }, }, {//DELETE url: '@Url.Action("DelDiscount", "Admin")', closeOnEscape: true }, {//SEARCH closeOnEscape: true, searchOnEnter: true, multipleSearch: true, //overlay: 0, width: "auto", height: "auto", });

    Read the article

  • sorting nested list, allow only li to be sorted witin the same ul

    - by Y.G.J
    what i want to achive is: sorting the main ul is working but not all the time - i will try to fix that my own but if there is a problem with the code here and not the one in proccess-sortable - tell me. moving li in the main ul is ok but the sub or the sub of the sub is having problem - i can drag something from one sub to it's sub or the other way too - i don't want that to happend. i want to be able to drag li and by selecting that one that only this ul group will send to proccess-sortable to be updated - how can i catch the specific ul of li i am draging? $(document).ready(function() { $("#test-list").sortable({ items: "> li", handle : '.handle', axis: 'y', opacity: 0.6, update : function () { var order = $('#test-list').sortable('serialize'); $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); } }); $("#test-sub").sortable({ containment: "ul", items: "li", handle : '.handle2', axis: 'y', opacity: 0.6, update : function () { var order = $('ul').sortable('serialize'); $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); } }); }); this is the html part <ul id="test-list"> <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li> <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" /> <ul id="test-sub"> <li id="listItem_4><img align="middle" src="Themes/arrow.png" class="handle2" /></li> <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> <ul id="test-sub"> <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> </ul> </li> </ul> </li> </ul>

    Read the article

  • jQuery: load refuses to get dynamic content in IE6

    - by user260157
    jQuery refuses to load my dynamic content in IE6. All in FireFox & Safari works fine. Only IE6 is being a pain. When I try the a html with <p>Hello World</p> that works. Properly. But when loading a PHP it doesn't work! As you can see it's doing multiple things. <script type="text/javascript"> // When the document is ready set up our sortable with it's inherant function(s) $(document).ready(function() { // Sort list & amend in database function sortTableMenuAndReload() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } function sortTableOrder() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); } function sortTableOrderAndRemove(removeID) { $('#listItem_'+removeID).remove(); var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } $("#menuList > li > .remove").live('click', function () { var removeID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/removeLine.php', data: 'id='+removeID, success: sortTableOrderAndRemove(removeID) }); }); $("#menuList > li > .publish").live('click', function () { var publishID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/publishLine.php', data: 'id='+publishID, success: sortTableOrder }); }); $('#new_documents > li').draggable({ addClasses: false, helper:'clone', connectToSortable:'#menuList' }); $("#menuList").droppable({ addClasses: false, drop: function() { var clone = $("#menuList > li#newArticleTYPE1"); $(clone).attr("id","listItem_newArticleTYPE1"); } }); $("#menuList").sortable({ opacity: 0.6, handle : '.handle, .remove', update : sortTableMenuAndReload }); }); </script>

    Read the article

  • sorting nested list, allow only li to be sorted witin the same ul

    - by Y.G.J
    $(document).ready(function() { $("#test-list").sortable({ items: "> li", handle : '.handle', axis: 'y', opacity: 0.6, update : function () { var order = $('#test-list').sortable('serialize'); $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); } }); $("#test-sub").sortable({ containment: "ul", items: "li", handle : '.handle2', axis: 'y', opacity: 0.6, update : function () { var order = $('ul').sortable('serialize'); $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); } }); }); <ul id="test-list"> <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li> <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" /> <ul id="test-sub"> <li id="listItem_4"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> <ul id="test-sub"> <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> </ul> </li> </ul> </li> </ul> the problems i have: sorting the main ul is working but not all the time - i will try to fix that my own but if there is a problem with the code here and not the one in proccess-sortable - tell me. moving li in the main ul is ok but the sub or the sub of the sub is having problem - i can drag something from one sub to it's sub or the other way too - i don't want that to happend. i want to be able to drag li and by selecting that one that only this ul group will send to proccess-sortable to be updated - how can i catch the specific ul of li i am draging?

    Read the article

  • JQuery duplicate alerts on update? why?

    - by russp
    I have this JQuery function - that nearly works (so far!) BUT the alerts are duplicated, each appears twice any clues/ideas please $(function() { $("#col1, #col2, #col3").sortable({ connectWith: '.column', update : function () { serial = $('#col1').sortable('serialize'); serial1 = $('#col2').sortable('serialize'); serial2 = $('#col3').sortable('serialize'); alert(serial); alert(serial1); alert(serial2); } }); });

    Read the article

  • Extjs - Getting more from the server

    - by fatnjazzy
    Hi, Is it possible to get every data from the server? for example, i want to get the columns items from the server Via Ajax/Proxy by sending json string? thanks var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height: 350, width: 600, title: 'Array Grid', stateful: true, stateId: 'grid' });

    Read the article

  • Change ExtJS Grid Height in Javascript

    - by williamtroup
    How can I point at the object of a ExtJS Grid and manually set the height (in pixels)? For example, with this same: var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height: 350, width: 600, title: 'Array Grid', // config options for stateful behavior stateful: true, stateId: 'grid' }); I would i be able to point at the "grid" object and then set the size of the grid? Any help would be fantastic!

    Read the article

  • YUI Datatable Not Taking JSON

    - by Pete Herbert Penito
    I am trying to fill a Datatable with a JSON using YUI, I have this JSON: [{"test":"value1", "test2":"value2", "test3":"value3", "topic_id":"123139007E57", "gmt_timestamp":1553994442, "timestamp_diff":-1292784933382, "status":"images\/statusUp.png", "device_id":"568FDE9CC7275FA"}, .. It continues like this with about 20 different devices, and I close it with a ] I just want to print select keys in the datatable so my Column Definitions look like this: var myColumnDefs = [ {key:"test", sortable:true, resizeable:true}, {key:"test2", sortable:true, resizeable:true}, {key:"topic_id", sortable:true, resizeable:true}, {key:"status", sortable:true, resizeable:true}, {key:"device_id", sortable:true, resizeable:true}, ]; var myDataSource = new YAHOO.util.DataSource(bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["test","test2","topic_id","status","device_id"] }; var myDataTable = new YAHOO.widget.DataTable("basic", myColumnDefs, myDataSource); It's print Data Error for some reason, what am I doing wrong? Thanks! I have tested the validity of the JSON at JSONLint and it says it is valid.

    Read the article

  • php XML DOM translates special chars to &#xYY;

    - by ZiTAL
    I send this with AJAX POST: <li><ul class "zone zCentral ui-sortable"><li><ul class="region rCol3 ui-sortable"><li class="" style=""><div><span class="tc tc_video">574081</span> <span>video: 'Mundo.Hoy': ¿Dónde habré olvidado... mi memoria?</span></div></li></ul></li></ul></li> I do this to create XML: header('Content-type: text/html; charset=utf-8'); if(isset($_POST) && isset($_POST['data'])) { $data = '<ul id="zone_container" class="ui-sortable">'; $data .= $_POST['data']; $data .= '</ul>'; $dom = new DOMDocument('1.0', 'utf-8'); $dom->loadXML($data); echo $dom->saveXML(); exit(); } and i get this: <?xml version="1.0"?> <ul id="zone_container" class="ui-sortable"> <li><ul class="zone zCentral ui-sortable"><li><ul class="region rCol3 ui-sortable"><li class="" style=""><div><span class="tc tc_video">574081</span> <span>video: 'Mundo.Hoy': &#xBF;D&#xF3;nde habr&#xE9; olvidado... mi memoria?</span></div> </li></ul></li></ul></li></ul> ¿Dónde habré olvidado... mi memoria? translates to: &#xBF;D&#xF3;nde habr&#xE9 ; olvidado... mi memoria? Y need original chars in the XML, these are utf-8 valid i don't know the reason for this encode :(

    Read the article

  • Howto serialize multiple Lists with Jquery

    - by megens
    I have 3 sortable UL's and a simple jquery/javascript <ul class="sortable" id="menu1"> <li id="id_1">whatever</li> <li id="id_2">you</li> </ul> <ul class="sortable" id="menu2"> <li id="id_3">wanne</li> <li id="id_4">put</li> </ul> <ul class="sortable" id="menu3"> <li id="id_5">in</li> <li id="id_6">here</li> </ul> $(function() { $("ul.sortable").sortable({ connectWith: 'ul' }); }); </script> LI's are draggable between UL's How can i serialize this so i get for example menu1[0]=1&menu1[1]=3 Or and array or whatever i can work with to save the state?

    Read the article

  • jQuery Templates, Data Link

    - by Renso
    Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} Query Templates, Data Link, and Globalization I am sure you must have read Scott Guthrie’s blog post about jQuery support and officially supporting jQuery's templating, data linking and globalization, if not here it is: jQuery Templating Since we are an open source shop and use jQuery and jQuery plugins extensively to say the least, decided to look into the templating a bit and see what data linking is all about. For those not familiar with those terms here is the summary, plenty of material out there on what it is, but here is what in my experience it means: jQuery Templating: A templating engine that allows you to specify a client-side template where you indicate which properties/tags you want dynamically updated. You in a sense specify which parts of the html is dynamic and since it is pluggable you are able to use tools data jQuery data linking and others to let it sync up your template with data. What makes it more powerful is that you can easily work with rows of data, adding and removing rows. Once the template has been generated, which you do dynamically on a client-side event, you then append/inject the resulting template somewhere in your DOM, like for example you would get a JSON object from the database, map it to your template, it populates the template with your data in the indicated places, and then let’s say for example append it to a row in a table. I have not found it that useful for lets say a single record of data since you could easily just get a partial view from the server via an html type ajax call. It really shines when you dynamically add/remove rows from a list in the DOM. I have not found an alternative that meets the functionality of the jQuery template and helps of course that Microsoft officially supports it. In future versions of the jQuery plug-in it may even ship as part of the standard jQuery library and with future versions of Visual Studio. jQuery Data Linking: In short I was fascinated by it initially by how with one line of code I can sync up my JSON object with my form elements. That's where my enthusiasm stopped. It was one-line to let is deal with syncing up your form with your JSON object, but it is not bidirectional as they state and I tried all the work arounds they suggested and none of them work. The problem is that when you update your JSON object it DOES NOT sync it up with your form. In an example, accounts are being edited client side by selecting the account from a list by clicking on the row, it then fetches the entire account JSON object via ajax json-type call and then refreshes the form with the account’s details from the new JSON object. What is the use of syncing up my JSON with the form if I still have to programmatically sync up my new JSON object with each DOM property?! So you may ask: “what is the alternative”? Good question and the same one I was pondering, maybe I can just use it for keeping my from n sync with my JSON object so I can post that JSON object back to the server and update my database. That’s when I discovered Knockout: Knockout It addresses the issues mentioned above and also supports event handling through the observer pattern. Not wanting to go into detail here, Steve Sanderson, the creator of Knockout, has already done a terrific job of that, thanks Steve for a great plug-in! Best of all it integrates perfectly with the jQuery Templating engine as well. I have not found an alternative to this plugin that supports the depth and width of functionality and would recommend it to anyone. The only drawback is the embedded html attributes (data-bind=””) tags that you have to add to the HTML, in my opinion tying your behavior to your HTML, where I like to separate behavior from HTML as well as CSS, so the HTML is purely to define content, not styling or behavior. But there are plusses to this as well and also a nifty work around to this that I will just shortly mention here with an example. Instead of data binding an html tag with knockout event handling like so:  <%=Html.TextBox("PrepayDiscount", String.Empty, new { @class = "number" })%>   Do: <%=Html.DataBoundTextBox("PrepayDiscount", String.Empty, new { @class = "number" })%>   The html extension above then takes care of the internals and you could then swap Knockout for something else if you want to inside the extension and keep the HTML plugin agnostic. Here is what the extension looks like, you can easily build a whole library to support all kinds of data binding options from this:      public static class HtmlExtensions       {         public static MvcHtmlString DataBoundTextBox(this HtmlHelper helper, string name, object value, object htmlAttributes)         {             var dic = new RouteValueDictionary(htmlAttributes);             dic.Add("data-bind", String.Format("value: {0}", name));             return helper.TextBox(name, value, dic);         }       }   Hope this helps in making a decision when and where to consider jQuery templating, data linking and Knockout.

    Read the article

  • What is the most efficient procedure for implementing a sortable ajax list on the backend?

    - by HenryL
    The most common method is to assign a sequential order field for each item in the list and do an update that maintains the sequence with every ajax sort operation. Unfortunately, this requires an update to each item of the list every time someone sorts. This is fine for small lists, but what's the best way to implement sorting for larger lists that are constantly updated? I am looking for something that minimizes DB IO.

    Read the article

  • jqGrid with JSON data renders table as empty

    - by jgreep
    I'm trying to create a jqgrid, but the table is empty. The table renders, but the data doesn't show. The data I'm getting back from the php call is: { "page":"1", "total":1, "records":"10", "rows":[ {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]}, {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]}, {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}, {"id":"2:4","cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]}, {"id":"2:5","cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]}, {"id":"2:6","cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]}, {"id":"2:7","cell":["7","image","Photography","To recognize photography knowledge and skills","0"]}, {"id":"2:8","cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]}, {"id":"2:10","cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]}, {"id":"2:11","cell":["11","image","World Conservation","World Conservation Badge","0"]} ]} The javascript configuration looks like so: $("#"+tableId).jqGrid ({ url:'getAwards.php?id='+classId, dataType : 'json', mtype:'POST', colNames:['Id','Badge','Name','Description',''], colModel : [ {name:'awardId', width:30, sortable:true, align:'center'}, {name:'badge', width:40, sortable:false, align:'center'}, {name:'name', width:180, sortable:true, align:'left'}, {name:'description', width:380, sortable:true, align:'left'}, {name:'selected', width:0, sortable:false, align:'center'} ], sortname: "awardId", sortorder: "asc", pager: $('#'+tableId+'_pager'), rowNum:15, rowList:[15,30,50], caption: 'Awards', viewrecords:true, imgpath: 'scripts/jqGrid/themes/green/images', jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: "cell", id: "id", userdata: "userdata", subgrid: {root:"rows", repeatitems: true, cell:"cell" } }, width: 700, height: 200 }); The HTML looks like: <table class="awardsList" id="awardsList2" class="scroll" name="awardsList" /> <div id="awardsList2_pager" class="scroll"></div> I'm not sure that I needed to define jsonReader, since I've tried to keep to the default. If the php code will help, I can post it too.

    Read the article

  • filtering jqgrid based on user input

    - by Rohan
    hi, everything is working fine with my jqgrid except a small issue. i have defined postData below: $(document).ready(function() { $("#ctl00_ContentPlaceHolder2_drpUSite").change(function() { site = ($("#ctl00_ContentPlaceHolder2_drpUSite").val()); loadusergrid(); }); var usrparams = new Object(); var site = ($("#ctl00_ContentPlaceHolder2_drpUSite").val()); //----grid code--------- $("#users").jqGrid({ prmNames: { _search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, // add by default to avoid webmethod parameter conflicts postData: { searchString: '', searchField: '', searchOper: '', sites: site }, datatype: function(postdata) { mtype: "GET", $.ajax({ url: 'Users.aspx/GetUsers', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = $("#users")[0]; var m = JSON.parse(data.d); grid.addJSONData(m); } }, error: function() { alert("Loading Failed!"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "total", records: "records", cell: "cell", id: "login", repeatitems: true }, colNames: ['Login', 'First Name', 'Last Name', 'Email', 'Site', 'Role', 'Room', 'UnitID', 'Supervisor', 'Super'], colModel: [ { name: 'login', index: 'login', width: 20 }, { name: 'fname', index: 'fname', width: 20, hidden: true }, { name: 'lname', index: 'lname', width: 60, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'email', index: 'email', width: 20, align: "center", sortable: false }, { name: 'site', index: 'site', width: 50, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'role', index: 'role', width: 15, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'room', index: 'room', width: 30, align: "center", sortable: true }, { name: 'unitid', index: 'unitid', width: 10, align: "center", sortable: false }, { name: 'super', index: 'super', width: 20 }, { name: 'supername', index: 'supername', width: 10, align: "center", sortable: false }, ], pager: "#pageusers", viewrecords: true, caption: "Registered Users", imgpath: 'themes/steel/images', rowNum: 20, rowList: [10, 20, 30, 40, 50], sortname: "pname", sortorder: "desc", showpage: true, gridModel: true, gridToolbar: true, onSelectRow: function(id) { var ret = jQuery("#users").getRowData(id); accpara.id = ret.id; accpara.pname = ret.pname; accpara.pid = ret.pid; accpara.bld = ret.bld; accpara.cname = ret.cname; accpara.amt = ret.amt; accpara.status = ret.status; accpara.notes = ret.notes; accpara.lname = ret.lname; } }); jQuery("#users").navGrid('#pageusers', { view: false, del: false, add: false, edit: false }, {}, // default settings for edit {}, // default settings for add {}, // delete {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options {} ); $("#users").setGridWidth(1300, true); $("#users").setGridHeight(500, true); jQuery("#users").jqGrid('filterToolbar'); //----grid code ends here function loadusergrid() { $("#users").setGridParam({ page: 1 }, { pgbuttons: true }, { pginput: true }, { postData: { "site": site} }).trigger("reloadGrid"); } }); when page loads for the 1st time, this works.. now i have 4 drop-downs which filter users. i have written a function which reloads the grid when the dropdown is changed, but it isnt working.. what am i doing wrong here?? when i enable postback for the dropdowns, i get the filtered result. i want to avoid postbacks on my page :). right now i have added just the site dropdown as the filter. once this starts working ill add the remaining 3. firebug shows the ajax call is fired successfully but with an empty sitename. please note that the site dropdown cntains an empty value when page is loaded for the 1st time. thanks in advance

    Read the article

  • jQGrid is not loading data

    - by user324777
    Hi, I am using jqGrid for my data table solution. Below are the configuration codes. $(function() { $("#submitInput").click(function() { alert("I am called...") jQuery("#list").jqGrid({ datatype: "json", url: "http://localhost:1201/admin/someURL.htm", mtype:"POST", height: "auto", colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"], colModel:[ {name:"col1", index:"col1", sortable:true, resizable:false}, {name:"col2", index:"col2", sortable:true}, {name:"col3", index:"col3", sortable:false, resizable:false}, {name:"col4", index:"col4", sortable:true, resizable:false}, {name:"col5", index:"col5", sortable:true, resizable:false} ], sortname:'col1', sortorder:'asc', pager: $('#pager'), rowNum:10, viewrecords: true, rowList:[10,20,30], caption: 'Some Grid Values', jsonReader: { root: "responseData", page: "currentPage", total: "totalPages", records: "totalFetchedRecords", repeatitems: true, cell: "rowContent", id: "rowID" }, gridComplete: function() { alert("Loading done..."); } }); }); }); My JSON data is coming in following format: "currentPage":"1","responseData":[ {"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"}, {"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"} ], "totalFetchedRecords":"50","totalPages":"5"} In my HTML, there is a button with id "submitInput" and a table with id "list". Somehow, this data is not loaded into the grid. Please provide some help. Thanks, Niranjan

    Read the article

  • Cant get flexigrid to work in Jquery Tools Tab

    - by John
    Im fairly new to jquery and Im using jquery tools for tabs. I am wanting in one of the tabs to show flexigrid, but when I try to do this flexigrid does not show up, its just blank. If I setup flexigrid in a stand alone page outside the tab it works just fine. Below is the code that isnt working. Again Im new so please go easy! <ul class="css-tabs"> <li><a href="#details">Account Details</a></li> <li><a href="#accounts">Sub Accounts</a></li> <li><a href="#groups">Groups</a></li> <li><a href="#support">Tickets</a></li> </ul> <div class="css-panes"> <div>Tab 1</div> <div><table id="flex1" style="display:none"></table></div> <div>Tab 3</div> <div>Tab 4</div> </div> <script> $(function() { $("ul.css-tabs").tabs("div.css-panes > div").history(); }); $('.flexme1').flexigrid(); $('.flexme2').flexigrid({height:'auto',striped:false}); $("#flex1").flexigrid ( { url: '/accounts_list.php', dataType: 'json', colModel : [ {display: 'ID', name : 'id', width : 45, sortable : true, align: 'center'}, {display: 'Username', name : 'username', width : 120, sortable : true, align: 'left'}, {display: 'Display Name', name : 'displayname', width : 150, sortable : true, align: 'left'}, {display: 'Limit', name : 'accounts', width : 50, sortable : true, align: 'center'}, {display: 'Rate', name : 'charge', width : 50, sortable : true, align: 'center'}, {display: 'Subs', name : 'subcount', width : 50, sortable : true, align: 'center'} ], searchitems : [ {display: 'ID', name : 'id'}, {display: 'Username', name : 'username', isdefault: true}, {display: 'Display Name', name : 'displayname'} ], sortname: "id", sortorder: "desc", usepager: true, singleSelect: true, title: 'Test', useRp: true, rp: 20, showTableToggleBtn: false, width: 500, height: 250 }); </script>

    Read the article

  • jquery - array problem help pls.

    - by russp
    Sorry folks, I really need help with posting an array problem. I would imaging it's quite simple, but beyond me. I have this JQuery function (using sortables) $(function() { $("#col1, #col2, #col3, #col4").sortable({ connectWith: '.column', items: '.portlet:not(.ui-state-disabled)', stop : function () { serial_1 = $('#col1').sortable('serialize'); serial_2 = $('#col2').sortable('serialize'); serial_3 = $('#col3').sortable('serialize'); serial_4 = $('#col4').sortable('serialize'); } }); }); Now I can post it to a database like this, and I can loop this ajax through all 4 "serials" $.ajax({ url: "test.php", type: "post", data: serial_1, error: function(){ alert(testit); } }); But that is not what I want to do as it creates 4 rows in the DB table. I want/need to create a single "nested array" from the 4 serials so that it enters the DB as 1 (one) row. My "base" database data looks like this: a:4:{s:4:"col1";a:3:{i:1;s:6:"forums";i:2;s:4:"chat";i:3;s:5:"blogs";}s:4:"col2";a:2:{i:1;s:5:"pages";i:2;s:7:"members";}s:4:"col3";a:2:{i:1;s:9:"galleries";i:2;s:4:"shop";}s:4:"col4";a:1:{i:1;s:4:"news";}} Therefore the JQuery array should "replicate" and create it (obviously will change on sorting) Help please thanks in advance

    Read the article

  • JQuery make an array - how/what is best

    - by russp
    I have 4 serailized arrays that I want to pass to php for processing. What is the best way to combine them into a single array example: serial_1 = $('#col1').sortable('serialize'); serial_2 = $('#col2').sortable('serialize'); serial_3 = $('#col3').sortable('serialize'); serial_4 = $('#col4').sortable('serialize');` each serialized array relates to a column/section of the page (col1,col2 etc.) What I need to do/would like to do is create a single array that puts the serialized array inside another array for a single post. example: var new_array = serilaize(col_1(serial_1),col2(serial_2),col3,(serial_3),col4(serial_4)) I KNOW THAT IS NOT RIGHT as I have no idea in JQuery how to right the correct syntax. This new array is to be posted via ajax like this: $.ajax({ url: "test.php", type: "post", data: new_array, error: function(){ alert('SOME ERROR MESSAGE'); } }); Thanks in advance

    Read the article

  • jqgrid Posting name:value pair when deleting row?

    - by user837168
    I want to send some name:value pair from the row selected along with del command. from below script I want to send the "polpono" value to my php script when del command is issued. any help will be highly appreciated. $(document).ready(function(){ $("#datagrid").jqGrid({ url:'actionpo.php?vid=polpogridjq', datatype: 'xml', mtype: 'GET', colNames:['List#','PO#', 'Item Code','Item Detail','Qty','Price','Tax'], colModel :[ {name:'polistno', width:100,editable:true,editable:true,key:true}, {name:'polpono',index:'polpono', width:100,editable:true}, {name:'politemcode',index:'politemcode', width:100, align:'right',sortable:true,editable:true}, {name:'politemname', width:300, align:'left',sortable:false,editable:true}, {name:'politemqty',width:50, align:'right',sortable:false,editable:true}, {name:'politemvalue', width:80,align:'left',sortable:false,editable:true}, {name:'politemtax', width:50, align:'right',editable:true} ], pager: $('#pager'), rowNum:10, rowList:[10,20,30], sortname: 'polpono', sortorder: 'desc', shrinkToFit: false, rownumbers: false, multiselect: false, viewRecords: false, clearAfterAdd:true, caption: 'Itemised Quantity', editurl: "actionpo.php?vid=gridformcall", }).navGrid('#pager', { edit: true, add: true, del: true ,search:false, refresh:true},{ } }); });

    Read the article

  • Messaging with KnockoutJs

    - by Aligned
    MVVM Light has Messaging that helps keep View Models decoupled, isolated, and keep the separation of concerns, while allowing them to communicate with each other. This is a very helpful feature. One View Model can send off a message and if anyone is listening for it, they will react, otherwise nothing will happen. I now want to do the same with KnockoutJs View Models. Here are some links on how to do this: http://stackoverflow.com/questions/9892124/whats-the-best-way-of-linking-synchronising-view-models-in-knockout http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html ~ this is a great article describing the ko.subscribable type. http://jsfiddle.net/rniemeyer/z7KgM/ ~ shows how to do the subscription https://github.com/rniemeyer/knockout-postbox will be used to help with the PubSub (described in the blog post above) through the Nuget package. http://jsfiddle.net/rniemeyer/mg3hj/ of knockout-postbox   Implementation: Use syncWith for two-way synchronization. MainVM: self.selectedElement= ko.observable().syncWith (“selectedElement”); ElementListComponentVM example: self.selectedElement= ko.observable().syncWith(“selectedElement”); ko.selectedElement.subscribe(function(){ // do something with the seletion change }); ElementVMTwo: self.selectedElement= ko.observable().syncWith (“selectedElement”); // subscribe example ko.postbox.subscribe(“changeMessage”, function(newValue){ }); // or use subscribeTo this.visible = ko.observable().subscribeTo("section", function(newValue) { // do something here }); · Use ko.toJS to avoid both sides having the same reference (see the blog post). · unsubscribeFrom should be called when the dialog is hidden or closed · Use publishOn to automatically send out messages when an observable changes o ko.observable().publishOn(“section”);

    Read the article

  • Php INNER JOING jqGrid help

    - by yanike
    I'm trying to get INNER JOIN to work with JQGRID, but I can't get it working. I want the code to get the first_name and last_name from members using the "efrom" from messages that matches the "id" from members. $col = array(); $col["title"] = "From"; $col["name"] = "messages.efrom"; $col["width"] = "70"; $col["hidden"] = false; $col["editable"] = false; $col["sortable"] = true; $col["search"] = true; $cols[] = $col; $col = array(); $col["title"] = "First Name"; $col["name"] = "members.first_name"; $col["width"] = "80"; $col["hidden"] = false; $col["editable"] = false; $col["sortable"] = true; $col["search"] = true; $cols[] = $col; $col = array(); $col["title"] = "Last Name"; $col["name"] = "members.last_name"; $col["width"] = "80"; $col["hidden"] = false; $col["editable"] = false; $col["sortable"] = true; $col["search"] = true; $cols[] = $col; $col = array(); $col["title"] = "Subject"; $col["name"] = "messages.esubject"; $col["width"] = "300"; $col["hidden"] = false; $col["editable"] = false; $col["sortable"] = true; $col["search"] = true; $cols[] = $col; $col = array(); $col["title"] = "Date"; $col["name"] = "messages.edatetime"; $col["width"] = "150"; $col["hidden"] = false; $col["editable"] = false; $col["sortable"] = true; $col["search"] = true; $cols[] = $col; $g = new jqgrid(); $grid["sortname"] = 'messages.edatetime'; $g->select_command = "SELECT messages.efrom, messages.esubject, messages.edatetime, members.first_name, members.last_name FROM messages INNER JOIN members ON messages.efrom = members.id";

    Read the article

  • jqGrid dynamic select option - beforeEditCell not firing

    - by mango
    I'm creating a jqgrid with one drop down column. I need the options of the drop down columns to change dynamically so I thought I can catch the beforeCellEdit event. however it does not seem to be firing. any idea on what i am doing wrong? there is no error, and i did check that i have included the jqgrid edit js files. var lastsel2; jQuery(document).ready(function(){ jQuery("#projectList").jqGrid({ datatype: 'json', url:'projectDrv.jsp', mtype: 'GET', height: 250, colNames:['Node','Proposal #', 'Status', 'Vendor', 'Actions'], colModel :[ {name:'node', index:'node', width:100, editable:false, sortable:false}, {name:'proposal', index:'proposal', width:100, editable:false, resizable:true }, {name:'status', index:'status', width:100, resizable:true, sortable:false, editable:false }, {name:'vendor', index:'vendor', width:100, resizable:true, editable:false, sortable: false }, {name:'actions', index:'actions', width:100, resizable:true, sortable:false, editable: true, edittype:"select" } ], pager: '#pager', rowNum: 10, sortname: 'proposal', sortorder: 'desc', viewrecords: true, onSelectRow: function(id){ if (id && id!==lastsel2){ jQuery('#projectList').jqGrid('restoreRow',lastsel2); jQuery('#projectList').jqGrid('editRow',id,true); lastsel2 = id; } }, beforeEditCell: function(rowid, cellname, value, irow, icol) { alert("before edit here " + rowid); // set editoptions here } });

    Read the article

  • Using Flexigrid with an xml formatted source how do you specify how the xml is formatted?

    - by stormist
    I have my columns set as follows: colModel : [ {display: 'column1', name : 'column1', width : 200, sortable : true, align: 'center'}, {display: 'column2', name : 'column2', width : 100, sortable : true, align: 'left'}, {display: 'column3', name : 'column3', width : 100, sortable : true, align: 'left'}, {display: 'column4', name : 'column4', width : 300, sortable : true, align: 'left'}, ], I set my data source to a url that returns xml. The xml is like this: <?xml version="1.0"?> <items_list> <item> <column1>BlahBlah</column1> <column2>BlahBlah</column2> <column3>BlahBlah</column3> <column4>BlahBlah</column4> </item> <item> <column1>BlahBlah</column1> <column2>BlahBlah</column2> <column3>BlahBlah</column3> <column4>BlahBlah</column4> </item> </items_list> How can I bind the grid to the xml datasource, it doesn't appear to recognize it as it is?

    Read the article

  • GRID is not properly rendered in ExtJS 4 by using Store

    - by user548543
    Here is the Src code for HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> <html> <head> <title>MVC Architecture</title> <link rel="stylesheet" type="text/css" href="/bh/extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/ext-debug.js"></script> <script type="text/javascript" src="Main.js"></script> </head> <body> </body> </html> File path: /bh/Main.js [Main File] Ext.require('Ext.container.Viewport'); Ext.application({ name: 'App', appFolder: 'app', controllers: ['UserController'], launch: function() { Ext.create('Ext.container.Viewport', { layout: 'border', items: [ { xtype: 'userList' } ] }); } }); File path: /app/controller/UserController.js [Controller] Ext.define('App.controller.UserController',{ extend: 'Ext.app.Controller', stores: ['UserStore'], models:['UserModel'], views:['user.UserList'], init: function() { this.getUserStoreStore().load(); } }); File path: /app/store/UserStore.js Ext.define('App.store.UserStore', { extend: 'Ext.data.Store', model: 'App.model.UserModel', proxy: { type: 'ajax', url: 'app/data/contact.json' } }); File path: /app/model/UserModel.js [Model] Ext.define('App.model.UserModel',{ extends:'Ext.data.Model', fields:[ {name: 'name', type: 'string'}, {name: 'age', type: 'string'}, {name: 'phone', type: 'string'}, {name: 'email', type: 'string'} ] }); File path: /app/view/UserList.js [View] Ext.define('App.view.user.UserList' ,{ extend: 'Ext.grid.Panel', alias:'widget.userList', title:'Contacts', region:'center', resizable:true, initComponent: function() { this.store = 'UserStore'; this.columns = [ {text: 'Name',flex:1,sortable: true,dataIndex: 'name'}, {text: 'Age',flex:1,sortable: true,dataIndex: 'age'}, {text: 'Phone',flex:1,sortable: true,dataIndex: 'phone'}, {text: 'Email',flex:1,sortable: true,dataIndex: 'email'} ]; this.callParent(arguments); } }); In fire bug it shows the JSON response as follows: [{ "name": "Aswini", "age": "32", "phone": "555-555-5555", "email": "[email protected]" }] Why the Data has not been displayed although I have a valid json response. Please help!!!

    Read the article

  • ul sortables get serialized data

    - by russp
    Hi folks Any ideas how to get the serilized data from this function? the html is first with the JQuery function last, I cannot get the serialization to appear in the alert. When I can do that I can finish this by sending via ajax etc... <div class="column" id="col1"> <div class="portlet"> <div class="portlet-header">Feeds</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">News</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> Shopping Lorem ipsum dolor sit amet, consectetuer adipiscing elit Links Lorem ipsum dolor sit amet, consectetuer adipiscing elit Images Lorem ipsum dolor sit amet, consectetuer adipiscing elit $(function() { $("#col1, #col2, #col3").sortable({ connectWith: '.column', receive : function () { serial = $('#col1').sortable('serialize'); //serial2 = $('#col2').sortable('serialize'); //serial3 = $('#col3').sortable('serialize'); alert(serial); } }); });

    Read the article

< Previous Page | 4 5 6 7 8 9 10 11 12 13 14 15  | Next Page >