Use of jQuery

Can you please tell me that, where did jQuery is used in project and what are the reasons. I am not so familiar with this jQuery thing, but I know that it's related to some kind of animation. I am not able to understand that where it is used on NopCommerce and why.

Please Reply Soon

Thanks in Advance

I get the following error at first time after submitting this Topic, but on second chance it run well.

"An error occurred while updating the entries. See the inner exception for details. "

Google is your friend. jQuery is an excellent JavaScript library and it is now endorsed by the Microsoft ASP.NET team.

I've started using jQuery recently for Ajax, DOM manipulation, and for utility tasks like manipulating arrays, and would not want to go back to. It turns JavaScript into the language it always should have been! :)

I don't know the answer to your question about where jQuery is used in Nop (I think it's not used a lot?) but you could try searching in the source code for "jquery" or "$".

Thanks for your Reply Stephen. I had found "$" in the source code and it's used in many files. "$" is used to accesss the value of ResourseString also. Can you please tell me that what is the use of "$" or jQuery in this. And what are these ResourceString are and how to use them.

There are some Code driven from NopCommerce in Reference of "$" use in the project.

File Name: OrderDetails.cs

  protected override void OnPreRender(EventArgs e)
        {
            BindJQuery();
            
            //order totals editing
            this.btnEditOrderTotals.Attributes.Add("onclick", "toggleOrderTotals(true);return false;");
            this.btnCancelOrderTotals.Attributes.Add("onclick", "toggleOrderTotals(false);return false;");

            //address editing
            this.btnEditBillingAddress.Attributes.Add("onclick", "toggleBillingAddress(true);return false;");
            this.btnCancelBillingAddress.Attributes.Add("onclick", "toggleBillingAddress(false);return false;");
            this.btnEditShippingAddress.Attributes.Add("onclick", "toggleShippingAddress(true);return false;");
            this.btnCancelShippingAddress.Attributes.Add("onclick", "toggleShippingAddress(false);return false;");
            
            //product editing
            foreach (GridViewRow row in gvOrderProductVariants.Rows)
            {
                Panel pnlEditPvUnitPrice = row.FindControl("pnlEditPvUnitPrice") as Panel;
                Panel pnlEditPvQuantity = row.FindControl("pnlEditPvQuantity") as Panel;
                Panel pnlEditPvDiscount = row.FindControl("pnlEditPvDiscount") as Panel;
                Panel pnlEditPvPrice = row.FindControl("pnlEditPvPrice") as Panel;
                Button btnEditOpv = row.FindControl("btnEditOpv") as Button;
                Button btnDeleteOpv = row.FindControl("btnDeleteOpv") as Button;
                Button btnSaveOpv = row.FindControl("btnSaveOpv") as Button;
                Button btnCancelOpv = row.FindControl("btnCancelOpv") as Button;
                var hfOrderProductVariantId = row.FindControl("hfOrderProductVariantId") as HiddenField;
                int opvId = int.Parse(hfOrderProductVariantId.Value);

                StringBuilder editButtonJsStart = new StringBuilder();
                editButtonJsStart.AppendLine("<script type=\"text/javascript\">");
                editButtonJsStart.AppendLine("$(document).ready(function() {");
                editButtonJsStart.AppendLine(string.Format("toggleOpvEdit{0}(false);", opvId));
                editButtonJsStart.AppendLine("});");
                editButtonJsStart.AppendLine("</script>");
                Page.ClientScript.RegisterClientScriptBlock(GetType(),
                     string.Format("readyToggleOpvEditStart{0}", opvId),
                    editButtonJsStart.ToString());


                StringBuilder editButtonJs = new StringBuilder();
                editButtonJs.AppendLine("<script type=\"text/javascript\">");
                editButtonJs.AppendLine(string.Format("function toggleOpvEdit{0}(editMode) ", opvId));
                editButtonJs.AppendLine("{");
                editButtonJs.AppendLine("if (editMode) {");
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", pnlEditPvUnitPrice.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", pnlEditPvQuantity.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", pnlEditPvDiscount.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", pnlEditPvPrice.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", btnEditOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", btnDeleteOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", btnSaveOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", btnCancelOpv.ClientID));
                editButtonJs.AppendLine("}");
                editButtonJs.AppendLine("else {");
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", pnlEditPvUnitPrice.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", pnlEditPvQuantity.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", pnlEditPvDiscount.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", pnlEditPvPrice.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", btnEditOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').show();", btnDeleteOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", btnSaveOpv.ClientID));
                editButtonJs.AppendLine(string.Format("$('#{0}').hide();", btnCancelOpv.ClientID));
                editButtonJs.AppendLine("}");
                editButtonJs.AppendLine("}");
                editButtonJs.AppendLine("</script>");
                Page.ClientScript.RegisterClientScriptBlock(GetType(),
                    string.Format("readyToggleOpvEdit{0}", opvId),
                    editButtonJs.ToString());

                btnEditOpv.Attributes.Add("onclick",
                     string.Format("toggleOpvEdit{0}(true);return false;", opvId));
                btnCancelOpv.Attributes.Add("onclick",
                     string.Format("toggleOpvEdit{0}(false);return false;", opvId));
            
            }

            base.OnPreRender(e);
        }



File Name: Orderdetails.aspx

<div class="options">
        <asp:Button runat="server" Text="<% $NopResources:Admin.OrderDetails.BtnPrintPdfPackagingSlip.Text %>"
            CssClass="adminButtonBlue" ID="btnPrintPdfPackagingSlip" OnClick="BtnPrintPdfPackagingSlip_OnClick"
            ValidationGroup="BtnPrintPdfPackagingSlip" ToolTip="<% $NopResources:Admin.OrderDetails.BtnPrintPdfPackagingSlip.Tooltip %>" />
        <asp:Button ID="btnGetInvoicePDF" runat="server" CssClass="adminButtonBlue" Text="<% $NopResources:Admin.OrderDetails.InvoicePDF.Text %>"
            OnClick="btnGetInvoicePDF_Click" CausesValidation="false" ToolTip="<% $NopResources:Admin.OrderDetails.InvoicePDF.Tooltip %>" />
        <asp:Button ID="DeleteButton" runat="server" CssClass="adminButtonBlue" Text="<% $NopResources:Admin.OrderDetails.DeleteButton.Text %>"
            OnClick="DeleteButton_Click" CausesValidation="false" ToolTip="<% $NopResources:Admin.OrderDetails.DeleteButton.Tooltip %>" />
        <nopCommerce:ConfirmationBox runat="server" ID="cbDelete" TargetControlID="DeleteButton"
            YesText="<% $NopResources:Admin.Common.Yes %>" NoText="<% $NopResources:Admin.Common.No %>"
            ConfirmText="<% $NopResources:Admin.Common.AreYouSure %>" />
    </div>



Please Reply Soon

Thanks in Advance

The resource strings are key, value pairs that are stored in Nop_LocaleResourceString and the BaseNopPage or BaseNopControl has a function that lets you access those strings that are stored in the database. The resource strings in the database are all of those values you see when you go to localization in the administrative section. That is why you see the $ in the nopCommerce application.

In jQuery, the $ is a function that takes several different arguments. Its purpose is to get an object. jQuery is all about writing less code to do more. For more info about jQuery go to www.jquery.com and look at the documentation.