Search Results

Search found 18195 results on 728 pages for 'jquery pagination'.

Page 14/728 | < Previous Page | 10 11 12 13 14 15 16 17 18 19 20 21  | Next Page >

  • Telerik RadGrid: grid clientside pagination

    - by ram
    I have a web service which returns me some data,I am massaging this data and using this as datasource for my radgrid (telerik). The datasource is quite large, and would like to paginate it. I found couple of problems when I paginate it in the server side I have to bind the grid again for pagination, which essentially means I have to make a call to WS again to get the data. This is an expensive call for me. I would rather forgo the benefits of pagination and would display all the results in the same page, except for it would be a bit clumsy During the postback RadGrid1.Items.Count happens to be the number of items getting paginated (25- in my case) which is expected as all the items in the datasource are not getting bound. This of course is not an issue. The real issue is that we have some checkboxes which get checked based on some business condition. We add this to our business object/DB later. So if the user has not navigated all the pages, these "checked" items do not get added as pagination limits the "Items" in the grid to those which get bound for that particular page index. My Thoughts: I would rather have some sort of client side pagination, where we can hide/show contents than going to the server and doing a databind every time. Though it will return all the results, the UI will not be clumsy and the grid would have "all the items" during postback Is there a way to do it ? If it were a regular asp.net gridView, can someone point me to a good article which would serve my purpose Ram PS: who else think radgrid is crazy ? (unfortunately I did not make this choice)

    Read the article

  • Pagination links broken - php/jquery

    - by ClarkSKent
    Hey, I'm still trying to get my pagination links to load properly dynamically. But I can't seem to find a solution to this one problem. vote down star Hi everyone, I am still trying to figure out how to fix my pagination script to work properly. the problem I am having is when I click any of the pagination number links to go the next page, the new content does not load. literally nothing happens and when looking at the console in Firebug, nothing is sent or loaded. I have on the main page 3 links to filter the content and display it. When any of these links are clicked the results are loaded and displayed along with the associated pagination numbers for that specific content. I believe the problem is coming from the sql query in generate_pagination.php (seen below). When I hard code the sql category part it works, but is not dynamic at all. This is why I'm calling $ids=$_GET['ids']; and trying to put that into the category section but then the numbers don't display at all. If I echo out the $ids variable and click on a filter it does display the correct name/id, so I don't know why this doesn't work Here is the main page so you can see how I am including and starting the function(I'm new to php): <?php include_once('generate_pagination.php'); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_pagination.js"></script> <div id="loading" ></div> <div id="content" data-page="1"></div> <ul id="pagination"> <?php //Pagination Numbers for($i=1; $i<=$pages; $i++) { echo '<li class="page_numbers" id="page'.$i.'">'.$i.'</li>'; } ?> </ul> <br /> <br /> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> Here is the generate pagination where the problem seems to occur: <?php $ids=$_GET['ids']; include_once('config.php'); $per_page = 3; //Calculating no of pages $sql = "SELECT COUNT(*) FROM explore WHERE category='$ids'"; $result = mysql_query($sql); $count = mysql_fetch_row($result); $pages = ceil($count[0]/$per_page); ?> I thought I might as well post the jquery script if someone wants to see: $(document).ready(function(){ //Display Loading Image function Display_Load() { $("#loading").fadeIn(900,0); $("#loading").html("<img src='bigLoader.gif' />"); } //Hide Loading Image function Hide_Load() { $("#loading").fadeOut('slow'); }; //Default Starting Page Results $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); Display_Load(); $("#content").load("pagination_data.php?page=1", Hide_Load()); // Editing below. // Sort content Marketing $("a.category").click(function() { Display_Load(); var this_id = $(this).attr('id'); $.get("pagination.php", { category: this.id }, function(data){ //Load your results into the page var pageNum = $('#content').attr('data-page'); $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id ); $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load()); }); }); //Pagination Click $("#pagination li").click(function(){ Display_Load(); //CSS Styles $("#pagination li") .css({'border' : 'solid #dddddd 1px'}) .css({'color' : '#0063DC'}); $(this) .css({'color' : '#FF0084'}) .css({'border' : 'none'}); //Loading Data var pageNum = $(this).attr("id").replace("page",""); $("#content").load("pagination_data.php?page=" + pageNum, function(){ $(this).attr('data-page', pageNum); Hide_Load(); }); }); }); If any could assist me on solving this problem that would be great, thanks.

    Read the article

  • Two jquery pagination plugin in the same page doesn't seem to work....

    - by Pandiya Chendur
    I use jquery pagination plugin for paging... If there is one pagination plugin there is no problem for me... But if there is two one seems to work but the other doesn't seem too... Here is my code, <div id="PagerUp" class="pager"> </div><br /><br /><br /> <div id="ResultsDiv"> </div> <div id="PagerDown" class="pager"> </div> And my jquery has, <script type="text/javascript"> var itemsPerPage = 5; $(document).ready(function() { getRecordspage(0, itemsPerPage); var maxvalues = $("#HfId").val(); $(".pager").pagination(maxvalues, { callback: getRecordspage, current_page: 0, items_per_page: itemsPerPage, num_display_entries: 5, next_text: 'Next', prev_text: 'Prev', num_edge_entries: 1 }); }); </script> Here is what i am getting... Both works but Look at the pagerup the selected page is 3 but the PagerDown shows 1.... How to change one pager on other pagers callback event in jquery....

    Read the article

  • jQuery 2.0 drops support for legacy IE (IE6, IE7, IE8)

    - by Renso
    Originally posted on: http://geekswithblogs.net/renso/archive/2013/10/31/jquery-2.0-drops-support-for-legacy-ie-ie6-ie7-ie8.aspxjQuery upgrades may not be as reverse compatible as you may think. Starting from version 2 of jQuery, IE6, IE7 and yes also IE8 will no longer be supported. These are now considered legacy browsers. You will need to stop any upgrades to jQuery until your SLA states that IE8 is no longer supported and remain in jQuery 1.9.Some of the reasons for not supporting IE8 and before:- Remove all the code clutter in the jQuery library with code that has to deal with IE browser compatibility issues between IE6, 7 and 8 and the newer IE versions, the latter being more compliant.- IE6 and 7 may have fallen to below 2% generally, that does not mean that that is true for your client base. In the oil and gas industry some clients are years behind and you may have 50% or more of clients remain on IE8 or older for the foreseeable future.- The difference between browser engines has become almost negligible, as it should be. So one of the greatest goals of jQuery to abstract that out for developers is no longer needed, for most part anyway. - CSS3 features like animations basically replace the need for jQuery’s 2.0 animations and effects.If the need is still there to support IE8 or before, but you also want to upgrade, then use conditional comments:<!--[if lt IE 9]>    <script src="jQuery-1.9.0.js"></script><![endif]--><!--[if gte IE 9]><!-->    <script src="jQuery-2.0.0.js"><</script><!--<![endif]-->

    Read the article

  • codeigniter pagination Numbers not displayed correcly

    - by murai
    Codeigniter pagination Numbers not displayed correcly in result page,. Plz help me. /controller page code/ function search_all() { $this->load->view(‘prd’); $config = array(); $config[‘base_url’] = base_url().’/product_search/search_all’; $config[“total_rows”] = $this->search_product_model->record_count(); $config[“per_page”] = 8; $config[“uri_segment”] = 3; $this->pagination->initialize($config); $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; $data[“results”] = $this->search_product_model-> get_search($config[“per_page”], $page); $data[“links”] = $this->pagination->create_links(); //$this->load->view(“example1”, $data); $this->load->view(‘asd’, $data); }

    Read the article

  • How to Load In Content with jQuery?

    - by ClarkSKent
    Hello, I am trying to add ajax functionality to my pagination so the content loads in the same page instead of the user having to navigate to another page when clicking the page links. I should mention that I am using this php pagination class. Being new to jquery, I am unsure of how to properly do this with the pagination class. This is what the main page looks like: <?php $categoryId=$_GET['category']; echo $categoryId; ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_page.js"></script> <?php //Include the PS_Pagination class include('ps_pagination.php'); //Connect to mysql db $conn = mysql_connect('localhost', 'root', 'root'); mysql_select_db('ajax_demo',$conn); $sql = "select * from explore where category='$categoryId'"; //Create a PS_Pagination object $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2'); //The paginate() function returns a mysql //result set for the current page $rs = $pager->paginate(); //Loop through the result set echo "<table width='800px'>"; while($row = mysql_fetch_assoc($rs)) { echo "<tr>"; echo"<td>"; echo $row['id']; echo"</td>"; echo"<td>"; echo $row['site_description']; echo"</td>"; echo"<td>"; echo $row['site_price']; echo"</td>"; echo "</tr>"; } echo "</table>"; echo "<ul id='pagination'>"; echo "<li>"; //Display the navigation echo $pager->renderFullNav(); echo "</li>"; echo "</ul>"; ?> <div id="loading" ></div> <div id="content" ></div> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> Any help on this would be great. Thanks.

    Read the article

  • Use Multiple jQuery and jQuery UI Libraries

    - by Seth Duncan
    Is there a way to use multiple jQuery and jQuery UI Libraries in the same source? I know about noConflict and using multiple jQuery Libraries with this method, however is it possible to use multiple jQuery UI Libraries? Essentially I would like to use jQuery 1.2.6 and jQuery UI 1.6 together for a certain portion of the page that only works with those libraries and then for everything else use the latest jQuery Libraries of 1.4.2 and UI 1.8. Thanks, -Seth

    Read the article

  • Dec 5th Links: ASP.NET, ASP.NET MVC, jQuery, Silverlight, Visual Studio

    - by ScottGu
    Here is the latest in my link-listing series.  Also check out my VS 2010 and .NET 4 series for another on-going blog series I’m working on. [In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu] ASP.NET ASP.NET Code Samples Collection: J.D. Meier has a great post that provides a detailed round-up of ASP.NET code samples and tutorials from a wide variety of sources.  Lots of useful pointers. Slash your ASP.NET compile/load time without any hard work: Nice article that details a bunch of optimizations you can make to speed up ASP.NET project load and compile times. You might also want to read my previous blog post on this topic here. 10 Essential Tools for Building ASP.NET Websites: Great article by Stephen Walther on 10 great (and free) tools that enable you to more easily build great ASP.NET Websites.  Highly recommended reading. Optimize Images using the ASP.NET Sprite and Image Optimization Framework: A nice article by 4GuysFromRolla that discusses how to use the open-source ASP.NET Sprite and Image Optimization Framework (one of the tools recommended by Stephen in the previous article).  You can use this to significantly improve the load-time of your pages on the client. Formatting Dates, Times and Numbers in ASP.NET: Scott Mitchell has a great article that discusses formatting dates, times and numbers in ASP.NET.  A very useful link to bookmark.  Also check out James Michael’s DateTime is Packed with Goodies blog post for other DateTime tips. Examining ASP.NET’s Membership, Roles and Profile APIs (Part 18): Everything you could possibly want to known about ASP.NET’s built-in Membership, Roles and Profile APIs must surely be in this tutorial series. Part 18 covers how to store additional user info with Membership. ASP.NET with jQuery An Introduction to jQuery Templates: Stephen Walther has written an outstanding introduction and tutorial on the new jQuery Template plugin that the ASP.NET team has contributed to the jQuery project. Composition with jQuery Templates and jQuery Templates, Composite Rendering, and Remote Loading: Dave Ward has written two nice posts that talk about composition scenarios with jQuery Templates and some cool scenarios you can enable with them. Using jQuery and ASP.NET to Build a News Ticker: Scott Mitchell has a nice tutorial that demonstrates how to build a dynamically updated “news ticker” style UI with ASP.NET and jQuery. Checking All Checkboxes in a GridView using jQuery: Scott Mitchell has a nice post that covers how to use jQuery to enable a checkbox within a GridView’s header to automatically check/uncheck all checkboxes contained within rows of it. Using jQuery to POST Form Data to an ASP.NET AJAX Web Service: Rick Strahl has a nice post that discusses how to capture form variables and post them to an ASP.NET AJAX Web Service (.asmx). ASP.NET MVC ASP.NET MVC Diagnostics Using NuGet: Phil Haack has a nice post that demonstrates how to easily install a diagnostics page (using NuGet) that can help identify and diagnose common configuration issues within your apps. ASP.NET MVC 3 JsonValueProviderFactory: James Hughes has a nice post that discusses how to take advantage of the new JsonValueProviderFactory support built into ASP.NET MVC 3.  This makes it easy to post JSON payloads to MVC action methods. Practical jQuery Mobile with ASP.NET MVC: James Hughes has another nice post that discusses how to use the new jQuery Mobile library with ASP.NET MVC to build great mobile web applications. Credit Card Validator for ASP.NET MVC 3: Benjii Me has a nice post that demonstrates how to build a [CreditCard] validator attribute that can be used to easily validate credit card numbers are in the correct format with ASP.NET MVC. Silverlight Silverlight FireStarter Keynote and Sessions: A great blog post from John Papa that contains pointers and descriptions of all the great Silverlight content we published last week at the Silverlight FireStarter.  You can watch all of the talks online.  More details on my keynote and Silverlight 5 announcements can be found here. 31 Days of Windows Phone 7: 31 great tutorials on how to build Windows Phone 7 applications (using Silverlight).  Silverlight for Windows Phone Toolkit Update: David Anson has a nice post that discusses some of the additional controls provided with the Silverlight for Windows Phone Toolkit. Visual Studio JavaScript Editor Extensions: A nice (and free) Visual Studio plugin built by the web tools team that significantly improves the JavaScript intellisense support within Visual Studio. HTML5 Intellisense for Visual Studio: Gil has a blog post that discusses a new extension my team has posted to the Visual Studio Extension Gallery that adds HTML5 schema support to Visual Studio 2008 and 2010. Team Build + Web Deployment + Web Deploy + VS 2010 = Goodness: Visual blogs about how to enable a continuous deployment system with VS 2010, TFS 2010 and the Microsoft Web Deploy framework.  Visual Studio 2010 Emacs Emulation Extension and VIM Emulation Extension: Check out these two extensions if you are fond of Emacs and VIM key bindings and want to enable them within Visual Studio 2010. Hope this helps, Scott

    Read the article

  • Find odd and even rows using $.inArray() function when using jQuery Templates

    - by hajan
    In the past period I made series of blogs on ‘jQuery Templates in ASP.NET’ topic. In one of these blogs dealing with jQuery Templates supported tags, I’ve got a question how to create alternating row background. When rendering the template, there is no direct access to the item index. One way is if there is an incremental index in the JSON string, we can use it to solve this. If there is not, then one of the ways to do this is by using the jQuery’s $.inArray() function. - $.inArray(value, array) – similar to JavaScript indexOf() Here is an complete example how to use this in context of jQuery Templates: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <style type="text/css">         #myList { cursor:pointer; }                  .speakerOdd { background-color:Gray; color:White;}         .speaker { background-color:#443344; color:White;}                  .speaker:hover { background-color:White; color:Black;}         .speakerOdd:hover { background-color:White; color:Black;}     </style>     <title>jQuery ASP.NET</title>     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>     <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>     <script language="javascript" type="text/javascript">         var speakers = [             { Name: "Hajan1" },             { Name: "Hajan2" },             { Name: "Hajan3" },             { Name: "Hajan4" },             { Name: "Hajan5" }         ];         $(function () {             $("#myTemplate").tmpl(speakers).appendTo("#myList");         });         function oddOrEven() {             return ($.inArray(this.data, speakers) % 2) ? "speaker" : "speakerOdd";         }     </script>     <script id="myTemplate" type="text/x-jquery-tmpl">         <tr class="${oddOrEven()}">             <td> ${Name}</td>         </tr>     </script> </head> <body>     <table id="myList"></table> </body> </html> So, I have defined stylesheet classes speakerOdd and speaker as well as corresponding :hover styles. Then, you have speakers JSON string containing five items. And what is most important in our case is the oddOrEven function where $.inArray(value, data) is implemented. function oddOrEven() {     return ($.inArray(this.data, speakers) % 2) ? "speaker" : "speakerOdd"; } Remark: The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0. From http://api.jquery.com/jQuery.inArray/ So, now we can call oddOrEven function from inside our jQuery Template in the following way: <script id="myTemplate" type="text/x-jquery-tmpl">     <tr class="${oddOrEven()}">         <td> ${Name}</td>     </tr> </script> And the result is I hope you like it. Regards, Hajan

    Read the article

  • jquery ajax html response change 1.3.2 vs 1.4.2 (aka where is my script tag?)

    - by cmroanirgo
    I've been using jquery 1.3.2 to pull snippets of html (including script) from a server. A typical response might be: <div id="content"<div id="inner"... <script type=... alert("hello world");</script <pHello World</p </div</div I've been using the query .get function: $.get($(this).attr("href"), function(response) { $("#inner").replaceWith($("#inner", response)); }); And everything is fine and works as expected: the returned html snippets get loaded into the DOM and the scripts run. When I use 1.4.2 however, I notice that the script tags have been removed and no longer run. Stepping into the newer jquery codebase yields the lines of code (line 4498) : ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) ); which seems to be the culprit 'removing' the script from its happy resting place as part of the selector process. But it doesn't help me in injecting exactly what i want into the DOM. Any idea why jquery is doing this? More importantly, how can I go about fixing this so that my scripts run?

    Read the article

  • Is there any reason why jQuery Sortable would work in IE/Chrome but not Firefox?

    - by DNS
    I have a fairly straightforward list of horizontally floated items, like this: <div class="my-widget-container"> <div class="my-widget-column">...</div> ... </div> Both the container and each column have a fixed width, set using jQuery's .width(). The container is position: relative and the column is float: left and overflow: hidden. Not sure if any other styles/properties are relevant. When I apply a jQuery-UI sortable to this, the result is exactly what I'd expect in Chome 8 and IE 8; the columns can be dragged around to change their order. But in Firefox 3.6 I can click an item and drag to create a new sort-helper, yet the actual sort never happens; the real item's position in the DOM never changes. I dug around a little in Sortable, and added a debug print to _intersectsWithPointer. Whenever the drag helper moves, Sortable runs through its list of elements and uses this method to determine whether the drag helper has passed over one. What I saw was that item.left had the same value for all my columns, which is obviously not correct, and probably the source of the problem. It looks like all columns had a left position corresponding to that of the first column. I'm using jQuery 1.4.3 and jQuery UI Sortable 1.8. Those aren't the very latest versions, but they're pretty recent, and I don't see anything in the Sortable release notes that indicates any such problem has been fixed. Does anyone know what might be happening here, or have any ideas for further debugging?

    Read the article

  • jQuery, ASP.NET, and Browser History

    - by Stephen Walther
    One objection that people always raise against Ajax applications concerns browser history. Because an Ajax application updates its content by performing sneaky Ajax postbacks, the browser backwards and forwards buttons don’t work as you would normally expect. In a normal, non-Ajax application, when you click the browser back button, you return to a previous state of the application. For example, if you are paging through a set of movie records, you might return to the previous page of records. In an Ajax application, on the other hand, the browser backwards and forwards buttons do not work as you would expect. If you navigate to the second page in a list of records and click the backwards button, you won’t return to the previous page. Most likely, you will end up navigating away from the application entirely (which is very unexpected and irritating). Bookmarking presents a similar problem. You cannot bookmark a particular page of records in an Ajax application because the address bar does not reflect the state of the application. The Ajax Solution There is a solution to both of these problems. To solve both of these problems, you must take matters into your own hands and take responsibility for saving and restoring your application state yourself. Furthermore, you must ensure that the address bar gets updated to reflect the state of your application. In this blog entry, I demonstrate how you can take advantage of a jQuery library named bbq that enables you to control browser history (and make your Ajax application bookmarkable) in a cross-browser compatible way. The JavaScript Libraries In this blog entry, I take advantage of the following four JavaScript files: jQuery-1.4.2.js – The jQuery library. Available from the Microsoft Ajax CDN at http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js jquery.pager.js – Used to generate pager for navigating records. Available from http://plugins.jquery.com/project/Pager microtemplates.js – John Resig’s micro-templating library. Available from http://ejohn.org/blog/javascript-micro-templating/ jquery.ba-bbq.js – The Back Button and Query (BBQ) Library. Available from http://benalman.com/projects/jquery-bbq-plugin/ All of these libraries, with the exception of the Micro-templating library, are available under the MIT open-source license. The Ajax Application Let’s start by building a simple Ajax application that enables you to page through a set of movie database records, 3 records at a time. We’ll use my favorite database named MoviesDB. This database contains a Movies table that looks like this: We’ll create a data model for this database by taking advantage of the ADO.NET Entity Framework. The data model looks like this: Finally, we’ll expose the data to the universe with the help of a WCF Data Service named MovieService.svc. The code for the data service is contained in Listing 1. Listing 1 – MovieService.svc using System.Data.Services; using System.Data.Services.Common; namespace WebApplication1 { public class MovieService : DataService<MoviesDBEntities> { public static void InitializeService(DataServiceConfiguration config) { config.SetEntitySetAccessRule("Movies", EntitySetRights.AllRead); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2; } } } The WCF Data Service in Listing 1 exposes the movies so that you can query the movie database table with URLs that looks like this: http://localhost:2474/MovieService.svc/Movies -- Returns all movies http://localhost:2474/MovieService.svc/Movies?$top=5 – Returns 5 movies The HTML page in Listing 2 enables you to page through the set of movies retrieved from the WCF Data Service. Listing 2 – Original.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Movies with History</title> <link href="Design/Pager.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Page <span id="pageNumber"></span> of <span id="pageCount"></span></h1> <div id="pager"></div> <br style="clear:both" /><br /> <div id="moviesContainer"></div> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> <script src="App_Scripts/jquery.pager.js" type="text/javascript"></script> <script type="text/javascript"> var pageSize = 3, pageIndex = 0; // Show initial page of movies showMovies(); function showMovies() { // Build OData query var query = "/MovieService.svc" // base URL + "/Movies" // top-level resource + "?$skip=" + pageIndex * pageSize // skip records + "&$top=" + pageSize // take records + " &$inlinecount=allpages"; // include total count of movies // Make call to WCF Data Service $.ajax({ dataType: "json", url: query, success: showMoviesComplete }); } function showMoviesComplete(result) { // unwrap results var movies = result["d"]["results"]; var movieCount = result["d"]["__count"] // Show movies using template var showMovie = tmpl("<li><%=Id%> - <%=Title %></li>"); var html = ""; for (var i = 0; i < movies.length; i++) { html += showMovie(movies[i]); } $("#moviesContainer").html(html); // show pager $("#pager").pager({ pagenumber: (pageIndex + 1), pagecount: Math.ceil(movieCount / pageSize), buttonClickCallback: selectPage }); // Update page number and page count $("#pageNumber").text(pageIndex + 1); $("#pageCount").text(movieCount); } function selectPage(pageNumber) { pageIndex = pageNumber - 1; showMovies(); } </script> </body> </html> The page in Listing 3 has the following three functions: showMovies() – Performs an Ajax call against the WCF Data Service to retrieve a page of movies. showMoviesComplete() – When the Ajax call completes successfully, this function displays the movies by using a template. This function also renders the pager user interface. selectPage() – When you select a particular page by clicking on a page number in the pager UI, this function updates the current page index and calls the showMovies() function. Figure 1 illustrates what the page looks like when it is opened in a browser. Figure 1 If you click the page numbers then the browser history is not updated. Clicking the browser forward and backwards buttons won’t move you back and forth in browser history. Furthermore, the address displayed in the address bar does not change when you navigate to different pages. You cannot bookmark any page except for the first page. Adding Browser History The Back Button and Query (bbq) library enables you to add support for browser history and bookmarking to a jQuery application. The bbq library supports two important methods: jQuery.bbq.pushState(object) – Adds state to browser history. jQuery.bbq.getState(key) – Gets state from browser history. The bbq library also supports one important event: hashchange – This event is raised when the part of an address after the hash # is changed. The page in Listing 3 demonstrates how to use the bbq library to add support for browser navigation and bookmarking to an Ajax page. Listing 3 – Default.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Movies with History</title> <link href="Design/Pager.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Page <span id="pageNumber"></span> of <span id="pageCount"></span></h1> <div id="pager"></div> <br style="clear:both" /><br /> <div id="moviesContainer"></div> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/jquery.ba-bbq.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> <script src="App_Scripts/jquery.pager.js" type="text/javascript"></script> <script type="text/javascript"> var pageSize = 3, pageIndex = 0; $(window).bind('hashchange', function (e) { pageIndex = e.getState("pageIndex") || 0; pageIndex = parseInt(pageIndex); showMovies(); }); $(window).trigger('hashchange'); function showMovies() { // Build OData query var query = "/MovieService.svc" // base URL + "/Movies" // top-level resource + "?$skip=" + pageIndex * pageSize // skip records + "&$top=" + pageSize // take records +" &$inlinecount=allpages"; // include total count of movies // Make call to WCF Data Service $.ajax({ dataType: "json", url: query, success: showMoviesComplete }); } function showMoviesComplete(result) { // unwrap results var movies = result["d"]["results"]; var movieCount = result["d"]["__count"] // Show movies using template var showMovie = tmpl("<li><%=Id%> - <%=Title %></li>"); var html = ""; for (var i = 0; i < movies.length; i++) { html += showMovie(movies[i]); } $("#moviesContainer").html(html); // show pager $("#pager").pager({ pagenumber: (pageIndex + 1), pagecount: Math.ceil(movieCount / pageSize), buttonClickCallback: selectPage }); // Update page number and page count $("#pageNumber").text(pageIndex + 1); $("#pageCount").text(movieCount); } function selectPage(pageNumber) { pageIndex = pageNumber - 1; $.bbq.pushState({ pageIndex: pageIndex }); } </script> </body> </html> Notice the first chunk of JavaScript code in Listing 3: $(window).bind('hashchange', function (e) { pageIndex = e.getState("pageIndex") || 0; pageIndex = parseInt(pageIndex); showMovies(); }); $(window).trigger('hashchange'); When the hashchange event occurs, the current pageIndex is retrieved by calling the e.getState() method. The value is returned as a string and the value is cast to an integer by calling the JavaScript parseInt() function. Next, the showMovies() method is called to display the page of movies. The $(window).trigger() method is called to raise the hashchange event so that the initial page of records will be displayed. When you click a page number, the selectPage() method is invoked. This method adds the current page index to the address by calling the following method: $.bbq.pushState({ pageIndex: pageIndex }); For example, if you click on page number 2 then page index 1 is saved to the URL. The URL looks like this: Notice that when you click on page 2 then the browser address is updated to look like: /Default.htm#pageIndex=1 If you click on page 3 then the browser address is updated to look like: /Default.htm#pageIndex=2 Because the browser address is updated when you navigate to a new page number, the browser backwards and forwards button will work to navigate you backwards and forwards through the page numbers. When you click page 2, and click the backwards button, you will navigate back to page 1. Furthermore, you can bookmark a particular page of records. For example, if you bookmark the URL /Default.htm#pageIndex=1 then you will get the second page of records whenever you open the bookmark. Summary You should not avoid building Ajax applications because of worries concerning browser history or bookmarks. By taking advantage of a JavaScript library such as the bbq library, you can make your Ajax applications behave in exactly the same way as a normal web application.

    Read the article

  • JQuery UI function errors out: Object is not a property or method

    - by Luke101
    In the following code I get an error that says autocomplete function Object is not a property or method Here is the code: <title><%= ViewData["pagetitle"] + " | " + config.Sitename.ToString() %></title> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.widget.js" type="text/javascript"></script> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.position.js" type="text/javascript"></script> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.autocomplete.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="/Scripts/main.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function () { Categories(); $('#tags1').autocomplete({ //error here url: '/Tag/TagAutoComplete', width: 320, max: 4, delay: 30, cacheLength: 1, scroll: false, highlight: false }); }); </script>

    Read the article

  • jquery dynamic form plugin: adding nested field support

    - by goliatone
    Hi, Im using the jQuery dynamic form plugin, but i need support for nested field duplication. I would like some advice on how to modify the plugin to add such functionality. Im not a javascript/jQuery developer, so any advice on which route to take will be much appreciated. I can provide the plugin's code: /** * @author Stephane Roucheray * @extends jQuery */ jQuery.fn.dynamicForm = function (plusElmnt, minusElmnt, options){ var source = jQuery(this), minus = jQuery(minusElmnt), plus = jQuery(plusElmnt), template = source.clone(true), fieldId = 0, formFields = "input, checkbox, select, textarea", insertBefore = source.next(), clones = [], defaults = { duration:1000 }; // Extend default options with those provided options = $.extend(defaults, options); isPlusDescendentOfTemplate = source.find("*").filter(function(){ return this == plus.get(0); }); isPlusDescendentOfTemplate = isPlusDescendentOfTemplate.length > 0 ? true : false; function normalizeElmnt(elmnt){ elmnt.find(formFields).each(function(){ var nameAttr = jQuery(this).attr("name"), idAttr = jQuery(this).attr("id"); /* Normalize field name attributes */ if (!nameAttr) { jQuery(this).attr("name", "field" + fieldId + "[]"); } if (!/\[\]$/.exec(nameAttr)) { jQuery(this).attr("name", nameAttr + "[]"); } /* Normalize field id attributes */ if (idAttr) { /* Normalize attached label */ jQuery("label[for='"+idAttr+"']").each(function(){ jQuery(this).attr("for", idAttr + fieldId); }); jQuery(this).attr("id", idAttr + fieldId); } fieldId++; }); }; /* Hide minus element */ minus.hide(); /* If plus element is within the template */ if (isPlusDescendentOfTemplate) { function clickOnPlus(event){ var clone, currentClone = clones[clones.length -1] || source; event.preventDefault(); /* On first add, normalize source */ if (clones.length == 0) { normalizeElmnt(source); currentClone.find(minusElmnt).hide(); currentClone.find(plusElmnt).hide(); }else{ currentClone.find(plusElmnt).hide(); } /* Clone template and normalize it */ clone = template.clone(true).insertAfter(clones[clones.length - 1] || source); normalizeElmnt(clone); /* Normalize template id attribute */ if (clone.attr("id")) { clone.attr("id", clone.attr("id") + clones.length); } plus = clone.find(plusElmnt); minus = clone.find(minusElmnt); minus.get(0).removableClone = clone; minus.click(clickOnMinus); plus.click(clickOnPlus); if (options.limit && (options.limit - 2) > clones.length) { plus.show(); }else{ plus.hide(); } clones.push(clone); } function clickOnMinus(event){ event.preventDefault(); if (this.removableClone.effect && options.removeColor) { that = this; this.removableClone.effect("highlight", { color: options.removeColor }, options.duration, function(){that.removableClone.remove();}); } else { this.removableClone.remove(); } clones.splice(clones.indexOf(this.removableClone),1); if (clones.length == 0){ source.find(plusElmnt).show(); }else{ clones[clones.length -1].find(plusElmnt).show(); } } /* Handle click on plus */ plus.click(clickOnPlus); /* Handle click on minus */ minus.click(function(event){ }); }else{ /* If plus element is out of the template */ /* Handle click on plus */ plus.click(function(event){ var clone; event.preventDefault(); /* On first add, normalize source */ if (clones.length == 0) { normalizeElmnt(source); jQuery(minusElmnt).show(); } /* Clone template and normalize it */ clone = template.clone(true).insertAfter(clones[clones.length - 1] || source); if (clone.effect && options.createColor) { clone.effect("highlight", {color:options.createColor}, options.duration); } normalizeElmnt(clone); /* Normalize template id attribute */ if (clone.attr("id")) { clone.attr("id", clone.attr("id") + clones.length); } if (options.limit && (options.limit - 3) < clones.length) { plus.hide(); } clones.push(clone); }); /* Handle click on minus */ minus.click(function(event){ event.preventDefault(); var clone = clones.pop(); if (clones.length >= 0) { if (clone.effect && options.removeColor) { that = this; clone.effect("highlight", { color: options.removeColor, mode:"hide" }, options.duration, function(){clone.remove();}); } else { clone.remove(); } } if (clones.length == 0) { jQuery(minusElmnt).hide(); } plus.show(); }); } };

    Read the article

  • MVC and Pagination

    - by gms8994
    As an MVC newb, I keep getting caught up in the details. One in particular is making me pause longer than I'd expect; pagination. Should pagination go in the model, or in the controller? In case it matters, I'm using ZF, and would like to paginate the results of some SQL data.

    Read the article

  • CKEditor instance in a jQuery dialog

    - by Gazillion
    Hey, I am using jQuery to open a dialog window with a textarea transformed into an instance of CKEditor. I'm using the jQuery adapter provided by the CKEditor team but when the dialog window opens up I cannot interact with the editor (it's created but "null" is written in the content space and I can't click on anything or modify the content). This bug report seems to say that by using a patch provided the issue is fixed but it doesn't seem to be working for me... Here's my code (maybe I did something wrong programmatically): HTML: <div id="ad_div" title="Analyse documentaire"> <textarea id="ad_content" name="ad_content"></textarea> </div> My includes (Everything is included correctly but maybe it's an including order issue?): <script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script> <link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" /> <script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script> <script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script> Javascript: $('#ad_content').ckeditor(); /* snip */ $('#ad_div').dialog( { modal: true, resizable: false, draggable: false, position: ['center','center'], width: 600, height: 500, hide: 'slide', show: 'slide', closeOnEscape: true, autoOpen: false }); $('.analyse_cell').click(function(){ $('#ad_div').dialog('open'); });

    Read the article

  • How do I get a jQuery dialog window to display only if a form validates when I click the submit butt

    - by user338413
    I've got a form that is using jQuery validation. When the user clicks the submit button, a dialog window displays thatshows the fields the user filled out along with the data the user entered. It asks the user if this information is correct. If it is, the user clicks the submit button in the dialog window and the form is submitted. If the user clicks the 'Fix it' button, the dialog window closes and the user returns to the form. My problem is my dialog window displays when the user clicks the form's submit button even if there are errors in the form. I only want to display the dialog window if the form data is validated by jQuery. How do I do this? I'm thinking of something like: if ((#form).validates() == true) { $('#verification_dialog').dialog('open'); } Is there a way in jQuery to determine whether the whole form has validated? Or do I have to create my own function to do this?

    Read the article

  • grails portlet pagination on Liferay

    - by srinath
    Hi , How to implement pagination in grails portlet on Liferay. The basic pagination was not working on Liferay. When clicked on next the page is jumping from Liferay url to normal url I used like this : <g:paginate next="Forward" prev="Back" maxsteps="10" controller="book" action="list" total="${Book.count()}" /> thanks in advance.

    Read the article

  • jQuery internals: Organization of the jQuery Object

    - by sonofdelphi
    I was going through the source code of jQuery. I'm having trouble understanding the wrapping strategy for the jQuery object. (function( window, undefined ) { // Define a local copy of jQuery var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, .... .... .... // Expose jQuery to the global object window.jQuery = window.$ = jQuery; })(window); Specifically, what I'm not able to understand stems from the first line. What is the outermost unnamed container function? Why is it required? Why is the container function anonymous? What is the need for the outermost '(' parantheses ?

    Read the article

  • Jquery: Handling Checkbox Click Event with JQuery

    - by wcolbert
    I can't figure out what is going on here. I have some nested lists of checkboxes that I would like to check when the parent is checked. More importantly, I can't even get the alert to show up. It's as if the click event is not firing. Any ideas? $(document).ready(function() { $("#part_mapper_list input[type=checkbox]").click(function(){ alert("clicked"); if ($(this).attr("checked") == "checked"){ $(this + " input").attr("checked") = "checked"; } else { $(this + " input").attr("checked") = ""; } }); }

    Read the article

  • jQuery load() problem with html that contain jQuery plugin

    - by Victorgalaxy
    FYI, here is my code: [index.html] <script type="text/javascript" src="js/script.js"></script> [script.js] $(document).ready(function() { $('#buttonEphone').click(function() { $('#apDiv2').load("ePhone.html, #content"); }); }); "ePhone.html" contain some lightbox effect. (making use of code below) [ePhone.html] <script type="text/javascript" src="js/prototype.lite.js"></script> <script type="text/javascript" src="js/moo.fx.js"></script> <script type="text/javascript" src="js/litebox-1.0.js"></script> The Litebox plugin also required to add onload="initLightbox()" within the BODY tag of ePhone.html. From the above code, I can load ePhone.html's content(#content div) to my (apDiv2) of my index.html. However, the lightbox effect is no longer work. I've also try loading the whole html instead of only #content: $('#apDiv2').load('ePhone.html'); but it still doesn't work. Please help, thx

    Read the article

  • Pagination using Ajax in jquery Datatables

    - by kshtjsnghl
    I am using dataTables plugin for a table on a page I am working on. Its basically fetching rows through an ajax call and in this ajax call, I send the search params that the user selects and the page number required. I need the Next, Previous, First and Last buttons to also fire the same ajax call, but with different page numbers, as the back-end interceptor depends on the page number. This api call would return total no. of rows(say 1000) belonging for these search params and the rows with the page size( say 50). Is there any way, I can use data table to do this?

    Read the article

  • Creating a simple watermark effect using JQuery

    - by nikolaosk
    This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here In this post I would like to show you how to create a simple watermark effect using JQuery.Watermark is a great way to provide users with informarion without using more space on the screen. Some basic level of knowledge of JQuery is assumed. Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you...(read more)

    Read the article

  • Toggle jquery div expand over the another div Animation (Z-Index).

    - by ricky roy
    Hi, Following url there is right hand toggle menu which is on flash. I need a Same functionality On jquery. I have try but the problem is to fixing the position. of next div and Image bellow http://www.junkiesdigital.com/ I have made a use Jquery function but I unable to get the exact animation. Here is the page. http://www.junkiesdigital.com/html/Index.htm Any one help me out this problem. Kind regards, Thanks

    Read the article

< Previous Page | 10 11 12 13 14 15 16 17 18 19 20 21  | Next Page >