Search Results

Search found 340 results on 14 pages for 'sortable'.

Page 13/14 | < Previous Page | 9 10 11 12 13 14  | Next Page >

  • make array from a list of images with jquery

    - by robertdd
    i have a list of photos like this: <div class="upimage"> <ul id="upimagesQueue" class="thumbs ui-sortable"> <li id="upimagesKHGYUD"> <a href="uploads/0002.jpg"> <img src="uploads/0002.jpg" id="KHGYUD"> </a> </li> <li id="upimagesNCEEKI"> <a href="uploads/0003.jpg"> <img src="uploads/0003.jpg" id="NCEEKI"> </a> </li> <li id="upimagesPWSHUN"> <a href="uploads/0003.jpg"> <img src="uploads/0003.jpg" id="PWSHUN"> </a> </li> <li id="upimagesOYJAQV"> <a href="uploads/0004.jpg"> <img src="uploads/0004.jpg" id="OYJAQV"> </a> </li> </ul> </div> i want to make a function in jquery too get all the images in 1 array to be able to sent the array to php! the array i want to be in this form: array( 'image_id_1' => array( 'image_src_1' => 'xyz.jpg', ) 'image_id_2' => array( 'image_src_2' => 'xyz.jpg', ) 'image_id_3' => array( 'image_src_3' => 'xyz.jpg', ) 'image_id_4' => array( 'image_src_4' => 'xyz.jpg', ) ) how i can code this? thanks

    Read the article

  • Populate a column as a result of performing math on two columns in a jqGrid.

    - by HacksawOnRye
    Background: Our company selected a workflow tool that has some "interersting" UI restrictions. jqGrid has been identified as one of best ways to overcome these restrictions. Consequently, the answers to this question need to be restricted to functionlity available within the jqGrid space. It pains me to pose this question and I know you will tempted to go down a million other paths - most that we have already traveled before. :( Question: Can jqGrid populate a column as a result of performing math on two other columns. The source of those two columns is in our control so we can "guarantee" that numeric data will be returned. Also, the result is something that we simplay want to display on demand but not store yet. On the example below, is there a function that allow the 'total' column to be populated from the following calculation: 'amount' * 'tax' Example jqGrid javascript: jQuery("#list3").jqGrid({ url:'server.php?q=2', datatype: "json", 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"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {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} ], rowNum:20, rowList:[10,20,30], pager: '#pager3', sortname: 'id', viewrecords: true, sortorder: "desc", loadonce: true, caption: "Load Once Example" });

    Read the article

  • jQuery pagination without all the rows of data before hand

    - by Aaron Mc Adam
    Hi guys, I'm trying to find a solution for paginating my search results. I have a built the links and everything works without jQuery. I've also got AJAX working for the links, but I just need a way of tidying up the list of links, as some search results return up to 60 pages and the links spread to two rows in my template. I am searching the Amazon API, and can only return 10 results at a time. Upon clicking the pagination links, the next 10 results are returned. I have access to the total results number from the XML, but not all the data at once, so I can't put all the data into a "hiddenResults" div that the jQuery Pagination plugin needs. Here is the jQuery I have for the pagination: var $pagination = $("#pagination ul"); $pagination.delegate('.pagenumbers', 'click', function() { var $$this = $(this); $$this.closest('li').addClass('cached'); $pagination.find("#currentPage").removeAttr('id').wrapInner($('<a>', {'class':'pagenumbers', 'href':'book_data.php?keywords='+keywords})); $$this.closest('li').attr('id','currentPage').html( $$this.text() ); $.ajax({ type : "GET", cache : false, url : "book_data.php", data : { keywords : keywords, page : $$this.text() }, success : show_results }); return false; }); function show_results(res) { $("#searchResults").replaceWith($(res).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd'); detailPage(); selectForm(); if ( ! ( $pagination.find('li').hasClass('cached') ) ) { $.get("book_data.php", { keywords : keywords, page : ( $pagination.find("#currentPage").text() + 1 ) } ); } }

    Read the article

  • JQuery drag, drop and save via cookie - how to?

    - by RussP
    Sorry to be back folks, but you guys & girls seem to know much more about this than I do ... anyhow, here is my question/problem I want to use drag, drop, sort (the interface plugin does me even though I have read it's out of date? but have looked at UI and to be honest is not clear and to me appears heavier than interface?) Anyhow, how do I set a cookie to save positions from this: $(document).ready( function () { $('a.closeEl').bind('click', toggleContent); $('div.groupWrapper').Sortable( { accept: 'groupItem', helperclass: 'sortHelper', activeclass : 'sortableactive', hoverclass : 'sortablehover', handle: 'div.itemHeader', tolerance: 'pointer', onChange : function(ser) { }, onStart : function() { $.iAutoscroller.start(this, document.getElementsByTagName('body')); }, onStop : function() { $.iAutoscroller.stop(); } } ); } ); var toggleContent = function(e) { var targetContent = $('div.itemContent', this.parentNode.parentNode); if (targetContent.css('display') == 'none') { targetContent.slideDown(300); $(this).html('[-]'); } else { targetContent.slideUp(300); $(this).html('[+]'); } return false; }; var ser = function (s) { serial = $.SortSerialize(s); alert(serial.hash); }; which is the "standard" interface demo, PLUS How do I then get to read that cookie so that when I next visit the page the order is as I set it in the cookie? Hopefully from that I can work out the rest .......? Thanks for help in advance.

    Read the article

  • JavaScript: How to reverse order=[] arrays from last to first?

    - by Binyamin
    My js code does POST order.php?order[]=1&order[]=2&order[]=3&order[]=4&order[]=5&&action=update How to reverse it to order.php?order[]=5&order[]=4&order[]=3&order[]=2&order[]=1&&action=update ? JavaScript: order=[]; //var reversed = $(this).sortable("serialize").split("&").reverse().join("&"); //var order = reversed + '&action=update'; //unfortunately it does not work so $('#list ul').children('li').each(function(idx, elm) { order.push(elm.id.split('-')[1]) }); $.post('order.php', {'order[]': order, action: 'update'}); HTML: <ul> <li id="oreder-5">5</li> <li id="oreder-4">4</li> <li id="oreder-3">3</li> <li id="oreder-2">2</li> <li id="oreder-1">1</li> <ul>

    Read the article

  • Get dragged / saved items state back from Sql Server

    - by user571507
    Ok i saw many post's on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do i persist the dragged items the next time when user log's in using the has value that i got eg: <ul class="list"> <li id="id_1"> <div class="item ui-corner-all ui-widget ui-widget-content"> </div> </li> <li id="id_2"> <div class="item ui-corner-all ui-widget ui-widget-content"> </div> </li> <li id="id_3"> <div class="item ui-corner-all ui-widget ui-widget-content"> </div> </li> <li id="id_4"> <div class="item ui-corner-all ui-widget"> </div> </li> </ul> which on serialize will give "id[]=1&id[]=2&id[]=3&id[]=4" Now think that i saved it to Sql server database in a single field called SortOrder. Now how do i get the items to these order again ? the code to make these sort is below,without which people didn't know which library i had used to sort and serialize <script type="text/javascript"> $(document).ready(function() { $(".list li").css("cursor", "move"); $(".list").sortable(); }); </script>

    Read the article

  • Populate table fields on query execution

    - by Jason
    I'm trying to build an ASP site that populates a Table based on the results of a selection in a ListBox. In order to do this, I've created a GridView table inside a div element. Currently the default behavior is to show all the items in the specified table in sortable order. However, I'd like to refine this further to allow for display of matches based on the results from the ListBox selection, but am not sure how to execute this. The ListBox fires off a OnSelectionChanged event to the method defined below and the GridView element is defined as <asp:GridView ID="dataListings" runat="server" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="LinqDataSource1" OnDataBinding="ListBox1_SelectedIndexChanged"> protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) { int itemSelected = selectTopics.SelectedIndex; string[] listing = null; switch (itemSelected)//assign listing the array of course numbers { case 0: break; case 1: listing = arts; break; case 2: listing = currentEvents; break; .... More cases here default: listing = arts; break; } using (OLLIDBDataContext odb = new OLLIDBDataContext()) { var q = from c in odb.tbl_CoursesAndWorkshops where listing.Contains(c.tbl_Course_Description.tbl_CoursesAndWorkshops.course_workshop_number) select c; dataListings.DataSource = q; dataListings.DataBind(); } } However, this method never gets fired. I can see a request being made when changing the selection, but setting a breakpoint at the method declaration does nothing at all. Based on this, setup, I have three related questions What do I need to modify to get the OnSelectionChanged event handler to fire? How can I alter the GridView area to be empty on page load? How do I send the results from the dataListings.DataBind() execution to show in the GridView?

    Read the article

  • Retaining column state in grid panel depending on the user settings.

    - by xrx215
    Hi, I have a grid panel where I am retaining the state of the columns.It works fine for all the columns except one where i show or hide the column depending on user settings. If a checkbox is checked then i show the column in grid panel else hide it. In the column model I have defined the column as follows var colModel = new Ext.grid.ColumnModel([{ header: xppo.st('SDE_RESPONSIBILITY_ACTION1'), width: 80, sortable: true, hidden: !showColumn, hideable: !showInMenu, dataIndex: 'ResponsibilityForAction' }} In the grid panel I have given the following if (showColumn) { grid.getColumnModel().setHidden(23, false); } else { grid.getColumnModel().setHidden(23, true); } so i change the value of the checkbox column in the column header is shown (alowing the user to enable and disable in grid panel) or completely not shown in the column menu. So when the column in column menu does not exists it should no longer show that particular column in grid panel.But because I am retaining the state of the grid panel even though the column in column menu does not exists this particular column retains the state i.e it is still shown in grid panel. My question is how can we show or hide columns in grid panel like the way we do in column model.??

    Read the article

  • ASP.Net Custom Paging (w/ C#)

    - by André Alçada Padez
    Cenario: I have a GridView bound to a DataSource, every column is sortable. my main query is something like: select a, b, c, d, e, f from table order by somedate desc i added a filter form where i can define values to each one of the fields and get the results of a where form. As a result from this, i had to do a custom sorting so that when i sort by a field, i am sorting the filtered query and not the main one. Now i have to do custom paging, for the same reason, but i don't understand the philosophy of it: I want to guarantee that i can: filter the results sort by a column when i click on page 2, i get page two of the filtered and sorted results I don't know what i have to do, so i can bind the GV with this. My sorting Method, that is working just fine looks something like: string condition = GetConditions(); //gets a string like " where a>1 and b>2" depending on the filter the user defines string query = "select a, b, c, d, e, f from table "; string direction = (e.SortDirection == SortDirection.Ascending)? "asc": "desc"; string order = " order by " + e.SortExpression + " " + direction; UtilizadoresDataSource.SelectCommand = query + condition + order; i've never done custom paging, i am trying: GetConditions() //no problem here How can i find out how the GridView is sorted (by what field and sortingorder)? thank you very much

    Read the article

  • Best way to build an application based on R?

    - by Prasad Chalasani
    I'm looking for suggestions on how to go about building an application that uses R for analytics, table generation, and plotting. What I have in mind is an application that: displays various data tables in different tabs, somewhat like in Excel, and the columns should be sortable by clicking. takes user input parameters in some dialog windows. displays plots dynamically (i.e. user-input-dependent) either in a tab or in a new pop-up window/frame Note that I am not talking about a general-purpose fron-end/GUI for exploring data with R (like say Rattle), but a specific application. Some questions I'd like to see addressed are: Is an entirely R-based approach even possible ( on Windows ) ? The following passage from the Rattle article in R-Journal intrigues me: It is interesting to note that the first implementation of Rattle actually used Python for implementing the callbacks and R for the statistics, using rpy. The release of RGtk2 allowed the interface el- ements of Rattle to be written directly in R so that Rattle is a fully R-based application If it's better to use another language for the GUI part, which language is best suited for this? I'm looking for a language where it's relatively "painless" to build the GUI, and that also integrates very well with R. From this StackOverflow question How should I do rapid GUI development for R and Octave methods (possibly with Python)? I see that Python + PyQt4 + QtDesigner + RPy2 seems to be the best combo. Is that the consensus ? Anyone have pointers to specific (open source) applications of the type I describe, as examples that I can learn from?

    Read the article

  • load data from grid row into (pop up) form for editing

    - by user1495457
    I read in Ext JS in Action ( by J. Garcia) that if we have an instance of Ext.data.Record, we can use the form's loadRecord method to set the form's values. However, he does not give a working example of this (in the example that he uses data is loaded into a form through a file called data.php). I have searched many forums and found the following entry helpful as it gave me an idea on how to solve my problem by using form's loadRecord method: load data from grid to form Now the code for my store and grid is as follows: var userstore = Ext.create('Ext.data.Store', { storeId: 'viewUsersStore', model: 'Configs', autoLoad: true, proxy: { type: 'ajax', url: '/user/getuserviewdata.castle', reader: { type: 'json', root: 'users' }, listeners: { exception: function (proxy, response, operation, eOpts) { Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and try again."); } } } }); var grid = Ext.create('Ext.grid.Panel', { id: 'viewUsersGrid', title: 'List of all users', store: Ext.data.StoreManager.lookup('viewUsersStore'), columns: [ { header: 'Username', dataIndex: 'username' }, { header: 'Full Name', dataIndex: 'fullName' }, { header: 'Company', dataIndex: 'companyName' }, { header: 'Latest Time Login', dataIndex: 'lastLogin' }, { header: 'Current Status', dataIndex: 'status' }, { header: 'Edit', menuDisabled: true, sortable: false, xtype: 'actioncolumn', width: 50, items: [{ icon: '../../../Content/ext/img/icons/fam/user_edit.png', tooltip: 'Edit user', handler: function (grid, rowIndex, colIndex) { var rec = userstore.getAt(rowIndex); alert("Edit " + rec.get('username')+ "?"); EditUser(rec.get('id')); } }] }, ] }); function EditUser(id) { //I think I need to have this code here - I don't think it's complete/correct though var formpanel = Ext.getCmp('CreateUserForm'); formpanel.getForm().loadRecord(rec); } 'CreateUserForm' is the ID of a form that already exists and which should appear when user clicks on Edit icon. That pop-up form should then automatically be populated with the correct data from the grid row. However my code is not working. I get an error at the line 'formpanel.getForm().loadRecord(rec)' - it says 'Microsoft JScript runtime error: 'undefined' is null or not an object'. Any tips on how to solve this?

    Read the article

  • making an SQL date column visible to a Drupal view

    - by Donal
    I'm trying to make a table visible to Views. One of the columns has type date (as opposed to a Unix timestamp). The example I initially tried to copy from is in modules/comment.views.inc in the Views module: // timestamp (when comment was posted) $data['comments']['timestamp'] = array( 'title' => t('Post date'), 'help' => t('Date and time of when the comment was posted.'), 'field' => array( 'handler' => 'views_handler_field_date', 'click sortable' => TRUE, ), 'sort' => array( 'handler' => 'views_handler_sort_date', ), 'filter' => array( 'handler' => 'views_handler_filter_date', ), ); This makes the dates, which are all in the past year or so, show up as "1 Jan 1970 00:33", so evidently a value of '2010-05-12', for example, is being interpreted as 2010 seconds past 1 Jan 1970 00:00. Can anyone point me to a correct way of exporting date columns? EDIT: I'm following up on some clues found at http://drupal.org/node/476774 .

    Read the article

  • paginate the class

    - by small
    please help me with pagination of this method my method is this one controller # def show @topic = Topic.find(params[:id]) @posts = @topic.posts.find(:all ,:order=> 'id') end views # %div{:style=>"margin: 0 auto;"} %table.sortable.style2{:cellpadding=>5} %thead %tr %td{:width => "25%",:align => "center",:style => "font-weight: bold;"}Posted By %td{:width => "75%",:style => "font-weight: bold;"}Comments %tbody - for post in @posts %tr %td{:align => "center"} &nbsp %div{:width=>"5px" , :style=>"border: 1px solid rgb(232, 232, 232);background-color: rgb(248, 248, 248);width: 60px; height:60px;" } - if post.posted_by.image = image_tag(post.posted_by.image.public_filename(),:width => "60px", :height => "60px",:align=>"center") %div{:style => "font-weight: bold; font-style: italic;"} = post.posted_by ? post.posted_by.firstname : "<em>Unknown User</em>" %br %div{:style => "font-style: italic;"} Posted on = post.created_at.strftime('%d of %B %Y ') = post.created_at.strftime('at %H:%M') %td{:valign => "top"} =post.body

    Read the article

  • Isotope.js help: Changing item image after sorting

    - by user3643081
    This is a general question on how to go about building a project I have in mind, and the best way to set off on the right foot. I am fairly new to JS, please be gentle. I want to use isotope.js (or a similar script) to display a page with multiple items (about 30 different plants found in a garden) and the ability to sort them by seasons of the year + "what is most beautiful now" + and "view all" (a total of 6 categories) . On load, or when sorted by either "what is beautiful now" or "view all", I need each item to reflect the image of the current season we are in. When sorted by season, I need those "current" images to switch over to a designated seasonal image of that plant. Therefore, each sortable item will ultimately have 4 different versions with 4 different images in the background ready to surface when plants are sorted. (perhaps 5 if it makes more sense to have a "current" version besides the 4 seasonal versions.) My question: what approach can I take to achieve this effect in a manageable way? Can isotope apply a class to items sorted? Assuming it can: Should each item have 4 inline images, each with a css class, that I then control by using display:inline; and display:none; properties from my stylesheets? (I worry that this approach would significantly increase load times) Would it make more sense to create a blank dummy div who's background I control similarly to the example above -relying mostly on CSS. Or is there some other way involving JS I am overlooking? Any help would be appreciated. Examples of what you suggest would be immensely helpful.

    Read the article

  • how to pull and display range (min-max) data for each page in pagination?

    - by Ty W
    I have a table of data that is searchable and sortable, but likely to produce hundreds or thousands of results for broad searches. Assuming the user searches for "foo" and sorts the foos in descending price order I'd like to show a quick-jump select menu like so: <option value="1">Page 1 ($25,000,000 - $1,625,000)</option> <option value="2">Page 2 ($1,600,000 - $1,095,000)</option> <option value="3">Page 3 ($1,095,000 - $815,000)</option> <option value="4">Page 4 ($799,900 - $699,000)</option> ... Is there an efficient way of querying for this information directly from the DB? I've been grabbing all of the matching records and using PHP to calculate the min and max value for each page which seems inefficient and likely to cause scaling problems. The only possible technique I've been able to come up with is some way of having a calculated variable that increments every X records (X records to a page), grouping by that, and selecting MIN/MAX for each page grouping... unfortunately I haven't been able to come up with a way to generate that variable.

    Read the article

  • asp.net - updatepannel can't read innerHTML?

    - by omega
    In my asp.net page, I have a jquery sortable accordian (in an update panel) I use so that clients can re-arrange items. Then to save it, users would click a button (thats created from jquery) and it would traverse through the accoridion in the DOM, and write the info to a asp control textbox. Then invoke the click function of a asp button control, which then reads that information and saves the data. But now I decided to simplify this step, and use html agility pack in c#, so users click the asp button control (inside an update panel), and then it would get the innerHTML of the accordian. But the problem is, the html it's getting is not the reflecting the changes a user can make to the accordion (i.e. re arranging it), it the same as when the DOM was ready on page load... But note that, using javascript to write the innerHTML to a textbox, then from the c# function, I can read the up to date html from the accordian. Does anyone know why this is happening and how to get the up to data html from the accordian in c#?

    Read the article

  • jqGrid - dynamically load different drop down values for different rows depending on another column value

    - by Renso
    Goal: As we all know the jqGrid examples in the demo and the Wiki always refer to static values for drop down boxes. This of course is a personal preference but in dynamic design these values should be populated from the database/xml file, etc, ideally JSON formatted. Can you do this in jqGrid, yes, but with some custom coding which we will briefly show below (refer to some of my other blog entries for a more detailed discussion on this topic). What you CANNOT do in jqGrid, referrign here up and to version 3.8.x, is to load different drop down values for different rows in the jqGrid. Well, not without some trickery, which is what this discussion is about. Issue: Of course the issue is that jqGrid has been designed for high performance and thus I have no issue with them loading a  reference to a single drop down values list for every column. This way if you have 500 rows or one, each row only refers to a single list for that particuolar column. Nice! SO how easy would it be to simply traverse the grid once loaded on gridComplete or loadComplete and simply load the select tag's options from scratch, via ajax, from memory variable, hard coded etc? Impossible! Since their is no embedded SELECT tag within each cell containing the drop down values (remeber it only has a reference to that list in memory), all you will see when you inspect the cell prior to clicking on it, or even before and on beforeEditCell, is an empty <TD></TD>. When trying to load that list via a click event on that cell will temporarily load the list but jqGrid's last internal callback event will remove it and replace it with the old one, and you are back to square one. Solution: Yes, after spending a few hours on this found a solution to the problem that does not require any updates to jqGrid source code, thank GOD! Before we get into the coding details, the solution here can of course be customized to suite your specific needs, this one loads the entire drop down list that would be needed across all rows once into global variable. I then parse this object that contains all the properties I need to filter the rows depending on which ones I want the user to see based off of another cell value in that row. This only happens when clicking the cell, so no performance penalty. You may of course to load it via ajax when the user clicks the cell, but I found it more effecient to load the entire list as part of jqGrid's normal editoptions: { multiple: false, value: listingStatus } colModel options which again keeps only a reference to the sinlge list, no duplciation. Lets get into the meat and potatoes of it.         var acctId = $('#Id').val();         var data = $.ajax({ url: $('#ajaxGetAllMaterialsTrackingLookupDataUrl').val(), data: { accountId: acctId }, dataType: 'json', async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the Alert related lookup data.'); } }).responseText;         var lookupData = eval('(' + data + ')');         var listingCategory = lookupData.ListingCategory;         var listingStatus = lookupData.ListingStatus;         var catList = '{';         $(lookupData.ListingCategory).each(function() {             catList += this.Id + ':"' + this.Name + '",';         });         catList += '}';         var lastsel;         var ignoreAlert = true;         $(item)         .jqGrid({             url: listURL,             postData: '',             datatype: "local",             colNames: ['Id', 'Name', 'Commission<br />Rep', 'Business<br />Group', 'Order<br />Date', 'Edit', 'TBD', 'Month', 'Year', 'Week', 'Product', 'Product<br />Type', 'Online/<br />Magazine', 'Materials', 'Special<br />Placement', 'Logo', 'Image', 'Text', 'Contact<br />Info', 'Everthing<br />In', 'Category', 'Status'],             colModel: [                 { name: 'Id', index: 'Id', hidden: true, hidedlg: true },                 { name: 'AccountName', index: 'AccountName', align: "left", resizable: true, search: true, width: 100 },                 { name: 'OnlineName', index: 'OnlineName', align: 'left', sortable: false, width: 80 },                 { name: 'ListingCategoryName', index: 'ListingCategoryName', width: 85, editable: true, hidden: false, edittype: "select", editoptions: { multiple: false, value: eval('(' + catList + ')') }, editrules: { required: false }, formatoptions: { disabled: false} }             ],             jsonReader: {                 root: "List",                 page: "CurrentPage",                 total: "TotalPages",                 records: "TotalRecords",                 userdata: "Errors",                 repeatitems: false,                 id: "0"             },             rowNum: $rows,             rowList: [10, 20, 50, 200, 500, 1000, 2000],             imgpath: jQueryImageRoot,             pager: $(item + 'Pager'),             shrinkToFit: true,             width: 1455,             recordtext: 'Traffic lines',             sortname: 'OrderDate',             viewrecords: true,             sortorder: "asc",             altRows: true,             cellEdit: true,             cellsubmit: "remote",             cellurl: editURL + '?rows=' + $rows + '&page=1',             loadComplete: function() {               },             gridComplete: function() {             },             loadError: function(xhr, st, err) {             },             afterEditCell: function(rowid, cellname, value, iRow, iCol) {                 var select = $(item).find('td.edit-cell select');                 $(item).find('td.edit-cell select option').each(function() {                     var option = $(this);                     var optionId = $(this).val();                     $(lookupData.ListingCategory).each(function() {                         if (this.Id == optionId) {                                                       if (this.OnlineName != $(item).getCell(rowid, 'OnlineName')) {                                 option.remove();                                 return false;                             }                         }                     });                 });             },             search: true,             searchdata: {},             caption: "List of all Traffic lines",             editurl: editURL + '?rows=' + $rows + '&page=1',             hiddengrid: hideGrid   Here is the JSON data returned via the ajax call during the jqGrid function call above (NOTE it must be { async: false}: {"ListingCategory":[{"Id":29,"Name":"Document Imaging & Management","OnlineName":"RF Globalnet"} ,{"Id":1,"Name":"Ancillary Department Hardware","OnlineName":"Healthcare Technology Online"} ,{"Id":2,"Name":"Asset Tracking","OnlineName":"Healthcare Technology Online"} ,{"Id":3,"Name":"Asset Tracking","OnlineName":"Healthcare Technology Online"} ,{"Id":4,"Name":"Asset Tracking","OnlineName":"Healthcare Technology Online"} ,{"Id":5,"Name":"Document Imaging & Management","OnlineName":"Healthcare Technology Online"} ,{"Id":6,"Name":"Document Imaging & Management","OnlineName":"Healthcare Technology Online"} ,{"Id":7,"Name":"EMR/EHR Software","OnlineName":"Healthcare Technology Online"}]} I only need the Id and Name for the drop down list, but the third column in the JSON object is important, it is the only that I match up with the OnlineName in the jqGrid column, and then in the loop during afterEditCell simply remove the ones I don't want the user to see. That's it!

    Read the article

  • ASP.NET GridView second header row to span main header row

    - by Dana Robinson
    I have an ASP.NET GridView which has columns that look like this: | Foo | Bar | Total1 | Total2 | Total3 | Is it possible to create a header on two rows that looks like this? | | Totals | | Foo | Bar | 1 | 2 | 3 | The data in each row will remain unchanged as this is just to pretty up the header and decrease the horizontal space that the grid takes up. The entire GridView is sortable in case that matters. I don't intend for the added "Totals" spanning column to have any sort functionality. Edit: Based on one of the articles given below, I created a class which inherits from GridView and adds the second header row in. namespace CustomControls { public class TwoHeadedGridView : GridView { protected Table InnerTable { get { if (this.HasControls()) { return (Table)this.Controls[0]; } return null; } } protected override void OnDataBound(EventArgs e) { base.OnDataBound(e); this.CreateSecondHeader(); } private void CreateSecondHeader() { GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal); TableCell left = new TableHeaderCell(); left.ColumnSpan = 3; row.Cells.Add(left); TableCell totals = new TableHeaderCell(); totals.ColumnSpan = this.Columns.Count - 3; totals.Text = "Totals"; row.Cells.Add(totals); this.InnerTable.Rows.AddAt(0, row); } } } In case you are new to ASP.NET like I am, I should also point out that you need to: 1) Register your class by adding a line like this to your web form: <%@ Register TagPrefix="foo" NameSpace="CustomControls" Assembly="__code"%> 2) Change asp:GridView in your previous markup to foo:TwoHeadedGridView. Don't forget the closing tag. Another edit: You can also do this without creating a custom class. Simply add an event handler for the DataBound event of your grid like this: protected void gvOrganisms_DataBound(object sender, EventArgs e) { GridView grid = sender as GridView; if (grid != null) { GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal); TableCell left = new TableHeaderCell(); left.ColumnSpan = 3; row.Cells.Add(left); TableCell totals = new TableHeaderCell(); totals.ColumnSpan = grid.Columns.Count - 3; totals.Text = "Totals"; row.Cells.Add(totals); Table t = grid.Controls[0] as Table; if (t != null) { t.Rows.AddAt(0, row); } } } The advantage of the custom control is that you can see the extra header row on the design view of your web form. The event handler method is a bit simpler, though.

    Read the article

  • Search option: jqGrid + PHP

    - by Felix Guerrero
    Hi, I'm trying to get work this code: $("#list").jqGrid({ url: 'docente.php', datatype: 'json', mtype: 'POST', postData: {c : "", n: "", a: "", d: "", t: "", e: "", f: "", g: $('#selectD').value(), p: "", call: "report"}, colNames: ['C&eacute;dula','Nombres', 'Apellidos', 'Direcci&oacute;n', 'E-mail','Tel&eacute;fono', 'Profesi&oacute;n'], colModel: [ { name:'rows.cedula', index: 'cedula', search:true, jsonmap: 'cedula', width: 150, align: 'left', sortable:true}, { name:'rows.nombre', index: 'nombre', jsonmap: 'nombre', width: 150, align: 'left'}, { name:'rows.apellido', index: 'apellido', jsonmap: 'apellido', width: 240, align: 'left'}, { name:'rows.direccion', index: 'direccion', jsonmap: 'direccion', width: 330, align: 'left'}, { name:'rows.email', index: 'email', jsonmap: 'email',width: 200, align: 'left'}, { name:'rows.telefono', index: 'telefono', jsonmap: 'telefono', width: 170, align: 'left'}, { name:'rows.descripcion_profesion', index: 'descripcion_profesion', jsonmap: 'descripcion_profesion',width: 120, align: 'left'}], pager: '#pager', rowNum: 8, autowidth: true, rowList: [10, 20], sortname: 'cedula', sortorder: 'asc', viewrecords: true, caption: 'Docentes', jsonReader : { root: "rows", repeatitems: false }, height: 350, width: 900 }); $("#list").jqGrid('navGrid','#pager',{search:true, searchtext: "buscar",edit:false,add:false,del:false}); The HMTL I'm using: <div id="reporte"> <table id="list"></table> <div id="pager"> </div> <div> And the PHP code: $total_pages = 0; $limit=10; $count = Profesor::CountAll(); if($count> 0) $total_pages= ceil($count/$limit); else $total_pages=0; $cnx = new PDO("mysql:host=localhost;dbname=appsms","root",""); $rows = array(); $strQuery="select cedula, nombre, apellido, direccion, telefono, email, descripcion_profesion from Profesor join Profesion on " . " (profesor.profesion_id = profesion.id) and (profesor.grado_id_grado = '" .$this->grado . "') order by cedula;"; $stmt = $cnx->prepare($strQuery); $stmt->execute(array("reporte")); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); $response->page = 1; $response->total= $total_pages; $response->records = sizeof($rows); $i=0; foreach($rows as $result){ $response->rows[$i] = $result; $i++; } echo json_encode($response); The JSON I get: {"page":1,"total":1,"records":2, "rows":[{"cedula":"v-108984103","nombre":"Soneia","apellido":"Rond\u00f3n Contreras","direccion":"El Rosal, calle 2-44","telefono":"04544247008457","email":"[email protected]","descripcion_profesion":"Docente"}, {"cedula":"v-135254741","nombre":"Judith","apellido":"Rangel M\u00e1rquez","direccion":"Sabaneta","telefono":"04247644152499","email":"","descripcion_profesion":"Docente"}]} It loads the query from PHP but the search option doesn't work neither the sorting function on "cedula"'s column. What I need to do?. Thanks in advance.

    Read the article

  • jQuery UI portlets - toggle portlets to save to a cookie (half way there!)

    - by Gareth
    Hi, I'm a bit of a jQuery n00b so please excuse me if this seems like a stupid question. I am creating a site using the jQuery UI more specifically the sortable portlets. I have been able store whether or not a portlet is has been open or closed to a cookie. This is done using the following code. The slider ID is currently where the controls are stored to turn each portlet on and off. var cookie = $.cookie("hidden"); var hidden = cookie ? cookie.split("|").getUnique() : []; var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date // Remember content that was hidden $.each( hidden, function(){ var pid = this; //parseInt(this,10); $('#' + pid).hide(); $("#slider div[name='" + pid + "']").addClass('add'); }) // Add Click functionality $("#slider div").click(function(){ $(this).toggleClass('add'); var el = $("div#" + $(this).attr('name')); el.toggle(); updateCookie(el); }); $('a.toggle').click(function(){ $(this).parents(".portlet").hide(); // *** Below line just needs to select the correct 'id' and insert as selector i.e ('#slider div#block-1') and then update cookie! *** $('#slider div').addClass('add'); }); // Update the Cookie function updateCookie(el){ var indx = el.attr('id'); var tmp = hidden.getUnique(); if (el.is(':hidden')) { // add index of widget to hidden list tmp.push(indx); } else { // remove element id from the list tmp.splice( tmp.indexOf(indx) , 1); } hidden = tmp.getUnique(); $.cookie("hidden", hidden.join('|'), { expires: cookieExpires } ); } }) // Return a unique array. Array.prototype.getUnique = function() { var o = new Object(); var i, e; for (i = 0; e = this[i]; i++) {o[e] = 1}; var a = new Array(); for (e in o) {a.push (e)}; return a; } What I would like to do is also add a [x] into the corner of each portlet to give the user another way of hiding it but I'm unable to currently get this to store within the Cookie using the code above. Can anyone give me a pointer of how I would do this? Thanks in advance! Gareth

    Read the article

  • jQuery remove div

    - by oshirowanen
    Hello, I have the following script jquery here: <script type="text/javascript"> $(function() { $(".column").sortable( { connectWith: '.column' }, { handle: '.widget-header' }, }); $(".widget").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".widget-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-minusthick"></span>') .end() .find(".widget-content"); $(".widget-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".widget:first").find(".widget-content").toggle(); }); $(".column").disableSelection(); }); </script> html here: <div class="divWidgets"> <div class="column" id="column_1"> <div class="widget" id="Widget_1"> <div class="widget-header" id="Widget_1_Header">widget one</div> <div class="widget-content" id="Widget_1_Content">widget one content goes here</div> </div> <div class="widget" id="Widget_0"> <div class="widget-header" id="Widget_0_Header">widget zero</div> <div class="widget-content" id="Widget_0_Content">widget zero content goes here</div> </div> </div> <div class="column" id="column_2"> <div class="widget" id="Widget_3"> <div class="widget-header" id="Widget_3_Header">widget three</div> <div class="widget-content" id="Widget_3_Content">widget three content goes here</div> </div> <div class="widget" id="Widget_5"> <div class="widget-header" id="Widget_5_Header">widget five</div> <div class="widget-content" id="Widget_5_Content">widget five content goes here</div> </div> </div> </div> As you can see, this script places a "minus" button on the widgets, which will minimize the appropriate widget when clicked. How do I replace this "minus" icon with a "delete" which will totally delete the appropriate div when clicked?

    Read the article

  • Unique ID Defined by Most-Derived Class accessible through Base Class

    - by Narfanator
    Okay, so, the idea is that I have a map of "components", which inherit from componentBase, and are keyed on an ID unique to the most-derived*. Only, I can't think of a good way to get this to work. I tried it with the constructor, but that doesn't work (Maybe I did it wrong). The problem with any virtual, etc, inheritance tricks are that the user has to impliment them at the bottom, which can be forgotten and makes it less... clean. *Right phrase? If - is inheritance; foo is most-derived: foo-foo1-foo2-componentBase Here's some code showing the problem, and why CRTP can't cut it: (No, it's not legit code, but I'm trying to get my thoughts down) #include<map> class componentBase { public: virtual static char idFunction() = 0; }; template <class T> class component : public virtual componentBase { public: static char idFunction(){ return reinterpret_cast<char>(&idFunction); } }; class intermediateDerivations1 : public virtual component<intermediateDerivations1> { }; class intermediateDerivations2 : public virtual component<intermediateDerivations2> { }; class derived1 : public intermediateDerivations1 { }; class derived2 : public intermediateDerivations1 { }; //How the unique ID gets used (more or less) std::map<char, componentBase*> TheMap; template<class T> void addToMap(componentBase * c) { TheMap[T::idFunction()] = c; } template<class T> T * getFromMap() { return TheMap[T::idFunction()]; } int main() { //In each case, the key needs to be different. //For these, the CRTP should do it: getFromMap<intermediateDerivations1>(); getFromMap<intermediateDerivations2>(); //But not for these. getFromMap<derived1>(); getFromMap<derived2>(); return 0; } More or less, I need something that is always there, no matter what the user does, and has a sortable value that's unique to the most-derived class. Also, I realize this isn't the best-asked question, I'm actually having some unexpected difficultly wrapping my head around it in words, so ask questions if/when you need clarification.

    Read the article

  • Block element text overflow problem in IE7

    - by Adomas
    I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements. Here's how it looks in IE7 (wrong): Link (cannot post images as a new user) In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user Don't mind the element order as it's random. Elements are dynamically generated by jQuery. HTML code: <div class="ui-sortable" id="area"> <span class="object">: </span> <span class="object">1998- </span> <span class="object">ISSN 1392-4087</span> <span class="object">, </span> <span class="object">. </span> <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span> <span class="object">. </span> <span class="object">. </span> <span class="object">. </span> <span class="object">Vilnius</span> <span class="object">1998- </span> <span class="object"><em>Apskaitos, audito ir mokesciu aktualijos</em></span> </div> CSS code (irrelevant info like fonts & colors removed): #area { min-height: 160px; width: 760px; } .object { display: block; float: left; text-align: center; width: auto; } Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?

    Read the article

  • problem in saving drag&drop object in database

    - by Mac Taylor
    hey guys i made a script inspired by wordpress widgets'page to drag&drop blocks of my sites but problem is in saving the position after droping this is jquery code , i used to do the above target : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){ if(response=="success") $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); setTimeout(function(){ $('#console').fadeOut(1000); }, 2000); }); } </script> and a simple php file but problem is its not sending data to target php file is there anything wrong with my code ?

    Read the article

  • jQuery tablesorter - loss of functionality after AJAX call

    - by Nick
    I have recently been experimenting with the tablesorter plugin for jQuery. I have successfully got it up and running in once instance, and am very impressed. However, I have tried to apply the tablesorter to a different table, only to encounter some difficulties... Basically the table causing a problem has a <ul> above it which acts as a set of tabs for the table. so if you click one of these tabs, an AJAX call is made and the table is repopulated with the rows relevant to the specific tab clicked. When the page initially loads (i.e. before a tab has been clicked) the tablesorter functionality works exactly as expected. But when a tab is clicked and the table repopulated, the functionality disappears, rendering it without the sortable feature. Even if you go back to the original tab, after clicking another, the functionality does not return - the only way to do so is a physical refresh of the page in the browser. I have seen a solution which seems similar to my problem on this site, and someone recommends using the jQuery plugin, livequery. I have tried this but to no avail :-( If someone has any suggestions I would be most appreciative. I can post code snippets if it would help (though I know the instantiation code for tablesorter is fine as it works on tables with no tabs - so it's definitely not that!) EDIT: As requested, here are some code snippets: The table being sorted is <table id="#sortableTable#">..</table>, the instantiation code for tablesorter I am using is: $(document).ready(function() { $("#sortableTable").tablesorter( { headers: //disable any headers not worthy of sorting! { 0: { sorter: false }, 5: { sorter: false } }, sortMultiSortKey: 'ctrlKey', debug:true, widgets: ['zebra'] }); }); And I tried to rig up livequery as follows: $("#sortableTable").livequery(function(){ $(this).tablesorter(); }); This has not helped though... I am not sure whether I should use the id of the table with livequery as it is the click on the <ul> I should be responding to, which is of course not part of the table itself. I have tried a number of variations in the hope that one of them will help, but to no avail :-(

    Read the article

< Previous Page | 9 10 11 12 13 14  | Next Page >