Share via

Javascript function not working due to JQuery conflict

Donald Symmons 3,066 Reputation points
2024-02-23T08:32:06.9033333+00:00

My Javascript function, which loads fonts onto my webpage does not work again after I added draggable function for labels. I even added the JQuery no conflict rule but it is still not working. All Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <title></title>
    <style>
        .wrapper {
            width: 100%;
            align-items: stretch;
            min-height: 100vh;
        }
        #draggable1{
            cursor: move;
        }
        #Button1 {
            font-family: 'Graphik', sans-serif;
            border-radius: 5px;
            background-color: #0ba4db;
            color: #ffffff;
            padding: 6px;
            border-color: #0ba4db;
            height: 32px;
            line-height: 1.6;
            padding-left: 1em;
            padding-right: 1em;
            display: inline-block;
            font-size: 1.1rem;
            white-space: nowrap;
            vertical-align: middle;
        }
        html {
            font-size: 80.5%;
        }
        @media screen and (max-width: 600) {
            html {
                font-size: 58%;
            }
        }
        body {
            font-size: 1.6rem;
            line-height: 1.5;
            color: #011b33;
        }
        #GridParent {
            background-image: url('');          
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: auto;
            width: 100%;
        }
        #Label4 {
            font-weight: 500;
        }
    </style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div class="row col-sm-12" runat="server" id="Template" style="width: 100%; margin: 0 auto; padding: 10px; margin-right: auto; margin-left: auto; margin-bottom: 20px;">
                <div class="col-sm-3" style="width: 100%; margin: 0 auto; padding: 10px; height: 100%;">
                    <div class="" style="width: 100%; height: 100%; margin: 0 auto; border-radius: 5px; left: 0; z-index: 999; padding: 10px; border: 0.2px solid #f0f1f2; background-color: #fff; position: relative; box-shadow: 0 1px 2px 0 rgba(0, 0.1, 0, 0.1);">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <asp:Label ID="Label11" runat="server">Upload Background</asp:Label>
                                    <div class="input-group">
                                        <input type='file' runat="server" id='getval' name="background-image" onchange="readURL(event)" />
                                        <asp:HiddenField ID="HiddenField1" runat="server" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <asp:Label runat="server">Choose Font</asp:Label>
                                    <div class="input-group">
                                        <input type="text" runat="server" class="fonts form-control" id="fonts" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row" runat="server" id="PortraitColor">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label runat="server" id="Label19">Font color</label>
                                    <div class="input-group">
                                        <input type="color" runat="server" class="fonts form-control" id="color" onchange="LabelColor()" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8" style="width: 100%; margin: 0 auto; padding: 10px;">
                    <div class="parent" runat="server" id="GridParent" style="margin-left: auto; margin-right: auto; padding: 6px; border: 0.5px solid #efefef; display: flex; background-color: #ffffff; width: 100%; height: auto; box-shadow: 0 1px 2px 0 rgba(0, 0.1, 0, 0.1);">
                        <div class="grid-corner" style="width: 100%; background-color: transparent; margin: 0 auto; padding: 5px;">
                            <div class="heading" style="font-size: 20px; margin-top: 1%; margin-bottom: 2%">
                                <div id="draggable1" class="ui-widget-content" style="margin-bottom: 3%;">
                                     <asp:Label ID="Label4" runat="server" Font-Size="16pt" Text="INVOICE"></asp:Label>
                                </div>
                                <div style="width: 100%; display: inline-block; font-size: 10px; line-height: 1.7; position: relative;">
                                    <div id="draggable1" class="ui-widget-content" style="margin-bottom: 2%; float: left; text-align: left;">
                                        <asp:Image ID="imgFileUpload" runat="server" Height="50" ImageUrl="~/images/logoquive.png" />
                                    </div>
                                    <div id="draggable1" class="ui-widget-content" style="float: right; text-align: right;">
                                        <div style="font-weight: 600;">
                                            <asp:Label ID="Lblname" runat="server" Text="Company Name" Font-Size="12pt"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="Lbladdress" runat="server" Font-Size="10pt" Text="Company address"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="Lblphone" runat="server" Text="Phone Number" Font-Size="10pt"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="Label1" runat="server" Font-Size="10pt" Text="Email address"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <hr style="height: 0.5px; color: #ccc;" />
                            </div>
                            <asp:Label ID="securelbl" runat="server" Visible="false" ForeColor="#40576d" Text=""></asp:Label>
                            <div class="customer" style="width: 100%; line-height: 1.3; margin-bottom: 3%;">
                                <div id="draggable1" class="ui-widget-content" style="float: left; text-align: start; margin-bottom: 5%; font-size: 1.6rem;">
                                    <label style="font-size: 10pt; color: #000000; font-weight: 400;">Bill To:</label>
                                    <div style="font-weight: 600;">
                                        <asp:Label ID="nameLbl" runat="server" Font-Size="11pt" Text="Customer Name"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="addressLbl" runat="server" Font-Size="10pt" Text="Customer address"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="phoneLbl" runat="server" Text="Phone number" Font-Size="10pt"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="mailLbl" runat="server" Font-Size="10pt" Text="email address"></asp:Label>
                                    </div>
                                </div>
                                <div id="draggable1" class="ui-widget-content" style="float: right; text-align: right; margin-bottom: 5%;">
                                    <asp:Label ID="Label3" runat="server" Font-Size="11pt" Text="#"></asp:Label><asp:Label ID="lblprefix" runat="server" Font-Size="11pt" Text=""></asp:Label>
                                    <div>
                                        <asp:Label ID="issuelbl" runat="server" Font-Size="10pt" Text="Issued date"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="datLbl" runat="server" Font-Size="10pt" Text=""></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="Label15" runat="server" Font-Size="10pt" Text="Due date"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="dateLbl" runat="server" Font-Size="10pt" type="date" Text=""></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <asp:GridView ID="Gridview1" runat="server" Font-Size="10pt" HeaderStyle-Font-Size="10pt" CellPadding="5" GridLines="None" ShowFooter="True" AutoGenerateColumns="False" HeaderStyle-Font-Bold="false"
                                Style="width: 100%;" HeaderStyle-ForeColor="#000000" Height="50px" HeaderStyle-Height="10px">
                                <Columns>
                                    <asp:TemplateField HeaderText="Item Description" HeaderStyle-Font-Bold="false">
                                        <ItemTemplate>
                                            <asp:TextBox ID="textBox1" runat="server" Class="form-control" Width="100%" Font-Size="10pt" />
                                        </ItemTemplate>
                                        <FooterStyle HorizontalAlign="Left" VerticalAlign="Bottom" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Quantity" HeaderStyle-Font-Bold="false">
                                        <ItemTemplate>
                                            <asp:TextBox CssClass="form-control" ID="txtQuantity" Font-Size="10pt" runat="server" Width="100%" onkeypress="return onlyNumbersWithDot(event);" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Unit price" HeaderStyle-Font-Bold="false">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtRate" runat="server" Font-Size="10pt" Width="100%" CssClass="form-control" placeholder="0.00" onkeypress="return onlyNumbersWithDot(event);" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Amount" HeaderStyle-Font-Bold="false">
                                        <ItemTemplate>
                                            <asp:Label class="currency-symbol" runat="server" ID="symbolB" Style="font-weight: 400;"></asp:Label>
                                            <asp:TextBox ID="lblAmount" runat="server" Width="100%" Text="0.00" Font-Size="10pt" BorderStyle="None"></asp:TextBox>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <HeaderStyle Height="10px" />
                            </asp:GridView>
                            <hr style="height: 0.5px; color: #ccc;" />
                            <div runat="server" id="draggable1" class="ui-widget-content" style="width: 100%; margin: 0 auto; font-weight: 500; margin-bottom: 10%;">
                                <div class="total" style="float: right; width: 380px; margin-right: 0%; text-align: right; margin-bottom: 3%; font-size: 12px; padding: 10px; line-height: 24.50px; border-radius: 6px; position: relative;">
                                    <div runat="server" id="stotal" style="margin-bottom: 1%;">
                                        <asp:Label ID="Label2" runat="server" Text="Subtotal:"></asp:Label>
                                        <asp:Label ID="currency" runat="server" Font-Size="10pt" Text=""></asp:Label>
                                        &nbsp;<asp:Label ID="lblTotal" runat="server" Font-Size="10pt" Text="0.00"></asp:Label>
                                    </div>
                                    <div runat="server" id="addedtx" style="margin-bottom: 1%;">
                                        <asp:Label ID="Label5" runat="server" Text="VAT(%):"></asp:Label>&nbsp;&nbsp;
                                                <asp:Label ID="vatlbl" runat="server" Text="0"></asp:Label>
                                    </div>
                                    <div runat="server" id="holdingtx" style="margin-bottom: 1%;">
                                        <asp:Label ID="Labelwht" runat="server" Text="Witholding tax(%):"></asp:Label>&nbsp;&nbsp;
                                                <asp:Label ID="whttx" runat="server" Text="0"></asp:Label>
                                    </div>
                                    <div runat="server" id="duty" style="margin-bottom: 1%;">
                                        <asp:Label ID="Label20" runat="server" Text="Stamp Duty(%):"></asp:Label>&nbsp;&nbsp;
                                                <asp:Label ID="stmpd" runat="server" Text="0"></asp:Label>
                                    </div>
                                    <div>
                                        <asp:Label ID="Label6" runat="server" Text="Total:"></asp:Label>
                                        &nbsp;<asp:Label ID="lblGrandTotal" runat="server" Font-Size="11pt" Text="0.00"></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%; margin: 0 auto; margin-bottom: 5%; padding: 10px;">
                                <hr style="height: 0.5px; color: #ccc; margin-top: 25%;" />
                                <div id="draggable1" class="ui-widget-content" style="margin-bottom: 3%; float: left; text-align: start; margin-left: 0%; text-align: left;">
                                    <asp:Image ID="Image2" runat="server" Height="65px" />
                                    <br />
                                    <label id="compsign" runat="server" style="font-size: 9pt; font-weight: 600; text-align: left;">Company</label>
                                </div>
                                <div id="draggable1" class="ui-widget-content" style="float: right; margin-right: 0%; text-align: end; margin-bottom: 3%;">
                                    <asp:Image ID="Image1" runat="server" Width="100px" Height="100px" />
                                </div>
                            </div>
                            <div style="width: 100%; padding: 6px; margin-bottom: 2%; float: left; text-align: start;">
                                <label id="note" runat="server" style="font-size: 9pt; font-weight: 400; text-align: left;">Invoice Note</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var j = jQuery.noConflict();//This is where I added the no Conflict rule

        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }
            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('#GridParent').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('#GridParent').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('#GridParent').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });
    </script>
    <script type="text/javascript">
        function LabelColor() {
            document.getElementById("GridParent").style.color = document.getElementById("color").value;
        }
    </script>
    <script type="text/javascript">
        function readURL(event) {

            if (event.target.files[0]) {
                var filereader = new FileReader();
                filereader.readAsDataURL(event.target.files[0]);
                filereader.onload = function (evt) {
                    var base64 = canvas.toDataURL();
                    $("[id*=HiddenField1]").val(base64);
                }
            }

            var getImagePath = URL.createObjectURL(event.target.files[0]);
            $("[id*=HiddenField1]").val(getImagePath);
            $('#GridParent').css('background-image', 'url(' + getImagePath + ')');
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        var positions = JSON.parse(localStorage.positions || "{}");
        $(function () {
            var d = $("[id*=draggable]").attr("id", function (i) {
                return "draggable_" + i
            })
            $.each(positions, function (id, pos) {
                $("#" + id).css(pos)
            })
            d.draggable({
                containment: "#containment-wrapper",
                scroll: false,
                stop: function (event, ui) {
                    positions[this.id] = ui.position
                    localStorage.positions = JSON.stringify(positions)
                }
            });
            $("#clear").click(function () {
                window.localStorage.clear();
                window.location.reload();
            });
        });
    </script>
</body>
</html>

C#

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                SetInitialRow();
                foreach (GridViewRow row in Gridview1.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        TextBox lblAmnt = row.FindControl("lblAmount") as TextBox;
                        lblAmnt.Attributes.Add("readonly", "readonly");
                    }
                }
            }
        }
        private void SetInitialRow()
        {
            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Column1", typeof(string)));
            dt.Columns.Add(new DataColumn("Column2", typeof(string)));
            dt.Columns.Add(new DataColumn("Column3", typeof(string)));
            dt.Columns.Add(new DataColumn("Total", typeof(string)));
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Column1"] = string.Empty;
            dr["Column2"] = string.Empty;
            dr["Column3"] = string.Empty;
            dr["Total"] = string.Empty;
            dt.Rows.Add(dr);

            ViewState["CurrentTable"] = dt;

            Gridview1.DataSource = dt;
            Gridview1.DataBind();
        }
Developer technologies | .NET | Other
Developer technologies | ASP.NET | Other
0 comments
Accepted answer
  1. Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
    2024-02-23T10:18:16.5266667+00:00

    Hi @Donald Symmons,

    Delete var j = jQuery.noConflict();, and then put the JS code in the picture below into <title>. User's image

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.