Search Results

Search found 26043 results on 1042 pages for 'jquery ui plugins'.

Page 40/1042 | < Previous Page | 36 37 38 39 40 41 42 43 44 45 46 47  | Next Page >

  • How come I can not install plugins on my local Wordpress install?

    - by classer
    Hello, I got WordPress up and running fine on Ubuntu 10.04 by using this source except that when I try to update and install themes/plugins I get this following error message in wp-admin page: Installing Plugin: WordPress.com Stats 1.8.1 Downloading install package from http://downloads.wordpress.org/plugin/stats.1.8.1.zip… Unpacking the package… Could not create directory. /var/www/wordpress/wp-content/upgrade/stats.tmp/stats Actions: Return to Plugin Installer At first I thought I had to setup an FTP account but searched more and I found some information that says that I need to change the permissions of the wp-content folder which is located in the directory: /var/www/wordpress/wp-content I tried changing it by doing: sudo chmod -R 777 wp-content/ but when I tried installing a plugin I got the same error message. I also tried passing it 755 as a permission but still got the same thing. I settled on 755 because it is more secure I have read. How can I solve this problem safely and securely?

    Read the article

  • migrating from Prototype to jQuery in Rails, having trouble with duplicate get request

    - by aressidi
    I'm in the process of migrating from Prototype to jQuery and moving all JS outside of the view files. All is going fairly well with one exception. Here's what I'm trying to do, and the problem I'm having. I have a diary where users can update records in-line in the page like so: user clicks 'edit' link to edit an entry in the diary a get request is performed via jQuery and an edit form is displayed allowing the user to modify the record user updates the record, the form disappears and the updated record is shown in place of the form All of that works so far. The problem arises when: user updates a record user clicks 'edit' to update another record in this case, the edit form is shown twice! In firebug I get a status code 200 when the form shows, and then moments later, another edit form shows again with a status code of 304 I only want the form to show once, not twice. The form shows twice only after I update a record, otherwise everything works fine. Here's the code, any ideas? I think this might have to do with the fact that in food_item_update.js I call the editDiaryEntry() after a record is updated, but if I don't call that function and try and update the record after it's been modified, then it just spits up the .js.erb response on the screen. That's also why I have the editDiaryEntry() in the add_food.js.erb file. Any help would be greatly appreciated. diary.js jQuery(document).ready(function() { postFoodEntry(); editDiaryEntry(); initDatePicker(); }); function postFoodEntry() { jQuery('form#add_entry').submit(function(e) { e.preventDefault(); jQuery.post(this.action, jQuery(this).serialize(), null, "script"); // return this }); } function editDiaryEntry() { jQuery('.edit_link').click(function(e) { e.preventDefault(); // This should look to see if one version of this is open... if (jQuery('#edit_container_' + this.id).length == 0 ) { jQuery.get('/diary/entry/edit', {id: this.id}, null, "script"); } }); } function closeEdit () { jQuery('.close_edit').click(function(e) { e.preventDefault(); jQuery('.entry_edit_container').remove(); jQuery("#entry_" + this.id).show(); }); } function updateDiaryEntry() { jQuery('.edit_entry_form').submit(function(e) { e.preventDefault(); jQuery.post(this.action, $(this).serialize(), null, "script"); }); } function initDatePicker() { jQuery("#date, #edit_date").datepicker(); }; add_food.js.erb jQuery("#entry_alert").show(); jQuery('#add_entry')[ 0 ].reset(); jQuery('#diary_entries').html("<%= escape_javascript(render :partial => 'members/diary/diary_entries', :object => @diary, :locals => {:record_counter => 0, :date_header => 0, :edit_mode => @diary_edit}, :layout => false ) %>"); jQuery('#entry_alert').html("<%= escape_javascript(render :partial => 'members/diary/entry_alert', :locals => {:type => @type, :message => @alert_message}) %>"); jQuery('#entry_alert').show(); setTimeout(function() { jQuery('#entry_alert').fadeOut('slow'); }, 5000); editDiaryEntry(); food_item_edit.js.erb jQuery("#entry_<%= @entry.id %>").hide(); jQuery("#entry_<%= @entry.id %>").after("<%= escape_javascript(render :partial => 'members/diary/food_item_edit', :locals => {:user_food_profile => @entry}) %>"); closeEdit(); updateDiaryEntry(); initDatePicker(); food_item_update.js jQuery("#entry_<%= @entry.id %>").replaceWith("<%= escape_javascript(render :partial => 'members/diary/food_item', :locals => {:entry => @entry, :total_calories => 0}) %>"); jQuery('.entry_edit_container').remove(); editDiaryEntry();

    Read the article

  • jQuery Cycle Plugin - Content not cycling

    - by fmz
    I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' }); }); </script> Here is the html: <div class="slideshow"> <div id="mainImg-1" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number One.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-2" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Two.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-3" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number three.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-4" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Fout.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> Here is the CSS: .slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; } #mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-1 .quote, #mainImg-2 .quote, #mainImg-3 .quote, #mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; } Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up. Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html I would appreciate some help to get this cycling through as it should. Thanks!

    Read the article

  • how to validate the form using jquery

    - by kumar
    I have this Fieldset values.. <fieldset class="clearfix" id="fieldset-exception"> <legend>Mass Edit Exception Information</legend> <div id="#error-msg-ID" class="ui-widget hide"> <div class="ui-state-highlight ui-corner-all"> <p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span> <span></span></p> </div> </div> <div class="fiveper"> <label for="ExceptionStatus"> Status: <span> </span> </label> <label for="ResolutionCode"> Resolution: <span> <%=Html.DropDownListFor(model => model.Exception.ResolutionCode, new SelectList(Model.LookupCodes["C_EXCPT_RESL"], "Key", "Value"))%> </span> </label> <label for="ReasonCode"> Reason: <span><%=Html.DropDownListFor(model => model.Exception.ReasonCode, new SelectList(Model.LookupCodes["C_EXCPT_RSN"], "Key", "Value"))%></span> </label> <label for="ExceptionStatus"> Action Taken: <span><%=Html.DropDownListFor(model => model.Exception.ActionCode, new SelectList(Model.LookupCodes["C_EXCPT_ACT"], "Key", "Value"))%></span> </label> </div> <div class="fiveper"> <label for="FollowupDate"> Follow-up: <span><input type="text" id="exc-flwup" name="fdate" /></span> <%--<%=Html.EditorFor(model=>model.Exception.FollowupDate) %>--%> </label> <label for="IOL"> Inquiry #: <%=Html.TextBox("Inquiry", ViewData["inq"] ?? "")%> </label> <label>Comment</label> <span> <%=Html.TextArea("value", ViewData["Comnt"] ?? "")%> <%=Html.ValidationMessage("value")%> </span> </div> <br /> <br /> <div> <input type="submit" class="button" value="Save" /> </div> </fieldset> before submiting I need to do some time of validation..below validation not working for me is that right what I am doing here? These all fieds user is entering from UI.. thanks <script type="text/javascript"> $(document).ready(function() { $('#btnSelectAll').click(function() { $('#EditExceptions input[name=chk]').attr('checked', true); }); $('#btnCancel').click(function() { $('#EditExceptions input[name=chk]').attr('checked',false); }); function validate_excpt(formData, jqForm, options) { var form = jqForm[0]; **if (form.e_Exception_ResolutionCode.value && !form.e_Exception_ReasonCode.value) { alert('All Resolution Codes need a Reason Code.'); return false; }** } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { if (responseText[0].substring(0, 16) != "System.Exception") { $('#error-msg-ID span:last').html('<strong>Update successful.</strong>'); $().ShowDialog('Success', 'Update successful'); } else { $('#error-msg-ID span:last').html('<strong>Update failed.</strong> ' + responseText[0].substring(0, 48)); $().ShowDialog('Failed', 'Update failed'); } $('#error-msg-ID').removeClass('hide'); $('#gui-stat-').html(responseText[1]); } $('#exc-').ajaxForm({ beforeSubmit: validate_excpt, success: showResponse, dataType: 'json' }); $('.button').button(); $("input[id^='exc-flwup']").datepicker({ duration: '', showTime: true, constrainInput: true, stepMinutes: 30, stepHours: 1, altTimeField: '', time24h: true, minDate: 0 }); $('#ui-timepicker-div').bgiframe(); }); </script>

    Read the article

  • Server.transfer causing HttpException

    - by salvationishere
    I am developing a C#/SQL ASP.NET web application in VS 2008. Currently I am using the Server.Transfer method to transfer control from one ASPX.CS file to another ASPX file. The first time through, this works. But after control is transferred to this new file it encounters a condition: if (restart == false) { where "restart" is a boolean variable. After this statement it immediately transfers control back to the same ASPX.CS file and tries to reexecute the Server.Transfer method. This time it gives me the following exception and stack trace. Do you know what is causing this? I tried to read this but it didn't make much sense to me. System.Web.HttpException was unhandled by user code Message="Error executing child request for DataMatch.aspx." Source="System.Web" ErrorCode=-2147467259 StackTrace: at System.Web.HttpServerUtility.Execute(String path, TextWriter writer, Boolean preserveForm) at System.Web.HttpServerUtility.Transfer(String path, Boolean preserveForm) at System.Web.HttpServerUtility.Transfer(String path) at AddFileToSQL._Default.btnAppend_Click(Object sender, EventArgs e) in C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\Default.aspx.cs:line 109 at System.Web.UI.HtmlControls.HtmlInputButton.OnServerClick(EventArgs e) at System.Web.UI.HtmlControls.HtmlInputButton.RaisePostBackEvent(String eventArgument) at System.Web.UI.HtmlControls.HtmlInputButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) at System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) at System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) InnerException: System.Web.HttpCompileException Message="c:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx(14): error CS1502: The best overloaded method match for 'System.Web.UI.HtmlControls.HtmlTableRowCollection.Add(System.Web.UI.HtmlControls.HtmlTableRow)' has some invalid arguments" Source="System.Web" ErrorCode=-2147467259 SourceCode="#pragma checksum \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\" \"{406ea660-64cf-4c82-b6f0-42d48172a799}\" \"76750ABD913CF678D216C1E9CFB62BDF\"\r\n//------------------------------------------------------------------------------\r\n// \r\n// This code was generated by a tool.\r\n// Runtime Version:2.0.50727.3603\r\n//\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n// \r\n//------------------------------------------------------------------------------\r\n\r\nnamespace ASP {\r\n \r\n #line 285 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web.Profile;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 280 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Text.RegularExpressions;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 282 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web.Caching;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 278 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Configuration;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 277 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Collections.Specialized;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 19 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n using System.Web.UI.WebControls.WebParts;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 289 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web.UI.HtmlControls;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 19 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n using System.Web.UI.WebControls;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 19 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n using System.Web.UI;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 276 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Collections;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 275 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 284 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web.Security;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 281 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 283 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Web.SessionState;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 279 \"C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Config\web.config\"\r\n using System.Text;\r\n \r\n #line default\r\n #line hidden\r\n \r\n \r\n [System.Runtime.CompilerServices.CompilerGlobalScopeAttribute()]\r\n public class datamatch_aspx : global::AddFileToSQL.DataMatch, System.Web.SessionState.IRequiresSessionState, System.Web.IHttpHandler {\r\n \r\n private static bool @_initialized;\r\n \r\n private static object @_fileDependencies;\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n public datamatch_aspx() {\r\n string[] dependencies;\r\n ((global::AddFileToSQL.DataMatch)(this)).AppRelativeVirtualPath = \"~/DataMatch.aspx\";\r\n if ((global::ASP.datamatch_aspx.@__initialized == false)) {\r\n dependencies = new string[1];\r\n dependencies[0] = \"~/DataMatch.aspx\";\r\n global::ASP.datamatch_aspx.@__fileDependencies = this.GetWrappedFileDependencies(dependencies);\r\n global::ASP.datamatch_aspx.@__initialized = true;\r\n }\r\n this.Server.ScriptTimeout = 30000000;\r\n }\r\n \r\n protected System.Web.Profile.DefaultProfile Profile {\r\n get {\r\n return ((System.Web.Profile.DefaultProfile)(this.Context.Profile));\r\n }\r\n }\r\n \r\n protected ASP.global_asax ApplicationInstance {\r\n get {\r\n return ((ASP.global_asax)(this.Context.ApplicationInstance));\r\n }\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTitle @_BuildControl_control3() {\r\n global::System.Web.UI.HtmlControls.HtmlTitle @_ctrl;\r\n \r\n #line 6 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTitle();\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlHead @_BuildControl_control2() {\r\n global::System.Web.UI.HtmlControls.HtmlHead @_ctrl;\r\n \r\n #line 5 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlHead(\"head\");\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.HtmlControls.HtmlTitle @_ctrl1;\r\n \r\n #line 5 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControl_control3();\r\n \r\n #line default\r\n #line hidden\r\n System.Web.UI.IParserAccessor @_parser = ((System.Web.UI.IParserAccessor)(@_ctrl));\r\n \r\n #line 5 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 5 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \r\n \r\n \r\n \r\n\"));\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTableRow @_BuildControl_control5() {\r\n global::System.Web.UI.HtmlControls.HtmlTableRow @_ctrl;\r\n \r\n #line 15 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTableRow();\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.WebControls.PlaceHolder @_BuildControlphTextBoxes() {\r\n global::System.Web.UI.WebControls.PlaceHolder @_ctrl;\r\n \r\n #line 19 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.WebControls.PlaceHolder();\r\n \r\n #line default\r\n #line hidden\r\n this.phTextBoxes = @_ctrl;\r\n \r\n #line 19 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.ID = \"phTextBoxes\";\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTableCell @_BuildControl_control8() {\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl;\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTableCell(\"td\");\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Align = \"center\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.VAlign = \"top\";\r\n \r\n #line default\r\n #line hidden\r\n System.Web.UI.IParserAccessor @_parser = ((System.Web.UI.IParserAccessor)(@_ctrl));\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.WebControls.PlaceHolder @_ctrl1;\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControlphTextBoxes();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 18 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.WebControls.Label @_BuildControlInstructions() {\r\n global::System.Web.UI.WebControls.Label @_ctrl;\r\n \r\n #line 22 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.WebControls.Label();\r\n \r\n #line default\r\n #line hidden\r\n this.Instructions = @_ctrl;\r\n @_ctrl.ApplyStyleSheetSkin(this);\r\n \r\n #line 22 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.ID = \"Instructions\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 22 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Font.Italic = true;\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 22 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Text = \"Now select from the dropdownlists which table columns from my database you want t\" +\r\n \"o map these fields to\";\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTableCell @_BuildControl_control9() {\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl;\r\n \r\n #line 21 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTableCell(\"td\");\r\n \r\n #line default\r\n #line hidden\r\n System.Web.UI.IParserAccessor @_parser = ((System.Web.UI.IParserAccessor)(@_ctrl));\r\n \r\n #line 21 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.WebControls.Label @_ctrl1;\r\n \r\n #line 21 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControlInstructions();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 21 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 21 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.WebControls.Button @_BuildControlbtnSubmit() {\r\n global::System.Web.UI.WebControls.Button @_ctrl;\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.WebControls.Button();\r\n \r\n #line default\r\n #line hidden\r\n this.btnSubmit = @_ctrl;\r\n @_ctrl.ApplyStyleSheetSkin(this);\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.ID = \"btnSubmit\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Text = \"Submit\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Width = new System.Web.UI.WebControls.Unit(150, System.Web.UI.WebControls.UnitType.Pixel);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n ((System.Web.UI.IAttributeAccessor)(@_ctrl)).SetAttribute(\"style\", \"top:auto; left:auto\");\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n ((System.Web.UI.IAttributeAccessor)(@_ctrl)).SetAttribute(\"top\", \"100px\");\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Click -= new System.EventHandler(this.btnSubmit_Click);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 26 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @__ctrl.Click += new System.EventHandler(this.btnSubmit_Click);\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTableCell @_BuildControl_control10() {\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl;\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTableCell(\"td\");\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Align = \"center\";\r\n \r\n #line default\r\n #line hidden\r\n System.Web.UI.IParserAccessor @_parser = ((System.Web.UI.IParserAccessor)(@_ctrl));\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.WebControls.Button @_ctrl1;\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControlbtnSubmit();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 25 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n  \r\n \"));\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private void @_BuildControl_control7(System.Web.UI.HtmlControls.HtmlTableCellCollection @_ctrl) {\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl1;\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControl_control8();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Add(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl2;\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl2 = this.@_BuildControl_control9();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Add(@_ctrl2);\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.HtmlControls.HtmlTableCell @_ctrl3;\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl3 = this.@_BuildControl_control10();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Add(@_ctrl3);\r\n \r\n #line default\r\n #line hidden\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.HtmlControls.HtmlTableRow @_BuildControl_control6() {\r\n global::System.Web.UI.HtmlControls.HtmlTableRow @_ctrl;\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.HtmlControls.HtmlTableRow();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Align = \"center\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 17 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n this.@_BuildControl_control7(@_ctrl.Cells);\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.WebControls.Literal @_BuildControllTextData() {\r\n global::System.Web.UI.WebControls.Literal @_ctrl;\r\n \r\n #line 34 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.WebControls.Literal();\r\n \r\n #line default\r\n #line hidden\r\n this.lTextData = @_ctrl;\r\n \r\n #line 34 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.ID = \"lTextData\";\r\n \r\n #line default\r\n #line hidden\r\n return @_ctrl;\r\n }\r\n \r\n [System.Diagnostics.DebuggerNonUserCodeAttribute()]\r\n private global::System.Web.UI.WebControls.Panel @_BuildControlpnlDisplayData() {\r\n global::System.Web.UI.WebControls.Panel @_ctrl;\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl = new global::System.Web.UI.WebControls.Panel();\r\n \r\n #line default\r\n #line hidden\r\n this.pnlDisplayData = @_ctrl;\r\n @_ctrl.ApplyStyleSheetSkin(this);\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.ID = \"pnlDisplayData\";\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl.Visible = false;\r\n \r\n #line default\r\n #line hidden\r\n System.Web.UI.IParserAccessor @_parser = ((System.Web.UI.IParserAccessor)(@_ctrl));\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralControl(\"\r\n \r\n \r\n \" +\r\n \" \"));\r\n \r\n #line default\r\n #line hidden\r\n global::System.Web.UI.WebControls.Literal @_ctrl1;\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_ctrl1 = this.@_BuildControllTextData();\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(@_ctrl1);\r\n \r\n #line default\r\n #line hidden\r\n \r\n #line 31 \"C:\Documents and Settings\Admin\My Documents\Visual Studio 2008\Projects\AddFileToSQL\AddFileToSQL\DataMatch.aspx\"\r\n @_parser.AddParsedSubObject(new System.Web.UI.LiteralCont

    Read the article

  • Netflix, jQuery, JSONP, and OData

    - by Stephen Walther
    At the last MIX conference, Netflix announced that they are exposing their catalog of movie information using the OData protocol. This is great news! This means that you can take advantage of all of the advanced OData querying features against a live database of Netflix movies. In this blog entry, I’ll demonstrate how you can use Netflix, jQuery, JSONP, and OData to create a simple movie lookup form. The form enables you to enter a movie title, or part of a movie title, and display a list of matching movies. For example, Figure 1 illustrates the movies displayed when you enter the value robot into the lookup form.   Using the Netflix OData Catalog API You can learn about the Netflix OData Catalog API at the following website: http://developer.netflix.com/docs/oData_Catalog The nice thing about this website is that it provides plenty of samples. It also has a good general reference for OData. For example, the website includes a list of OData filter operators and functions. The Netflix Catalog API exposes 4 top-level resources: Titles – A database of Movie information including interesting movie properties such as synopsis, BoxArt, and Cast. People – A database of people information including interesting information such as Awards, TitlesDirected, and TitlesActedIn. Languages – Enables you to get title information in different languages. Genres – Enables you to get title information for specific movie genres. OData is REST based. This means that you can perform queries by putting together the right URL. For example, if you want to get a list of the movies that were released after 2010 and that had an average rating greater than 4 then you can enter the following URL in the address bar of your browser: http://odata.netflix.com/Catalog/Titles?$filter=ReleaseYear gt 2010&AverageRating gt 4 Entering this URL returns the movies in Figure 2. Creating the Movie Lookup Form The complete code for the Movie Lookup form is contained in Listing 1. Listing 1 – MovieLookup.htm <!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>Netflix with jQuery</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> <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> </head> <body> <label>Search Movies:</label> <input id="movieName" size="50" /> <button id="btnLookup">Lookup</button> <div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script> <script type="text/javascript"> $("#btnLookup").click(function () { // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); }); function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } </script> </body> </html> The HTML page in Listing 1 includes two JavaScript libraries: <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> The first script tag retrieves jQuery from the Microsoft Ajax CDN. You can learn more about the Microsoft Ajax CDN by visiting the following website: http://www.asp.net/ajaxLibrary/cdn.ashx The second script tag is used to reference Resig’s micro-templating library. Because I want to use a template to display each movie, I need this library: http://ejohn.org/blog/javascript-micro-templating/ When you enter a value into the Search Movies input field and click the button, the following JavaScript code is executed: // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); This code Is used to build a query that will be executed against the Netflix Catalog API. For example, if you enter the search phrase King Kong then the following URL is created: http://odata.netflix.com/Catalog/Titles?$filter=substringof(‘King%20Kong’,Name)&$callback=callback&$format=json This query includes the following parameters: $filter – You assign a filter expression to this parameter to filter the movie results. $callback – You assign the name of a JavaScript callback method to this parameter. OData calls this method to return the movie results. $format – you assign either the value json or xml to this parameter to specify how the format of the movie results. Notice that all of the OData parameters -- $filter, $callback, $format -- start with a dollar sign $. The Movie Lookup form uses JSONP to retrieve data across the Internet. Because WCF Data Services supports JSONP, and Netflix uses WCF Data Services to expose movies using the OData protocol, you can use JSONP when interacting with the Netflix Catalog API. To learn more about using JSONP with OData, see Pablo Castro’s blog: http://blogs.msdn.com/pablo/archive/2009/02/25/adding-support-for-jsonp-and-url-controlled-format-to-ado-net-data-services.aspx The actual JSONP call is performed by calling the $.ajax() method. When this call successfully completes, the JavaScript callback() method is called. The callback() method looks like this: function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } The movie results from Netflix are passed to the callback method. The callback method takes advantage of Resig’s micro-templating library to display each of the movie results. A template used to display each movie is passed to the tmpl() method. The movie template looks like this: <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script>   This template looks like a server-side ASP.NET template. However, the template is rendered in the client (browser) instead of the server. Summary The goal of this blog entry was to demonstrate how well jQuery works with OData. We managed to use a number of interesting open-source libraries and open protocols while building the Movie Lookup form including jQuery, JSONP, JSON, and OData.

    Read the article

  • jQuery for dynamic Add/Remove row function, it's clone() objcet cannot modify element name

    - by wcy0942
    I'm try jQuery for dynamic Add/Remove row function, but I meet some question in IE8 , it's clone() objcet cannot modify element name and cannot use javascript form (prhIndexed[i].prhSrc).functionKey, but in FF it works very well, source code as attachment, please give me a favor to solve the problem. <html> $(document).ready(function() { //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Define some variables - edit to suit your needs //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // table id var _table = jQuery("#prh"); // modify here // tbody tbody var _tableBody = jQuery("tbody",_table); // buttons var _addRowBtn = jQuery("#controls #addRow"); var _insertRowBtn= jQuery("#controls #insertRow"); var _removeRowBtn= jQuery("#controls #removeRow"); //check box all var _cbAll= jQuery(".checkBoxAll", _table ); // add how many rows var _addRowsNumber= jQuery("#controls #add_rows_number"); var _hiddenControls = jQuery("#controls .hiddenControls"); var blankRowID = "blankRow"; //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //click the add row button //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ _addRowBtn.click(function(){ // when input not isNaN do add row if (! isNaN(_addRowsNumber.attr('value')) ){ for (var i = 0 ; i < _addRowsNumber.attr('value') ;i++){ var newRow = jQuery("#"+blankRowID).clone(true).appendTo(_tableBody) .attr("style", "display: ''") .addClass("rowData") .removeAttr("id"); } refreshTable(_table); } return false; //kill the browser default action }); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //checkbox select all //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ _cbAll.click(function(){ var checked_status = this.checked; var prefixName = _cbAll.attr('name'); // find name prefix match check box (group of table) jQuery("input[name^='"+prefixName+"']").each(function() { this.checked = checked_status; }); }); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Click the remove all button //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ _removeRowBtn.click(function(){ var prefixName = _cbAll.attr('name'); // find name prefix match check box (group of table) jQuery("input[name^='"+prefixName+"']").not(_cbAll).each(function() { if (this.checked){ // remove tr row , ckbox name the same with rowid jQuery("#"+this.name).remove(); } }); refreshTable(_table); return false; }); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Click the insert row button //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ _insertRowBtn.click(function(){ var prefixName = _cbAll.attr('name'); jQuery("input[name^='"+prefixName+"']").each(function(){ var currentRow = this.name;// ckbox name the same with rowid if (this.checked == true){ newRow = jQuery("#"+blankRowID).clone(true).insertAfter(jQuery("#"+currentRow)) .attr("style", "display: ''") .addClass("rowData") .removeAttr("id"); } }); refreshTable(_table); return false; }); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Function to refresh new row //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function refreshTable(_table){ var tableId = _table.attr('id'); var count =1; // ignore hidden column // update tr rowid jQuery ( "#"+tableId ).find(".rowData").each(function(){ jQuery(this).attr('id', tableId + "_" + count ); count ++; }); count =0; jQuery ( "#"+tableId ).find("input[type='checkbox'][name^='"+tableId+"']").not(".checkBoxAll").each(function(){ // update check box id and name (not check all) jQuery(this).attr('id', tableId + "_ckbox" + count ); jQuery(this).attr('name', tableId + "_" + count ); count ++; }); // write customize code here customerRow(_table); }; //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Function to customer new row : modify here //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function customerRow(_table){ var form = document.myform; var pageColumns = ["prhSeq", "prhChannelproperty", "prhSrc"]; //modify here var tableId = _table.attr('id'); var count =1; // ignore hidden column // update tr rowid jQuery ( "#"+tableId ).find(".rowData").each(function(){ for(var i = 0; i < pageColumns.length; i++){ jQuery ( this ).find("input[name$='"+pageColumns[i]+"']").each(function(){ jQuery(this).attr('name', 'prhIndexed['+count+'].'+pageColumns[i] ); // update prhSeq Value if (pageColumns[i] == "prhSeq") { jQuery(this).attr('value', count ); } if (pageColumns[i] == "prhSrc") { // clear default onfocus //jQuery(this).attr("onfocus", ""); jQuery(this).focus(function() { // doSomething }); } }); jQuery ( this ).find("select[name$='"+pageColumns[i]+"']").each(function(){ jQuery(this).attr('name', 'prhIndexed['+count+'].'+pageColumns[i] ); }); }// end of for count ++; }); jQuery ( "#"+tableId ).find(".rowData").each(function(){ // only for debug alert ( jQuery(this).html() ) }); }; //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ }); <div id="controls"> <table width="350px" border="0"> <tr><td> <input id="addRow" type="button" name="addRows" value="Add Row" /> <input id="add_rows_number" type="text" name="add_rows_number" value="1" style="width:20px;" maxlength="2" /> <input id="insertRow" type="button" name="insert" value="Insert Row" /> <input id="removeRow" type="button" name="deleteRows" value="Delete Row" /> </td></tr> </table></div> <table id="prh" width="350px" border="1"> <thead> <tr class="listheader"> <td nowrap width="21"><input type="checkbox" name="prh_" class="checkBoxAll"/></td> <td nowrap width="32">Sequence</td> <td nowrap width="153" align="center">Channel</td> <td nowrap width="200">Source</td> </tr> </thead> <tbody> <!-- dummy row --> <tr id='blankRow' style="display:none" > <td><input type="checkbox" id='prh_ckbox0' name='prh_0' value=""/></td> <td align="right"><input type="text" name="prhIndexed[0].prhSeq" maxlength="10" value="" onkeydown="" onblur="" onfocus="" readonly="readonly" style="width:30px;background-color:transparent;border:0;line-height:13pt;color: #993300;background-color:transparent;border:0;line-height:13pt;color: #993300;"></td> <td><select name="prhIndexed[0].prhChannelproperty"><option value=""></option> <option value="A01">A01</option> <option value="A02">A02</option> <option value="A03">A03</option> <option value="A04">A04</option> </select></td> <td><input type="text" name="prhIndexed[0].prhSrc" maxlength="6" value="new" style="width:80px;background-color:#FFFFD7;"> <div id='displayPrhSrcName0'></div> </td> </tr> <!-- row data --> <tr id='prh_1' class="rowData"> <td><input type="checkbox" id='prh_ckbox1' name='prh_1' value=""/></td> <td align="right"><input type="text" name="prhIndexed[1].prhSeq" maxlength="10" value="1" onkeydown="" onblur="" onfocus="" readonly="readonly" style="width:30px;background-color:transparent;border:0;line-height:13pt;color: #993300;background-color:transparent;border:0;line-height:13pt;color: #993300;"></td> <td><select name="prhIndexed[1].prhChannelproperty"><option value=""></option> <option value="A01">A01</option> <option value="A02">A02</option> <option value="A03">A03</option> <option value="A04">A04</option> </select></td> <td><input type="text" name="prhIndexed[1].prhSrc" maxlength="6" value="new" style="width:80px;background-color:#FFFFD7;"> <div id='displayPrhSrcName0'></div> </td> </tr> <tr id='prh_2' class="rowData"> <td><input type="checkbox" id='prh_ckbox2' name='prh_2' value=""/></td> <td align="right"><input type="text" name="prhIndexed[2].prhSeq" maxlength="10" value="2" onkeydown="" onblur="" onfocus="" readonly="readonly" style="width:30px;background-color:transparent;border:0;line-height:13pt;color: #993300;background-color:transparent;border:0;line-height:13pt;color: #993300;"></td> <td><select name="prhIndexed[2].prhChannelproperty"><option value=""></option> <option value="A01">A01</option> <option value="A02">A02</option> <option value="A03">A03</option> <option value="A04">A04</option> </select></td> <td><input type="text" name="prhIndexed[2].prhSrc" maxlength="6" value="new" style="width:80px;background-color:#FFFFD7;"> <div id='displayPrhSrcName0'></div> </td> </tr> </tbody> </table>

    Read the article

  • JQUERY: Setting Active state on animated menu tabs

    - by Tony
    I have image sprites that use JQuery to set the BG position on mouseover and mouseout events. When I set the active state BG position using JQUERY it works fine until I move my cursor away from the active 'tab' which then fires the mouseout event animation. What I want is the mouseClick event to stop the animation on the active tab but still allow the animation effect to work on the other tabs, and when another tab is clicked for the active state to be removed from the current tab to the new 'active' tab. JQuery $(function(){ /* This script changes main nav links hover state*/ $('.navigation a') .css( {backgroundPosition: "-1px -120px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-1px -240px)"}, {duration:400}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-1px -120px)"}, {duration:400, complete:function (){ $(this).css({backgroundPosition: "-1px -120px"}) }}) }) }); $(document).ready(function(){ $("a").click(function(){ $(this).css({backgroundPosition: "-1px -235px"}); }); }); HTML <ul class="navigation"> <li><a href="#index" tabindex="10" title="Home" id="homeButton"></a></li> <li><a href="#about" tabindex="20" title="About us" id="aboutButton"></a></li> <li><a href="#facilities" tabindex="30" title="Our facilities and opening Times" id="facilitiesButton"></a></li> <li><a href="#advice" tabindex="40" title="Advice and useful links" c id="adviceButton"></a></li> <li><a href="#find" tabindex="50" title="How to find Us" id="findButton"></a></li> <li><a href="#contact" tabindex="60" title="Get in touch with us" id="contactButton"></a></li> </ul> You can see what I've got so far here Thanks in advance for any help

    Read the article

  • jQuery Validation error...

    - by Povylas
    Hi, I have been struggling with this jQuery Validation Plugin. Here is the code: <script type="text/javascript"> $(function() { var validator = $('#signup').validate({ errorElement: 'span', rules: { username: { required: true, minlenght: 6 //remote: "check-username.php" }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, agree: "required" }, messages: { username: { required: "Please enter a username", minlength: "Your username must consist of at least 6 characters" //remote: "Somenoe have already chosen nick like this." }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }); var root = $("#wizard").scrollable({size: 1, clickable: false}); // some variables that we need var api = root.scrollable(); $("#data").click(function() { validator.form(); }); // validation logic is done inside the onBeforeSeek callback api.onBeforeSeek(function(event, i) { if($("#signup").valid() == false){ return false; }else{ return true; } $("#status li").removeClass("active").eq(i).addClass("active"); }); //if tab is pressed on the next button seek to next page root.find("button.next").keydown(function(e) { if (e.keyCode == 9) { // seeks to next tab by executing our validation routine api.next(); e.preventDefault(); } }); $('button.fin').click(function(){ parent.$.fn.fancybox.close() }); }); </script> And here is the error: $.validator.methods[method] is undefined http://www.vvv.vhost.lt/js/jquery-validate/jquery.validate.min.js Line 15 I am completely confused... Maybe some kind of handler is needed? I would be grateful for any kind of answer.

    Read the article

  • jQuery Autocomplete with _renderItem and catagories

    - by LillyPop
    As a newb to jQuery im wondering if its possible to have both jQuery _renderItem (for custom list item HTML/CSS) AND the categories working together in harmony? Ive got my _renderItem working great but I have no idea how to incorporate categories into the mix. My code so far $(document).ready(function () { $(':input[data-autocomplete]').each(function () { $(':input[data-autocomplete]').autocomplete({ source: $(this).attr("data-autocomplete") }).data("autocomplete")._renderItem = function (ul, item) { var MyHtml = "<a>" + "<div class='ac' >" + "<div class='ac_img_wrap' >" + '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' + "</div>" + "<div class='ac_mid' >" + "<div class='ac_name' >" + item.value + "</div>" + "<div class='ac_info' >" + item.info + "</div>" + "</div>" + "</div>" + "</a>"; return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul); }; }); }); The jQuery documentation for the autocomplete gives the following code example : $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function (ul, items) { var self = this, currentCategory = ""; $.each(items, function (index, item) { if (item.category != currentCategory) { ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); currentCategory = item.category; } self._renderItem(ul, item); }); } }); Id like to get my custom HTML (_renderItem) and categories working together, can anyone help me to merge these two together or point me in the right direction. Thanks

    Read the article

  • ZendX Jquery Decorator

    - by iJD
    How use partial decorator in Jquery Element I use this code for Form Element: $title = new Zend_Form_Element_Text('title'); $title->setRequired(true) ->setAttrib('class', 'inputbox') ->setLabel('Title'); $title->viewScript = 'RegElement.phtml'; $title->setDecorators( array( array('ViewScript', array('class' => 'RegElement')) ) ); But when i use Jquery Element i dont know how implement it: $datePicker = new ZendX_JQuery_Form_Element_DatePicker( "datePicker1", array("label" => "Date:") ); $datePicker->viewScript = 'RegElement.phtml'; $datePicker->setDecorators( array( array('ViewScript', array('class' => 'RegElement')) ) ); //views/scripts/RegElement.phtml <li class="row <?php echo $this->class ?>"> <div class="cont-error"> <?php echo $this->formErrors($this->element->getMessages()); ?> </div> <div class="rowfields"> <?php echo $this->formLabel($this->element->getName(), $this->element->getLabel()) ?> <?php echo $this->{$this->element->helper}( $this->element->getName(), $this->element->getValue(), $this->element->getAttribs() ) ?> </div> <div class="hint"><?php echo $this->element->getDescription() ?></div> </li> And display this error: Warning: Exception caught by form: Cannot render jQuery form element without at least one decorator implementing the 'ZendX_JQuery_Form_Decorator_UiWidgetElementMarker' interface. I need display datePicker with same format. but idk how implement this interface. thx for your help.

    Read the article

  • Run script after Jquery finish

    - by Felipe Fernández
    First let's explain the hack that I was trying to implement. When using Total Validator Tool through my web page and I get following error: [WCAG v1 6.3 (A), US-508-l] Consider providing a alternative after each tag As my page relies heavily on javascript I can't provide a real alternative, so I decided to add an empty noscript tag after every script appearence. Let's say I need to provide a clean report about accesibility about my web page even the hack is senseless. (I know the hack is unethical and silly, let's use it as example material, but the point of my post are the final questions) I tried the following approach: $(document).ready(function(){ $("script").each(function() { $(this).after("<noscript></noscript>"); }); }); The problem raises because I have a jQueryUI DatePicker component on my page. jQuery adds a script section after the DOM is ready so my hack fails as miss this section. So the questions are: How handles jQuery library to be executed after document is ready? How can I run my code after jQuery finish its labours?

    Read the article

  • Ashamed to admit using jQuery?

    - by Matt Stevens
    Something I've noticed over the past few weeks is how many big commercial websites use jQuery combined with lots of plugins - but don't admit it. They will rename the main library to something obscure, as well as the plugins. Quite a few will even remove the comments that contain the MIT/GPL license information. (just noticed today that odeon.co.uk have done exactly this) Why are they doing this? are they abashed by the face that they are using a free and open source library?

    Read the article

  • getDate with Jquery Datepicker

    - by matt
    i am trying to get date from my implementation of jquery date picker, add it to a string and display the resulting image in my div. Something however is just not working. Can anyone check out the code and have a look at it? The code is supposed to take the date from date picker, combine it in a string which is to have the necessary code to display tag, images are located in /image and in the format aYY-MM-DD.png, new to this date picker and can't quite get it down yet. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Datepicker $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', inline: true, minDate: new Date(2010, 1 - 1, 1), maxDate:new Date(2010, 12 - 1, 31), altField: '#datepicker_value', }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); //var img_date = .datepicker('getDate'); var day1 = $("#datepicker").datepicker('getDate').getDate(); var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1; var year1 = $("#datepicker").datepicker('getDate').getFullYear(); var fullDate = year1 + "-" + month1 + "-" + day1; var str_output = "<h1><center><img src=\"/images/a" + fullDate + ".png\"></center></h1><br/><br>"; page_output.innerHTML = str_output; // writing the results to the div element (page_out) </script> </head> <body style="background-color:#000;color:#fff;margin: auto auto;"> <!-- Datepicker --> <div id="datepicker"></div> <!-- Highlight / Error --> <p>Date Value: <input type="text" id="datepicker_value" /></p> <div id="page_output" style="text-align:center; margin-top:80px; margin-bottom:20px; "></div> </body>

    Read the article

  • Conflict between Jquery Validate and Asp.net MVC

    - by chobo2
    Hi I am using asp.net mvc 2.0 and jquery validate 1.7 (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) What happens is this. A user can click on a link to edit a product. When a user clicks on which product they want to edit a jquery dialog box appears with a form of textboxes and dropdown lists. These html controls have information filled in them. Say if the user chooses to edit the Ipad product a dialog will appear and one of the form textboxes will have "Ipad" in it. Now this form gets rendered on the server side(the form is in a partial view). When loading the dialog box a ajax request is made to get that partial view and in the response part of the ajax call I do something like $('#EditDialog).html(ajaxresponse).dialog({...}); So I would have something like this rendered in my dialog box <form id="EditProduct"> Product Name: <input type="text" value="IPad" name="ProductName" /> </form> Now my jquery validate would be something like this. $("#EditProduct").validate( { errorContainer: "#Errorbox", errorLabelContainer: "#Errorbox ul", wrapper: "li", rules: { ProductName: "required" } }); So I know this works because I use the same validate for add product and if you try to leave ProductName blank it will show a validation error. Now it does not work with the edit one though and I think I know the reason why but not how to fix it. The value for the textbox is "IPad" this is how the Html.TextBoxFor() renders it. However if a user goes and changes the product name to "Iphone" or blank the value never changes. It is always "Ipad" in the html. So I think when the validate goes and looks it goes oh there is a value already in it. It is valid even though in reality it might be blank. When I post to the server through ajax it gets the right value and the server side validation stops it but my entire clientside validation is rendered useless because of this problem as it will never change the html.

    Read the article

  • Search multiple datepicker on same grid

    - by DHF
    I'm using multiple datepicker on same grid and I face the problem to get a proper result. I used 3 datepicker in 1 grid. Only the first datepicker (Order Date)is able to output proper result while the other 2 datepicker (Start Date & End Date) are not able to generate proper result. There is no problem with the query, so could you find out what's going on here? Thanks in advance! php wrapper <?php ob_start(); require_once 'config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the PDO driver class require_once "php/jqGridPdo.php"; // include the datepicker require_once "php/jqCalendar.php"; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = "SELECT c.CompanyID, c.CompanyCode, c.CompanyName, c.Area, o.OrderCode, o.Date, m.maID ,m.System, m.Status, m.StartDate, m.EndDate, m.Type FROM company c, orders o, maintenance_agreement m WHERE c.CompanyID = o.CompanyID AND o.OrderID = m.OrderID "; // Set the table to where you update the data $grid->table = 'maintenance_agreement'; // set the ouput format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setPrimaryKeyId('maID'); // Let the grid create the model $grid->setColModel(); // Set the url from where we obtain the data $grid->setUrl('grouping_ma_details.php'); // Set grid caption using the option caption $grid->setGridOptions(array( "sortable"=>true, "rownumbers"=>true, "caption"=>"Group by Maintenance Agreement", "rowNum"=>20, "height"=>'auto', "width"=>1300, "sortname"=>"maID", "hoverrows"=>true, "rowList"=>array(10,20,50), "footerrow"=>false, "userDataOnFooter"=>false, "grouping"=>true, "groupingView"=>array( "groupField" => array('CompanyName'), "groupColumnShow" => array(true), //show or hide area column "groupText" =>array('<b> Company Name: {0}</b>',), "groupDataSorted" => true, "groupSummary" => array(true) ) )); if(isset($_SESSION['login_admin'])) { $grid->addCol(array( "name"=>"Action", "formatter"=>"actions", "editable"=>false, "sortable"=>false, "resizable"=>false, "fixed"=>true, "width"=>60, "formatoptions"=>array("keys"=>true), "search"=>false ), "first"); } // Change some property of the field(s) $grid->setColProperty("CompanyID", array("label"=>"ID","hidden"=>true,"width"=>30,"editable"=>false,"editoptions"=>array("readonly"=>"readonly"))); $grid->setColProperty("CompanyName", array("label"=>"Company Name","hidden"=>true,"editable"=>false,"width"=>150,"align"=>"center","fixed"=>true)); $grid->setColProperty("CompanyCode", array("label"=>"Company Code","hidden"=>true,"width"=>50,"align"=>"center")); $grid->setColProperty("OrderCode", array("label"=>"Order Code","width"=>110,"editable"=>false,"align"=>"center","fixed"=>true)); $grid->setColProperty("maID", array("hidden"=>true)); $grid->setColProperty("System", array("width"=>150,"fixed"=>true,"align"=>"center")); $grid->setColProperty("Type", array("width"=>280,"fixed"=>true)); $grid->setColProperty("Status", array("width"=>70,"align"=>"center","edittype"=>"select","editoptions"=>array("value"=>"Yes:Yes;No:No"),"fixed"=>true)); $grid->setSelect('System', "SELECT DISTINCT System, System AS System FROM master_ma_system ORDER BY System", false, true, true, array(""=>"All")); $grid->setSelect('Type', "SELECT DISTINCT Type, Type AS Type FROM master_ma_type ORDER BY Type", false, true, true, array(""=>"All")); $grid->setColProperty("StartDate", array("label"=>"Start Date","width"=>120,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("StartDate",array("buttonOnly"=>false)); $grid->datearray = array('StartDate'); $grid->setColProperty("EndDate", array("label"=>"End Date","width"=>120,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("EndDate",array("buttonOnly"=>false)); $grid->datearray = array('EndDate'); $grid->setColProperty("Date", array("label"=>"Order Date","width"=>100,"editable"=>false,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("Date",array("buttonOnly"=>false)); $grid->datearray = array('Date'); // This command is executed after edit $maID = jqGridUtils::GetParam('maID'); $Status = jqGridUtils::GetParam('Status'); $StartDate = jqGridUtils::GetParam('StartDate'); $EndDate = jqGridUtils::GetParam('EndDate'); $Type = jqGridUtils::GetParam('Type'); // This command is executed immediatley after edit occur. $grid->setAfterCrudAction('edit', "UPDATE maintenance_agreement SET m.Status=?, m.StartDate=?, m.EndDate=?, m.Type=? WHERE m.maID=?", array($Status,$StartDate,$EndDate,$Type,$maID)); $selectorder = <<<ORDER function(rowid, selected) { if(rowid != null) { jQuery("#detail").jqGrid('setGridParam',{postData:{CompanyID:rowid}}); jQuery("#detail").trigger("reloadGrid"); // Enable CRUD buttons in navigator when a row is selected jQuery("#add_detail").removeClass("ui-state-disabled"); jQuery("#edit_detail").removeClass("ui-state-disabled"); jQuery("#del_detail").removeClass("ui-state-disabled"); } } ORDER; // We should clear the grid data on second grid on sorting, paging, etc. $cleargrid = <<<CLEAR function(rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData',true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); } CLEAR; $grid->setGridEvent('onSelectRow', $selectorder); $grid->setGridEvent('onSortCol', $cleargrid); $grid->setGridEvent('onPaging', $cleargrid); $grid->setColProperty("Area", array("width"=>100,"hidden"=>false,"editable"=>false,"fixed"=>true)); $grid->setColProperty("HeadCount", array("label"=>"Head Count","align"=>"center", "width"=>100,"hidden"=>false,"fixed"=>true)); $grid->setSelect('Area', "SELECT DISTINCT AreaName, AreaName AS Area FROM master_area ORDER BY AreaName", false, true, true, array(""=>"All")); $grid->setSelect('CompanyName', "SELECT DISTINCT CompanyName, CompanyName AS CompanyName FROM company ORDER BY CompanyName", false, true, true, array(""=>"All")); $custom = <<<CUSTOM jQuery("#getselected").click(function(){ var selr = jQuery('#grid').jqGrid('getGridParam','selrow'); if(selr) { window.open('http://www.smartouch-cdms.com/order.php?CompanyID='+selr); } else alert("No selected row"); return false; }); CUSTOM; $grid->setJSCode($custom); // Enable toolbar searching $grid->toolbarfilter = true; $grid->setFilterOptions(array("stringResult"=>true,"searchOnEnter"=>false,"defaultSearch"=>"cn")); // Enable navigator $grid->navigator = true; // disable the delete operation programatically for that table $grid->del = false; // we need to write some custom code when we are in delete mode. // get the grid operation parameter to see if we are in delete mode // jqGrid sends the "oper" parameter to identify the needed action $deloper = $_POST['oper']; // det the company id $cid = $_POST['CompanyID']; // if the operation is del and the companyid is set if($deloper == 'del' && isset($cid) ) { // the two tables are linked via CompanyID, so let try to delete the records in both tables try { jqGridDB::beginTransaction($conn); $comp = jqGridDB::prepare($conn, "DELETE FROM company WHERE CompanyID= ?", array($cid)); $cont = jqGridDB::prepare($conn,"DELETE FROM contact WHERE CompanyID = ?", array($cid)); jqGridDB::execute($comp); jqGridDB::execute($cont); jqGridDB::commit($conn); } catch(Exception $e) { jqGridDB::rollBack($conn); echo $e->getMessage(); } } // Enable only deleting if(isset($_SESSION['login_admin'])) { $grid->setNavOptions('navigator', array("pdf"=>true, "excel"=>true,"add"=>false,"edit"=>true,"del"=>false,"view"=>true, "search"=>true)); } else $grid->setNavOptions('navigator', array("pdf"=>true, "excel"=>true,"add"=>false,"edit"=>false,"del"=>false,"view"=>true, "search"=>true)); // In order to enable the more complex search we should set multipleGroup option // Also we need show query roo $grid->setNavOptions('search', array( "multipleGroup"=>false, "showQuery"=>true )); // Set different filename $grid->exportfile = 'Company.xls'; // Close the dialog after editing $grid->setNavOptions('edit',array("closeAfterEdit"=>true,"editCaption"=>"Update Company","bSubmit"=>"Update","dataheight"=>"auto")); $grid->setNavOptions('add',array("closeAfterAdd"=>true,"addCaption"=>"Add New Company","bSubmit"=>"Update","dataheight"=>"auto")); $grid->setNavOptions('view',array("Caption"=>"View Company","dataheight"=>"auto","width"=>"1100")); ob_end_clean(); //solve TCPDF error // Enjoy $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?> javascript code jQuery(document).ready(function ($) { jQuery('#grid').jqGrid({ "width": 1300, "hoverrows": true, "viewrecords": true, "jsonReader": { "repeatitems": false, "subgrid": { "repeatitems": false } }, "xmlReader": { "repeatitems": false, "subgrid": { "repeatitems": false } }, "gridview": true, "url": "session_ma_details.php", "editurl": "session_ma_details.php", "cellurl": "session_ma_details.php", "sortable": true, "rownumbers": true, "caption": "Group by Maintenance Agreement", "rowNum": 20, "height": "auto", "sortname": "maID", "rowList": [10, 20, 50], "footerrow": false, "userDataOnFooter": false, "grouping": true, "groupingView": { "groupField": ["CompanyName"], "groupColumnShow": [false], "groupText": ["<b> Company Name: {0}</b>"], "groupDataSorted": true, "groupSummary": [true] }, "onSelectRow": function (rowid, selected) { if (rowid != null) { jQuery("#detail").jqGrid('setGridParam', { postData: { CompanyID: rowid } }); jQuery("#detail").trigger("reloadGrid"); // Enable CRUD buttons in navigator when a row is selected jQuery("#add_detail").removeClass("ui-state-disabled"); jQuery("#edit_detail").removeClass("ui-state-disabled"); jQuery("#del_detail").removeClass("ui-state-disabled"); } }, "onSortCol": function (rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData', true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); }, "onPaging": function (rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData', true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); }, "datatype": "json", "colModel": [ { "name": "Action", "formatter": "actions", "editable": false, "sortable": false, "resizable": false, "fixed": true, "width": 60, "formatoptions": { "keys": true }, "search": false }, { "name": "CompanyID", "index": "CompanyID", "sorttype": "int", "label": "ID", "hidden": true, "width": 30, "editable": false, "editoptions": { "readonly": "readonly" } }, { "name": "CompanyCode", "index": "CompanyCode", "sorttype": "string", "label": "Company Code", "hidden": true, "width": 50, "align": "center", "editable": true }, { "name": "CompanyName", "index": "CompanyName", "sorttype": "string", "label": "Company Name", "hidden": true, "editable": false, "width": 150, "align": "center", "fixed": true, "edittype": "select", "editoptions": { "value": "Aquatex Industries:Aquatex Industries;Benithem Sdn Bhd:Benithem Sdn Bhd;Daily Bakery Sdn Bhd:Daily Bakery Sdn Bhd;Eurocor Asia Sdn Bhd:Eurocor Asia Sdn Bhd;Evergrown Technology:Evergrown Technology;Goldpar Precision:Goldpar Precision;MicroSun Technologies Asia:MicroSun Technologies Asia;NCI Industries Sdn Bhd:NCI Industries Sdn Bhd;PHHP Marketing:PHHP Marketing;Smart Touch Technology:Smart Touch Technology;THOSCO Treatech:THOSCO Treatech;YHL Trading (Johor) Sdn Bhd:YHL Trading (Johor) Sdn Bhd;Zenxin Agri-Organic Food:Zenxin Agri-Organic Food", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Aquatex Industries:Aquatex Industries;Benithem Sdn Bhd:Benithem Sdn Bhd;Daily Bakery Sdn Bhd:Daily Bakery Sdn Bhd;Eurocor Asia Sdn Bhd:Eurocor Asia Sdn Bhd;Evergrown Technology:Evergrown Technology;Goldpar Precision:Goldpar Precision;MicroSun Technologies Asia:MicroSun Technologies Asia;NCI Industries Sdn Bhd:NCI Industries Sdn Bhd;PHHP Marketing:PHHP Marketing;Smart Touch Technology:Smart Touch Technology;THOSCO Treatech:THOSCO Treatech;YHL Trading (Johor) Sdn Bhd:YHL Trading (Johor) Sdn Bhd;Zenxin Agri-Organic Food:Zenxin Agri-Organic Food", "separator": ":", "delimiter": ";" } }, { "name": "Area", "index": "Area", "sorttype": "string", "width": 100, "hidden": true, "editable": false, "fixed": true, "edittype": "select", "editoptions": { "value": "Cemerlang:Cemerlang;Danga Bay:Danga Bay;Kulai:Kulai;Larkin:Larkin;Masai:Masai;Nusa Cemerlang:Nusa Cemerlang;Nusajaya:Nusajaya;Pasir Gudang:Pasir Gudang;Pekan Nenas:Pekan Nenas;Permas Jaya:Permas Jaya;Pontian:Pontian;Pulai:Pulai;Senai:Senai;Skudai:Skudai;Taman Gaya:Taman Gaya;Taman Johor Jaya:Taman Johor Jaya;Taman Molek:Taman Molek;Taman Pelangi:Taman Pelangi;Taman Sentosa:Taman Sentosa;Tebrau 4:Tebrau 4;Ulu Tiram:Ulu Tiram", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Cemerlang:Cemerlang;Danga Bay:Danga Bay;Kulai:Kulai;Larkin:Larkin;Masai:Masai;Nusa Cemerlang:Nusa Cemerlang;Nusajaya:Nusajaya;Pasir Gudang:Pasir Gudang;Pekan Nenas:Pekan Nenas;Permas Jaya:Permas Jaya;Pontian:Pontian;Pulai:Pulai;Senai:Senai;Skudai:Skudai;Taman Gaya:Taman Gaya;Taman Johor Jaya:Taman Johor Jaya;Taman Molek:Taman Molek;Taman Pelangi:Taman Pelangi;Taman Sentosa:Taman Sentosa;Tebrau 4:Tebrau 4;Ulu Tiram:Ulu Tiram", "separator": ":", "delimiter": ";" } }, { "name": "OrderCode", "index": "OrderCode", "sorttype": "string", "label": "Order No.", "width": 110, "editable": false, "align": "center", "fixed": true }, { "name": "Date", "index": "Date", "sorttype": "date", "label": "Order Date", "width": 100, "editable": false, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } } }, { "name": "maID", "index": "maID", "sorttype": "int", "key": true, "hidden": true, "editable": true }, { "name": "System", "index": "System", "sorttype": "string", "width": 150, "fixed": true, "align": "center", "edittype": "select", "editoptions": { "value": "Payroll:Payroll;TMS:TMS;TMS & Payroll:TMS & Payroll", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Payroll:Payroll;TMS:TMS;TMS & Payroll:TMS & Payroll", "separator": ":", "delimiter": ";" }, "editable": true }, { "name": "Status", "index": "Status", "sorttype": "string", "width": 70, "align": "center", "edittype": "select", "editoptions": { "value": "Yes:Yes;No:No" }, "fixed": true, "editable": true }, { "name": "StartDate", "index": "StartDate", "sorttype": "date", "label": "Start Date", "width": 120, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "editable": true }, { "name": "EndDate", "index": "EndDate", "sorttype": "date", "label": "End Date", "width": 120, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "editable": true }, { "name": "Type", "index": "Type", "sorttype": "string", "width": 530, "fixed": true, "edittype": "select", "editoptions": { "value": "Comprehensive MA:Comprehensive MA;FOC service, 20% spare part discount:FOC service, 20% spare part discount;Standard Package, FOC 1 time service, 20% spare part discount:Standard Package, FOC 1 time service, 20% spare part discount;Standard Package, FOC 2 time service, 20% spare part discount:Standard Package, FOC 2 time service, 20% spare part discount;Standard Package, FOC 3 time service, 20% spare part discount:Standard Package, FOC 3 time service, 20% spare part discount;Standard Package, FOC 4 time service, 20% spare part discount:Standard Package, FOC 4 time service, 20% spare part discount;Standard Package, FOC 6 time service, 20% spare part discount:Standard Package, FOC 6 time service, 20% spare part discount;Standard Package, no free:Standard Package, no free", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Comprehensive MA:Comprehensive MA;FOC service, 20% spare part discount:FOC service, 20% spare part discount;Standard Package, FOC 1 time service, 20% spare part discount:Standard Package, FOC 1 time service, 20% spare part discount;Standard Package, FOC 2 time service, 20% spare part discount:Standard Package, FOC 2 time service, 20% spare part discount;Standard Package, FOC 3 time service, 20% spare part discount:Standard Package, FOC 3 time service, 20% spare part discount;Standard Package, FOC 4 time service, 20% spare part discount:Standard Package, FOC 4 time service, 20% spare part discount;Standard Package, FOC 6 time service, 20% spare part discount:Standard Package, FOC 6 time service, 20% spare part discount;Standard Package, no free:Standard Package, no free", "separator": ":", "delimiter": ";" }, "editable": true } ], "postData": { "oper": "grid" }, "prmNames": { "page": "page", "rows": "rows", "sort": "sidx", "order": "sord", "search": "_search", "nd": "nd", "id": "maID", "filter": "filters", "searchField": "searchField", "searchOper": "searchOper", "searchString": "searchString", "oper": "oper", "query": "grid", "addoper": "add", "editoper": "edit", "deloper": "del", "excel": "excel", "subgrid": "subgrid", "totalrows": "totalrows", "autocomplete": "autocmpl" }, "loadError": function(xhr, status, err) { try { jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap, '<div class="ui-state-error">' + xhr.responseText + '</div>', jQuery.jgrid.edit.bClose, { buttonalign: 'right' } ); } catch(e) { alert(xhr.responseText); } }, "pager": "#pager" }); jQuery('#grid').jqGrid('navGrid', '#pager', { "edit": true, "add": false, "del": false, "search": true, "refresh": true, "view": true, "excel": true, "pdf": true, "csv": false, "columns": false }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "errorTextFormat": function (r) { return r.responseText; }, "closeAfterEdit": true, "editCaption": "Update Company", "bSubmit": "Update" }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "errorTextFormat": function (r) { return r.responseText; }, "closeAfterAdd": true, "addCaption": "Add New Company", "bSubmit": "Update" }, { "errorTextFormat": function (r) { return r.responseText; } }, { "drag": true, "closeAfterSearch": true, "multipleSearch": true }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "Caption": "View Company", "width": "1100" } ); jQuery('#grid').jqGrid('navButtonAdd', '#pager', { id: 'pager_excel', caption: '', title: 'Export To Excel', onClickButton: function (e) { try { jQuery("#grid").jqGrid('excelExport', { tag: 'excel', url: 'session_ma_details.php' }); } catch (e) { window.location = 'session_ma_details.php?oper=excel'; } }, buttonicon: 'ui-icon-newwin' }); jQuery('#grid').jqGrid('navButtonAdd', '#pager', { id: 'pager_pdf', caption: '', title: 'Export To Pdf', onClickButton: function (e) { try { jQuery("#grid").jqGrid('excelExport', { tag: 'pdf', url: 'session_ma_details.php' }); } catch (e) { window.location = 'session_ma_details.php?oper=pdf'; } }, buttonicon: 'ui-icon-print' }); jQuery('#grid').jqGrid('filterToolbar', { "stringResult": true, "searchOnEnter": false, "defaultSearch": "cn" }); jQuery("#getselected").click(function () { var selr = jQuery('#grid').jqGrid('getGridParam', 'selrow'); if (selr) { window.open('http://www.smartouch-cdms.com/order.php?CompanyID=' + selr); } else alert("No selected row"); return false; }); });

    Read the article

  • How do I use jQueryUI's ui-states with JSF2's h:messages?

    - by Andrew
    It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work. So taking inspiration directly from the jQueryUI theme demo page: <!-- Highlight / Error --> <h2 class="demoHeaders">Highlight / Error</h2> <div class="ui-widget"> <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> <strong>Hey!</strong> Sample ui-state-highlight style.</p> </div> </div> <br/> <div class="ui-widget"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> <strong>Alert:</strong> Sample ui-state-error style.</p> </div> </div> and trying to jam the css class details into my h:message as best I can: <div class="ui-widget"> <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/> </div> I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended. Any idea how I can make this work?

    Read the article

  • jQuery Validation plugin: checkbox groups and error message issues

    - by boomturn
    I've put together a form using the jQuery Validation plugin, and all inputs are fine with working validation and error messages – except for checkboxes. I have two checkbox problems. The first is that the Validation plugin API doesn't seem to handle checkboxes in grouped contexts (I'm using fieldsets for grouping). Found several approaches to the issue here, including reference to a post by Rebecca Murphey for a more general case using a custom method and class. Adapting that to this situation: jQuery.validator.addMethod('required_group', function(val, el) { var fieldParent = $(el).closest('fieldset'); return fieldParent.find('.required_group:checked').length; }); jQuery.validator.addClassRules('required_group', { 'required_group': true }); jQuery.validator.messages.required_group = 'Please check at least one box.'; This sort of works, but produces error messages on every checkbox, and only removes them as each box is clicked. This is not an acceptable situation for the user, who can only get rid of them by clicking false positives. Ideally, I guess what's needed is something to prevent or eliminate extra messages before they are displayed and use errorPlacement to display a single error message in the parent fieldset, that would then be removed with a click on any checkbox. Less ideally, maybe they would all display but an event handler could turn off the full set of redundant messages with a click, which is what this approach offered by tvanfosson appears to do. (Another customized approach here, but I couldn't get it to work.) I guess I should also note this form requires the checkboxes to have different names. My second problem is that one of the fieldsets with checkboxes in the form also contains a nested fieldset of checkboxes under one of the outer checkboxes. So in addition to the first-level one-box-checked requirement, if the particular checkbox containing the second-level checkboxes is checked, then at least one of the second-level boxes must be checked. Not sure about the right approach; I'm guessing what needs to happen (following the above scheme) is that the trigger checkbox would use toggleClass to add/remove 'required_group' class to all the checkboxes in the subfield, which would then (hopefully) behave the same as the parent field: $("#triggerCheckbox").click(function () { $(this).find(":checkbox").toggleClass("required_group"); }); Any suggestions or ideas welcome. I'm well beyond my limited jQuery skills on this one and would be happy to hear that I missed simple, elegant and/or obvious ways to do this!

    Read the article

  • Goodby jQuery Templates, Hello JsRender

    - by SGWellens
    A funny thing happened on my way to the jQuery website, I blinked and a feature was dropped: jQuery Templates have been discontinued. The new pretender to the throne is JsRender. jQuery Templates looked pretty useful when they first came out. Several articles were written about them but I stayed away because being on the bleeding edge of technology is not a productive place to be. I wanted to wait until it stabilized…in retrospect, it was a serendipitous decision. This time however, I threw all caution to the wind and took a close look at JSRender. Why? Maybe I'm having a midlife crisis; I'll go motorcycle shopping tomorrow. Caveat, here is a message from the site: Warning: JsRender is not yet Beta, and there may be frequent changes to APIs and features in the coming period. Fair enough, we've been warned. The first thing we need is some data to render. Below is some JSON formatted data. Typically this will come from an asynchronous call to a web service. For simplicity, I hard coded a variable:     var Golfers = [         { ID: "1", "Name": "Bobby Jones", "Birthday": "1902-03-17" },         { ID: "2", "Name": "Sam Snead", "Birthday": "1912-05-27" },         { ID: "3", "Name": "Tiger Woods", "Birthday": "1975-12-30" }         ]; We also need some templates, I created two. Note: The script blocks have the id property set. They are needed so JsRender can locate them.     <script id="GolferTemplate1" type="text/html">         {{=ID}}: <b>{{=Name}}</b> <i>{{=Birthday}}</i> <br />     </script>       <script id="GolferTemplate2" type="text/html">         <tr>             <td>{{=ID}}</td>             <td><b>{{=Name}}</b></td>             <td><i>{{=Birthday}}</i> </td>         </tr>     </script> Including the correct JavaScript files is trivial:     <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>     <script src="Scripts/jsrender.js" type="text/javascript"></script> Of course we need some place to render the output:     <div id="GolferDiv"></div><br />     <table id="GolferTable"></table> The code is also trivial:     function Test()     {         $("#GolferDiv").html($("#GolferTemplate1").render(Golfers));         $("#GolferTable").html($("#GolferTemplate2").render(Golfers));           // you can inspect the rendered html if there are poblems.         // var html = $("#GolferTemplate2").render(Golfers);     } And here's what it looks like with some random CSS formatting that I had laying around.    Not bad, I hope JsRender lasts longer than jQuery Templates. One final warning, a lot of jQuery code is ugly, butt-ugly. If you do look inside the jQuery files, you may want to cover your keyboard with some plastic in case you get vertigo and blow chunks. I hope someone finds this useful. Steve Wellens CodeProject

    Read the article

  • jQuery validation: how to customize trigger and response

    - by user302307
    I am new with jQuery. I have a servlet based application which render an HTML form. This form is submitted via a function and the submit button IS NOT submit button in HTML. It's a regular button that calls a javascript function to do the submission. When running the submission function, the servlet also run a function called doCheck() which is in javascript. This doCheck() function can be defined per page basis. if doCheck returns false, then the servlet will stop the submission; else it will submit the form. I want to use jQuery validation to fit the servlet application. Is there a way to customize jQuery validation to be triggered manually (ie. only when doCheck() is executed) but at the same time provides continuous check on the UI (ie. if one type invalid number in date field, it will gives the appropriate msg when onblur event happen)? Is there a way to make jQuery validation return true or false? Thank you.

    Read the article

  • alternative to JQuery form.submit() to do ajax post

    - by BluntTool
    Hello, I have a mvc2 application with a view like this <% using (Ajax.BeginForm("UserApprove", new { id = Model.id }, new AjaxOptions() { UpdateTargetId = "statusLights", OnSuccess = "HideButtons" }, new { id = "UserApprove" })) {%> <input type="button" value="Approve" onclick="$('#dialogApprove').dialog('open')" /> <div id="dialogApprove" title="Confirm"> <p> Are you sure you want to approve this request? </p> </div> <% } %> FYI, the controller returns a partial view back. I used to not have the jquery dialog and just simple a <input type="Submit" value="Approve" /> that used to work fine I added the jquery dialog and I have something like this to initialize the dialog. $("#dialogApprove").dialog({ autoOpen: false, draggable: true, resizable: false, buttons: { "Cancel": function() { $(this).dialog("close") }, "Approve": function() { $("#UserApprove").submit(); $(this).dialog("close"); } } }); The $("#UserApprove").submit(); does not seem to be doing an ajax post. It comes back with just the text from the partial view returned in a new page. I dont want to use the jquery form plugin which has .ajaxSubmit(). Is there any other way to force an ajax post from the jquery dialog "approve" button?

    Read the article

< Previous Page | 36 37 38 39 40 41 42 43 44 45 46 47  | Next Page >