Search Results

Search found 37943 results on 1518 pages for 'jquery form plugin'.

Page 396/1518 | < Previous Page | 392 393 394 395 396 397 398 399 400 401 402 403  | Next Page >

  • jQuery, unable to store data returned by $.get function.

    - by Deepak Prasanna
    I am trying to turn div#sidebar into a sidebar in my app. My code looks like the one below. $('#sidebar').userProfile(); jQuery.fn.userProfile = function() { $.get('/users/profile', function(data){ $(this).html(data); }); }; It didnt work because, I found the this (inside the $.get function) here contexts to the get request and not $('#sidebar'). Then I tried something like below. $('#sidebar').userProfile(); #This doesnot work jQuery.fn.userProfile = function() { var side_bar = null; $.get('/users/profile', function(data){ side_bar = data; }); $(this).html(side_bar); console.log(side_bar); }; This doesnt work either. In firebug console I see Null which I am setting on top when I am declaring the variable.Atlast I made it work by changing my code to something like below by hardcoding the selector. #This works, but I cannot turn any element to a sidebar which is sick. jQuery.fn.userProfile = function() { $.get('/users/profile', function(data){ $('#sidebar').html(data); }); }; But this is not I wanted because I wanted to turn any element to a sidebar. Where am I goin wrong or which is the correct way of doing it?

    Read the article

  • Windows Live Messenger Activity SDK: Is it possible to use jQuery?

    - by Cheeso
    There's an SDK that lets developers build "activities" and games for use in Windows Live Messenger. The basic approach is to build a web app, that gets approved and hosted by Microsoft. questions Anyone done this? Can you use jQuery in that web app? how do you debug the thing, running within Windows Live Messenger? EDIT: I tried using jQuery, but couldn't get it to do much of anything. I also couldn't debug it at all, when running within the IM client. The IE8 F12 debug tools are not available in that context. I believe the embedded browser was silently not loading external script, and then silently throwing exceptions. So I backed off to use only script in the .HTM file. Since it is Windows Live Messenger, the embedded browser is IE, so the generality made possible in jQuery isn't strictly necessary. I was able to use old-skool DHTML interfaces to get done, what I needed. I'm still interested in seeing examples of what other people have produced in the way of WLM Activities or games, using the Messenger Activity SDK. I think Flash is possible, and I think XAML is also possible, but I haven't seen source code examples for any of those.

    Read the article

  • Using JQuery to insert new cells in a table row?

    - by Michael Smith
    I know that JQuery is a very powerful library and was just wondering if it had the following capability that I really need. Lets say I need to insert new cells into a table row, I know how to do this basic task, but I need to insert my cells in a highly unusual way due to some of the requirements that are needed for the new cells. I need to be able to insert cells a certain distance into the row, For example, if a row was 1000pixels wide, is there a feature in JQuery that would allow me to insert the cell 250pixels into the row and have a cell width of 50pixels and insert another cell 500pixels into the row with a cell width of 100pixels. I know how to set a cells width using JQuery, just not distance into a row. The values wont ever be the exact same as above though because they are actually read from a database, so for example, one cell would have the following values: CELL_01 $start=100; $finish=150; the above would mean a new cell is needed that needs to be inserted 100pixels into the row and has a width of 50pixels, I just cant seem to find a way to implement this feature into my application. How could I accomplish this task? Sorry for such a strange question, but i just cant seem to get this working. Thanks!

    Read the article

  • jQuery UI + Gmaps = Problems (for me at least) HELP!!

    - by Luis
    Hi there! I started using jQuery as soon as I found out about it, it is very powerfull but I started struggling when I tried to load Gmaps api into the tabs jQuery UI brings. Strangly enough in IE 6,7,8 it works fine, but in Firefox, Safari (I'm using mac but tested it in windows and they both give the same problems) the map doesn't load entirely. When I click on the tab where the map loads in, only part of the map is fully operational, the rest is grey and not clickable. Please take a look at the link below and click the third tab in firefox/safari and IE and you will see the problem. http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1 I don't know if it is a bug in the jQuery UI code or I'm doing something wrong. If I load the map out of the tabs the map is shown OK. I'm fighting with this problem for a week and a half... any help will be much appreciated. Thanks in advance. Luis

    Read the article

  • How does jquery display an image received from an ajax request?

    - by Gnee
    I have this working great, but I'd like a deeper understanding of what is actually going on behind the scenes. I am using Jquery's Ajax method to pull 5 blog posts (returning only the title and first photo). A PHP script grabs the blog posts' title and first photo and sticks it in an array and sends it back to my browser as JSON. Upon receiving the JSON object, Jquery grabs the first member of the JSON object and displays it's title and photo. In a gallery I made, using buttons – the user can iterate the 1-5 posts. So the actual AJAX call happens right away, and only once. I am basically using this kind of setup: $('my_div').html(json_obj[i]) and each click does a i++. So jquery is plucking these blog posts from my computers memory, my web browsers cache, or some kind of cache in the Javascript engine? One of the things it's returning is a pretty gnarly animated gif. I just wonder if it constantly running in the background (but not visible), stealing processing cycles...etc. Or Javascript just inserting (say a flash movie) into the DOM, but before hand does nothing but take up a little memory (no processing). Anyway, I'm just curious. If someone is a guru on this, I'd love to hear your take. Thanks!!

    Read the article

  • If I do "jquery sortable" on a contenteditable item(s), I then can't focus mouse anywhere inside con

    - by Matej
    Strangely this is broken only in Firefox and Opera (IE, Chrome and Safari works as it should). Any suggestion for a quick fix? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('#sortable').sortable(); }); </script> </head> <body> <span id="sortable"> <p contenteditable="true">One apple</p> <p>Two pears</p> <p>Three oranges</p> </span> </body> </html>

    Read the article

  • Is jQuery forcing Adobe ColdFusion to abandon the dead flash product line?

    - by crosenblum
    I have been reading a lot about how flash development/design had died, and as jQuery and in the near future html5 comes out, will this start to push Adobe/Coldfusion away from flash towards less product linking? I mean, I love coldfusion, and want that to continue to grow, however, if Adobe only bought Coldfusion from Macromedia, so they can bundle flash and coldfusion together, does the death of flash mean the death of coldfusion? http://topnews.us/content/221385-jobs-says-adobes-flash-waning-and-had-its-day http://aext.net/2010/03/javascript-jquery-killing-flash-tutorial-jquery-plugin/ I really don't mind if Flash dies, I do mind greatly if coldfusion does. Is the success of Flash linked to Coldfusion? If so, why? or why not? The purpose of this isn't to start some war about flash pro's and con's. I was only worried that Adobe would cause problems for Coldfusion, if flash had some market/financial problems. That was my main concern... And no I am not anti-flash... But my financial sanity depends on Coldfusion being a success, so that is why I stated my question. Because I WANT EVERYONE ELSE'S OPINION OF THIS SITUATION. Thank You.

    Read the article

  • jQuery .each() function. Resetting the index?

    - by Michael
    Hi there, I have multiple lists with the same class. I'd like to loop each list and its LI's and prepend the current number before each. The current code I have is: $jQuery(".numberList li").each(function(i) { var index = i + 1; $jQuery(this).prepend("<span>" + index + "</span>"); }); The problem is, is that the index doesn't restart back at 0 for each list it goes through, it just keeps going up. For example, the output I get now is: First list 1. item 2. item 3. item Second list 4. item 5. item 6. item Second list should start at 1 again by having the index back at 0. Could someone point out where I'm going wrong? I'm not a jQuery expert or anything...clearly :) Many thanks, Michael.

    Read the article

  • How best to associate code with events in jQuery?

    - by Ned Batchelder
    Suppose I have a <select> element on my HTML page, and I want to run some Javascript when the selection is changed. I'm using jQuery. I have two ways to associate the code with the element. Method 1: jQuery .change() <select id='the_select'> <option value='opt1'>One</option> <option value='opt2'>Two</option> </select> <script> $('#the_select').change(function() { alert('Changed!'); }); </script> Method 2: onChange attribute <select id='the_select' onchange='selectChanged();'> <option value='opt1'>One</option> <option value='opt2'>Two</option> </select> <script> function selectChanged() { alert('Changed!'); } </script> I understand the different modularity here: for example, method 1 keeps code references out of the HTML, but method 2 doesn't need to mention HTML ids in the code. What I don't understand is: are there operational differences between these two that would make me prefer one over the other? For example, are there edge-case browsers where one of these works and the other doesn't? Is the integration with jQuery better for either? Does the late-binding of the code to the event make a difference in the behavior of the page? Which do you pick and why?

    Read the article

  • Javascript libraries + JQuery plugins contradict? How to debug?

    - by Metafaniel
    This is somewhat a newbie question... I effort everyday to learn, so please understand ;) I'm not the very best expert, but I can do a decent job good looking and functional websites or web applications. My main tools are PHP5, HTML5, CSS2 y 3, a database (SQLite, MySQL) and Javascript and JQuery. I'm not an expert at all in Javascript. I often find interesting JQuery plugins or tutorials and try to mix them up to do the functionality needed. This time I'm mixing maybe too much plugins and js files from different sources. In fact, my app do what I want except for certain behaviors... There are no errors, everything looks fine, but the misbehavior persists. So maybe I need to specify a class I don't know about, or one contradicts another one from another plugin and I just can't understand, for example, why a <button type="button">DON'T submit</button> just submits the form... Anyway, my point is: Do you people know a way to debug this situations??? Is there a generic tool, suggestion, workflow or something to help me understand conflicts or omissions between libraries or plugins??? (Javascript libraries, my own Javascripts and JQuery plugins)??? I hope it is a way! THANKS A LOT FOR YOUR HELP AND COMPREHENSION! =)

    Read the article

  • Why does my jQuery/YQL call not return anything?

    - by tastyapple
    I'm trying to access YQL with jQuery but am not getting a response: http://jsfiddle.net/tastyapple/grMb3/ Anyone know why? $(function(){ $.extend( { _prepareYQLQuery: function (query, params) { $.each( params, function (key) { var name = "#{" + key + "}"; var value = $.trim(this); if (!value.match(/^[0-9]+$/)) { value = '"' + value + '"'; } query = query.replace(name, value); } ); return query; }, yql: function (query) { var $self = this; var successCallback = null; var errorCallback = null; if (typeof arguments[1] == 'object') { query = $self._prepareYQLQuery(query, arguments[1]); successCallback = arguments[2]; errorCallback = arguments[3]; } else if (typeof arguments[1] == 'function') { successCallback = arguments[1]; errorCallback = arguments[2]; } var doAsynchronously = successCallback != null; var yqlJson = { url: "http://query.yahooapis.com/v1/public/yql", dataType: "jsonp", success: successCallback, async: doAsynchronously, data: { q: query, format: "json", env: 'store://datatables.org/alltableswithkeys', callback: "?" } } if (errorCallback) { yqlJson.error = errorCallback; } $.ajax(yqlJson); return $self.toReturn; } } ); $.yql( "SELECT * FROM github.repo WHERE id='#{username}' AND repo='#{repository}'", { username: "jquery", repository: "jquery" }, function (data) { if (data.results.repository["open-issues"].content > 0) { alert("Hey dude, you should check out your new issues!"); } } ); });

    Read the article

  • How do you set a variable to be an empty, but workable Jquery object?

    - by KallDrexx
    Outside of a for I declare a variable using var list;. I use this variable inside of my for loop like so: // add the html to the list if (list == undefined) list = item; else list.append(item.contents()); item is a cloned jquery object build from a $('list_template').clone(); call (list_template is a div with <li> elements inside). What I am doing is creating a list, which I will then appendTo() where I need it. Right now this code works fine, but it doesn't seem right to me. Unfortunatly, I cannot seem to figure out how to correctly declare the list variable to be an empty Jquery object. I have tried both: var list = $([]); var list = $(''); Both of those cause the append to not work correctly (or as expected) with list.html() being null. Is there a way to initialize my variable to an empty jquery object, so all I have to do is list.append(item.contents()); without the if/else statements?

    Read the article

  • What is the best practice for including jQuery ext functions?

    - by Metropolis
    Hey everyone, Currently I have a file that I named JQuery.ext.js which I am including in all of my pages. Inside this file I have numerous functions that do things like the following, (function($) { /** * Checks to see is the value inside ele is blank * @param message string The message that needs to be displayed if the element is blank * @return bool */ $.fn.isEmpty = function(message) { var b_IsEmpty = false; //Loop through all elements this.each(function() { //Check to see if an empty value is found if($(this).val().length <= 0) { //If message is not blank if(message) { alert(message); $(this).focus().select(); } b_IsEmpty = true; return false; } return true; }); //Return false if the evaluation failed, otherwise return the jquery object so we can reuse it return (b_IsEmpty) ? true : false; }; /** * Checks to see if the value inside ele is numbers only * @param message string The message that needs to be displayed if the element is not numeric * @return bool */ $.fn.isNumeric = function(message) { var expression = /^[0-9]+$/; var b_IsNumeric = true; //Loop through elements checking each one this.each( function() { //Check to see if this value is not numeric if(!$(this).val().match(expression) && $(this).val().length > 0) { //If message is not blank if(message) { alert(message); $(this).focus().select(); } b_IsNumeric = false; } return b_IsNumeric; }); return b_IsNumeric; }; })(jQuery); Is there another way to do this? or is this the way most people do it? Thanks for any help, Metropolis

    Read the article

  • How to make zebra table with Sphinx? Or how to use jQuery with Sphinx?

    - by prosseek
    I think the table generated from Sphinx is not pretty, as it produces the following HTML code for table. <table border="1" class="docutils"> <colgroup> <col width="43%" /> <col width="29%" /> <col width="29%" /> </colgroup> <thead valign="bottom"> <tr><th class="head">Graph</th> <th class="head">HIR</th> <th class="head">AIR</th> </tr> </thead> <tbody valign="top"> <tr><td>Graph</td> <td>Circuit</td> <td>System</td> </tr> </tbody> </table> How can I turn in into pretty one, for example, zebra table? The HTML generated html has the jQuery, and according to this site, it's just one line of code to have a zebra table, but I'm not sure how to use jQuery to make a zebra table. $("tr:nth-child(odd)").addClass("odd"); Q: How to use jQuery with Sphinx? Q: Is there any other way to have a zebra table with Sphinx?

    Read the article

  • Importing a div's content from a Static HTML file using PHP or jQuery or Ajax?

    - by Vikram
    Hello friends a newbie question... The Issue is like this: I have a static HTML file and I want to import just a portion of that file into another page. How can I do that. Example Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Some title here</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="box-1"> <div class="block"> <!-- Some code here --> </div> </div> <div id="box-2"> <div class="block"> <!-- Some code here --> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html> Now what I want is to read this HTML file and import just this bit: <div id="box-1"> <div class="block"> <!-- Some code here --> </div> </div> Is there a way of doing it? Kindly help. Even a PHP, jQuery, Ajax or any other solution will also do. Please help me.

    Read the article

  • How can I filter using the current value of a text box in a jQuery selector?

    - by spudly
    I have a validation script that checks for data-* attributes to determine which fields are required. If an element has the 'data-required-if' attribute (which has a jQuery selector as it's value), it checks to see if any elements are found that match that selector. If any are found, the field is required. It does something similar to the following: $('[data-required-if]').each(function () { var selector = $(this).attr('data-required-if'), required = false; if ( !$(selector).length ) { required = true; // do something if this element is empty } }); This works great, but there's a problem. When you use the attribute selector to filter based on the current value of a text field, it really filters on the initial value of the text field. <input type='text' id='myinput' value='initial text' /> <input type='text' id='dependent_input' value='' data-required-if="#myinput[value='']" /> // Step 1: type "foobar" in #myinput // Step 2: run these lines of code: <script> $('#myinput').val() //=> returns "foobar" $('#myinput[value="foobar"]').length //=> returns 0 </script> I understand why it's doing that. jQuery probably uses getAttribute() in the background. Is there any other way to filter based on the current value of an input box using purely jQuery selectors?

    Read the article

  • What is the best way to structure those jquery call backs?

    - by user518138
    I am new to jquery and recently have been amazed how powerful those call backs are. But here I got some logic and I am not sure what the best way is. Basically, I got a bunch of tables in web sql database in chrome. I will need to go through say table A, table B and table C. I need to submit each row of the table to server. Each row represents a bunch of complicated logic and data url and they have to be submitted in the order of A - B - C. The regular java way would be: TableA.SubmitToServer() { query table A; foreach(row in tableA.rows) { int nRetID = submitToServer(row); do other updates.... } } Similar for tableB and table C. then just call: TableA.SubmitToServer(); TableB.SubmitToServer(); TableC.SubmitToServer(); //that is very clear and easy. But in JQuery, it probably will be: db.Transaction(function (tx){ var strQuery = "select * from TableA"; tx.executeSql(strQuery, [], function (tx, result){ for(i = 0 ; i < result.rows.length; i++) { submitTableARowToServer(tx, result.rows.getItem(i), function (tx, result) { //do some other related updates based on this row from tableA //also need to upload some related files to server... }); } }, function errorcallback....) }); As you can see, there are already enough nested callbacks. Now, where should I put the process for TableB and tableC? They all need to have similar logic and they can only be called after everything is done from TableA. So, What is the best way to do this in jquery? Thanks

    Read the article

  • How to use scrollTop in jQuery when scrolling within a div?

    - by sharataka
    I am trying to get the scrollTop using jQuery to work when the content I am trying to scroll to is located in within a div. The current implementation doesn't do anything javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ //$(this).animate(function(){ $('html, body').animate({ scrollTop: $("#test4").offset().top }, 2000); //}); }); </script> html <div class="row"> <div class = "span12"> <div class = "row"> <div class = "span2"> <div style="height:480px;font:12px Georgia, Garamond, Serif;overflow:auto;"> <div id = "test1">Test1</div> <div id = "test2">Test2</div> <div id = "test3">Test3</div> <div id = "test4">Test4</div> </div> </div> <div class = "row"> <div class = "span8"> Other content on the page </div> </div> </div> </div> </div>

    Read the article

  • Writing all the html of a document with jquery instead of in the page body?

    - by Robert
    I'm a UI person currently working on a web application, where most of the people I work with are back end developers. I'm currently at a disagreement with them about whether or not the above is a prudent thing to do. This application doe use quite a bit of JavaScript, and wouldn't even work without it unfortunately. This being the case, One of the back end developers that I'm working with is claiming that pages could and even SHOULD be build completely with JavaScript or jquery. This caught me completely off guard. We're talking about div tags, lists, background images and text here. I'm trying to explain to him that this isn't the right way to do things at all, and from a best practices perspective: content(html) should be separate from presentation(css), and behavior(script etc.). I know that it's possible to write html in jquery, although I haven't done it, but am I wrong in my thinking that this isn't the way things should be done. Is it even possible to write ALL the code with jquery? would love to hear any thoughts either way, as I will be discussing this with him again tomorrow.

    Read the article

  • jQuery: Is it possible to assign a DOM element to a variable for later use?

    - by Braxo
    I'm working on a project that is using jQuery, which I'm much more familiar with Mootools. I'll start with my code first. var customNamespace = { status: 'closed', popup: $('#popup'), showPopup: function() { // ... } } $(document).ready(function(){ console.log($('#popup')); console.log(customNamespace.popup); console.log($(customNamespace.popup)); $('#popup').fadeIn('slow'); (customNamespace.popup).fadeIn('slow'); $(customNamespace.popup).fadeIn('slow'); }); My goal is to not have jQuery traverse the DOM everytime I want to do something with the #popup div, so I wanted to save it to a variable to use it throughout my script. When the page loads, the console prints out the object 3 times as I would expect, so I assumed that for each method, the fadeIn would just work. But it doesn't, only $('#popup').fadeIn('slow'); Actually fades in the div. Even if I remove my namespace hash, and just save the object to a global variable, and do a var globalVariable = $('#popup'); . . . globalVariable.fadeIn('slow'); Also does not work as I thought it would. Can jQuery do what I am trying to do?

    Read the article

  • Using jQuery, CKEditor, AJAX in ASP.NET MVC 2

    - by Ray Linder
    After banging my head for days on a “A potentially dangerous Request.Form value was detected" issue when post (ajax-ing) a form in ASP.NET MVC 2 on .NET 4.0 framework using jQuery and CKEditor, I found that when you use the following: Code Snippet $.ajax({     url: '/TheArea/Root/Add',     type: 'POST',     data: $("#form0Add").serialize(),     dataType: 'json',     //contentType: 'application/json; charset=utf-8',     beforeSend: function ()     {         pageNotify("NotifyMsgContentDiv", "MsgDefaultDiv", '<img src="/Content/images/content/icons/busy.gif" /> Adding post, please wait...', 300, "", true);         $("#btnAddSubmit").val("Please wait...").addClass("button-disabled").attr("disabled", "disabled");     },     success: function (data)     {         $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');         redirectToUrl("/Exhibitions");     },     error: function ()     {         pageNotify("NotifyMsgContentDiv", "MsgErrorDiv", '<img src="/Content/images/content/icons/cross.png" /> Could not add post. Please try again or contact your web administrator.', 6000, "normal");         $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');     } }); Notice the following: Code Snippet data: $("#form0Add").serialize(), You may run into the “A potentially dangerous Request.Form value was detected" issue with this. One of the requirements was NOT to disable ValidateRequest (ValidateRequest=”false”). For this project (and any other project) I felt it wasn’t necessary to disable ValidateRequest. Note: I’ve search for alternatives for the posting issue and everyone and their mothers continually suggested to disable ValidateRequest. That bothers me – a LOT. So, disabling ValidateRequest is totally out of the question (and always will be).  So I thought to modify how the “data: “ gets serialized. the ajax data fix was simple, add a .html(). YES!!! IT WORKS!!! No more “potentially dangerous” issue, ajax form posts (and does it beautifully)! So if you’re using jQuery to $.ajax() a form with CKEditor, remember to do: Code Snippet data: $("#form0Add").serialize().html(), or bad things will happen. Also, don’t forget to set Code Snippet config.htmlEncodeOutput = true; for the CKEditor config.js file (or equivalent). Example: Code Snippet CKEDITOR.editorConfig = function( config ) {     // Define changes to default configuration here. For example:     // config.language = 'fr';     config.uiColor = '#ccddff';     config.width = 640;     config.ignoreEmptyParagraph = true;     config.resize_enabled = false;     config.skin = 'kama';     config.enterMode = CKEDITOR.ENTER_BR;       config.toolbar = 'MyToolbar';     config.toolbar_MyToolbar =     [         ['Bold', 'Italic', 'Underline'],         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Font', 'FontSize', 'TextColor', 'BGColor'],         ['BulletedList', 'NumberedList', '-', 'Outdent', 'Indent'],         '/',         ['Scayt', '-', 'Cut', 'Copy', 'Paste', 'Find'],         ['Undo', 'Redo'],         ['Link', 'Unlink', 'Anchor', 'Image', 'Flash', 'HorizontalRule'],         ['Table'],         ['Preview', 'Source']     ];     config.htmlEncodeOutput = true; }; Happy coding!!! Tags: jQuery ASP.NET MVC 2 ASP.NET 4.0 AJAX

    Read the article

  • Adding proper THEAD sections to a GridView

    - by Rick Strahl
    I’m working on some legacy code for a customer today and dealing with a page that has my favorite ‘friend’ on it: A GridView control. The ASP.NET GridView control (and also the older DataGrid control) creates some pretty messed up HTML. One of the more annoying things it does is to generate all rows including the header into the page in the <tbody> section of the document rather than in a properly separated <thead> section. Here’s is typical GridView generated HTML output: <table class="tablesorter blackborder" cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse:collapse;"> <tr> <th scope="col">Name</th> <th scope="col">Company</th> <th scope="col">Entered</th><th scope="col">Balance</th> </tr> <tr> <td>Frank Hobson</td><td>Hobson Inc.</td> <td>10/20/2010 12:00:00 AM</td><td>240.00</td> </tr> ... </table> Notice that all content – both the headers and the body of the table – are generated directly under the <table> tag and there’s no explicit use of <tbody> or <thead> (or <tfooter> for that matter). When the browser renders this the document some default settings kick in and the DOM tree turns into something like this: <table> <tbody> <tr> <-- header <tr> <—detail row <tr> <—detail row </tbody> </table> Now if you’re just rendering the Grid server side and you’re applying all your styles through CssClass assignments this isn’t much of a problem. However, if you want to style your grid more generically using hierarchical CSS selectors it gets a lot more tricky to format tables that don’t properly delineate headers and body content. Also many plug-ins and other JavaScript utilities that work on tables require a properly formed table layout, and many of these simple won’t work out of the box with a GridView. For example, one of the things I wanted to do for this app is use the jQuery TableSorter plug-in which – not surprisingly – requires to work of table headers in the DOM document. Out of the box, the TableSorter plug-in doesn’t work with GridView controls, because the lack of a <thead> section to work on. Luckily with a little help of some jQuery scripting there’s a real easy fix to this problem. Basically, if we know the GridView generated table has a header in it, code like the following will move the headers from <tbody> to <thead>: <script type="text/javascript"> $(document).ready(function () { // Fix up GridView to support THEAD tags $("#gvCustomers tbody").before("<thead><tr></tr></thead>"); $("#gvCustomers thead tr").append($("#gvCustomers th")); $("#gvCustomers tbody tr:first").remove(); $("#gvCustomers").tablesorter({ sortList: [[1, 0]] }); }); </script> And voila you have a table that now works with the TableSorter plug-in. If you use GridView’s a lot you might want something a little more generic so the following does the same thing but should work more generically on any GridView/DataGrid missing its <thead> tag: function fixGridView(tableEl) {            var jTbl = $(tableEl);         if(jTbl.find("tbody>tr>th").length > 0) {         jTbl.find("tbody").before("<thead><tr></tr></thead>");         jTbl.find("thead tr").append(jTbl.find("th"));         jTbl.find("tbody tr:first").remove();     } } which you can call like this: $(document).ready(function () { fixGridView( $("#gvCustomers") ); $("#gvCustomers").tablesorter({ sortList: [[1, 0]] }); }); Server Side THEAD Rendering [updated from comments 11/21/2010] Several commenters pointed out that you can also do this on the server side by using the GridView.HeaderRow.TableSection property to force rendering with a proper table header. I was unaware of this option actually – not exactly an easy one to discover. One issue here is that timing of this needs to happen during the databinding process so you need to use an event handler: this.gvCustomers.DataBound += (object o, EventArgs ev) => { gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader; }; this.gvCustomers.DataSource = custList; this.gvCustomers.DataBind(); You can apply the same logic for the FooterRow. It’s beyond me why this rendering mode isn’t the default for a GridView – why would you ever want to have a table that doesn’t use a THEAD section??? But I disgress :-) I don’t use GridViews much anymore – opting for more flexible approaches using ListViews or even plain code based views or other custom displays that allow more control over layout, but I still see a lot of old code that does use them old clunkers including my own :) (gulp) and this does make life a little bit easier especially if you’re working with any of the jQuery table related plug-ins that expect a proper table structure.© Rick Strahl, West Wind Technologies, 2005-2010Posted in ASP.NET  jQuery  

    Read the article

  • How do I encapsulate form/post/validation[/redirect] in ViewUserControl in ASP.Net MVC 2

    - by paul
    What I am trying to achieve: encapsulate a Login (or any) Form to be reused across site post to self when Login/validation fails, show original page with Validation Summary (some might argue to just post to Login Page and show Validation Summary there; if what I'm trying to achieve isn't possible, I will just go that route) when Login succeeds, redirect to /App/Home/Index also, want to: stick to PRG principles avoid ajax keep Login Form (UserController.Login()) as encapsulated as possible; avoid having to implement HomeController.Login() since the Login Form might appear elsewhere All but the redirect works. My approach thus far has been: Home/Index includes Login Form: <%Html.RenderAction("Login","User");%> User/Login ViewUserControl<UserLoginViewModel> includes: <%=Html.ValidationSummary("") % using(Html.BeginForm()){} includes hidden form field "userlogin"="1" public class UserController : BaseController { ... [AcceptPostWhenFieldExists(FieldName = "userlogin")] public ActionResult Login(UserLoginViewModel model, FormCollection form){ if (ModelState.IsValid) { if(checkUserCredentials()) { setUserCredentials() return this.RedirectToAction<Areas.App.Controllers.HomeController>(x = x.Index()); } else { return View(); } } ... } Works great when: ModelState or User Credentials fail -- return View() does yield to Home/Index and displays appropriate validation summary. (I have a Register Form on the same page, using the same structure. Each form's validation summary only shows when that form is submitted.) Fails when: ModelState and User Credentials valid -- RedirectToAction<>() gives following error: "Child actions are not allowed to perform redirect actions." It seems like in the Classic ASP days, this would've been solved with Response.Buffer=True. Is there an equivalent setting or workaround now? Btw, running: ASP.Net 4, MVC 2, VS 2010, Dev/Debugging Web Server I hope all of that makes sense. So, what are my options? Or where am I going wrong in my approach? tia!

    Read the article

  • Maven webapp with maven-eclipse-plugin doesn't generate <dependent-module>

    - by codevourer
    I use the eclipse:eclipse goal to generate an Eclipse Project environment. The deployment works fine. The goal creates the var classpath entries for all needed dependencies. With m2eclipse there was the Maven Container which defines an export folder which was WEB-INF/lib for me. But i don't want to rely on m2eclipse so i don't use it anymore. the class path entries which are generated by eclipse:eclipse goal don't have such a export folder. While booting the servlet container with WTP it publishes all resources and classes except the libraries to the context. Whats missing to publish the needed libs, or isn't that possible without m2eclipse integration? Enviroment Eclipse 3.5 JEE Galileo Apache Maven 2.2.1 (r801777; 2009-08-06 21:16:01+0200) Java version: 1.6.0_14 m2eclipse The maven-eclipse-plugin configuration <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-eclipse-plugin</artifactId> <version>2.8</version> <configuration> <projectNameTemplate>someproject-[artifactId]</projectNameTemplate> <useProjectReferences>false</useProjectReferences> <downloadSources>false</downloadSources> <downloadJavadocs>false</downloadJavadocs> <wtpmanifest>true</wtpmanifest> <wtpversion>2.0</wtpversion> <wtpapplicationxml>true</wtpapplicationxml> <wtpContextName>someproject-[artifactId]</wtpContextName> <additionalProjectFacets> <jst.web>2.3</jst.web> </additionalProjectFacets> </configuration> </plugin> The generated files After executing the eclipse:eclipse goal, the dependent-module is not listed in my generated .settings/org.eclipse.wst.common.component, so on server booting i miss the depdencies. This is what i get: <?xml version="1.0" encoding="UTF-8"?> <project-modules id="moduleCoreId" project-version="1.5.0"> <wb-module deploy-name="someproject-core"> <wb-resource deploy-path="/" source-path="src/main/java"/> <wb-resource deploy-path="/" source-path="src/main/webapp"/> <wb-resource deploy-path="/" source-path="src/main/resources"/> </wb-module> </project-modules> Update for upcoming readers The problem here was the deviant packaging-type, if u use maven-eclipse-plugin please validate the use of <packaging>war</packaging> or ear. The following problems are marked of the situations that i have two build-lifecycles in one maven pom.

    Read the article

  • Visual Studio 2005 - OleDbConnection throws "Invalid authorization specification" in Form Designer,

    - by Jason Dagit
    I have a form with an OleDbConnection object on it. This form fails to load in the Form Designer with the message: One or more errors encountered while loading the designer. The errors are listed below. Some errors can be fixed by rebuilding your project, while others may require code changes. Invalid authorization specification at ADODB.ConnectionClass.Open(String ConnectionString, String UserID, String Password, Int32 Options) ... (stack trace continues into user code) I've tracked this down to the OleDbConnection string. If I hardcode in the server IP, username/password/dbinstance into the constructor of the GUI form then the form will load in the designer. At run-time it is not an issue because we require the user to provide the login details. The question: Is it possible to use the OleDbConnection and the Form designer without supplying the database credentials in the source code of the form? For example, is there a property of the OleDbConnection or Form that I can set so that it doesn't need to access the database during Form design? My concern is that if we ever move the database server or change the login that the code will stop working in the designer.

    Read the article

< Previous Page | 392 393 394 395 396 397 398 399 400 401 402 403  | Next Page >