Javascript won't run in masterpage

Javascript won't run in masterpage - javascript

In my masterpage i have placed the ContentPlaceHolder ID="head" inside the head tags and the ContentPlaceHolder ID="MainContent" inside the body tag. When I'm using the code without masterpage, it works fine. Can anyone see what I'm doing wrong?
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no" />
<link href="styles/basic.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery.responsivetable.min.js"></script>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setupResponsiveTables();
});
function setupResponsiveTables() {
$('.responsiveTable1').responsiveTable();
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:GridView ID="GridView1" runat="server" RowStyle-Wrap="false" CssClass="responsiveTable1"
AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" DataKeyNames="id" >
<Columns>
<asp:BoundField DataField="Stilling" HeaderText="Stilling" />
<asp:BoundField DataField="Fornavn" HeaderText="Fornavn" />
<asp:BoundField DataField="Etternavn" HeaderText="Etternavn" />
<asp:BoundField DataField="Telefon" HeaderText="Telefon" />
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<RowStyle Wrap="False"></RowStyle>
</asp:GridView>
</asp:Content>

Related

How can I use a const of javascript instead of repeated codes?

I use Code A and get a result as I expected.
But Ifind there are many repeated code in Code A, such as the string "textAreaInput" are found in many places.
So I use a const InputID to store the string "textAreaInput" and use the const in many place in Code B, but Code B can't get the correct result, why ?
Code A
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
</script>
<script src="Js/jquery-3.6.3.min.js"></script>
<script src="Js/my.js"></script>
<link href="Css/Main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<textarea id="textAreaInput">
Hello
</textarea>
<input type=button value="Clear" onclick="clearInput('textAreaInput')">
</asp:Content>
my.js File
function clearInput(inputID) {
$('#' + inputID).val('')
}
Main.css File
#textAreaInput {
font-size: 14px;
line-height: 1.6;
}
Code B
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
const InputID = "textAreaInput"
</script>
<script src="Js/jquery-3.6.3.min.js"></script>
<script src="Js/my.js"></script>
<link href="Css/Main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<textarea id= InputID> //I rewrite
Hello
</textarea>
<input type=button value="Clear" onclick="clearInput(InputID)"> //I rewrite
</asp:Content>
...The same

ASP.NET JQuery - jQuery.Deferred exception: $ is not a function

I am not that experienced with JQuery, so maybe this is a stupid mistake. However, this has been bugging me for a while and nothing seems to work.
No third party JQuery scripts seem to work in my website (ASP.NET Webforms).
Specifically, I am trying to make Owl Carousel work.
So this is how I load scripts and css in Head (In MasterPage):
<link href="../Content/style.css" rel="stylesheet" />
<link href="../Content/social.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveClientUrl("~/Content/js/owl.carousel.min.js") %>"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveClientUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveClientUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link href="../img/icons/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />
I made sure to load Jquery first and then any other plugins. This is my HTML (in Content page):
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
console.log("in");
$(".owl-carousel").owlCarousel();
});
</script>
Whatever I do, I get this error:
I googled a lot for it, still with no luck. I tried many plugins and always end with the same error.

I think you are pointing the wrong path to owlCarousel
You should reconsider:
ResolveUrl creates the relative URL to the root.
ResolveClientUrl creates the relative URL to the current page.
I think you should use ResolveUrl instead of ResolveClientUrl to get the correct path.
The code will look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveUrl("~/Content/js/owl.carousel.min.js") %>"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />

In case people with the same problem come across this:
So the problem, as stated by freedomn-m, was that JQuery was loaded twice.
ASP.NET sample website had a scriptmanager that referenced JQuery (Loaded from NuGet by default) without me knowing.
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<%--<asp:ScriptReference Name="jquery" />--%>
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
I just commented the JQuery reference, and everything worked as expected.

How to add bootstrap control to asp controls in master page so that it reflect to all of my asp:textbox?

I want to set CssClass="form-control" to every textbox in my master page
So what should I do?

You can do the following:
In master page code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//added next line
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
public partial class Site1 : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
//https://stackoverflow.com/questions/23710337/add-class-into-html-tag-by-jquery-in-asp-net-c-sharp
//https://www.experts-exchange.com/questions/25280443/How-to-iterate-through-all-controls-with-masterpage.html
var x = new object();
foreach (Control c in Controls)
{
foreach (Control masterControl in Page.Controls)
{
if (masterControl is MasterPage)
{
foreach (Control formControl in masterControl.Controls)
{
if (formControl is HtmlForm)
{
foreach (Control cont in formControl.Controls)
{
if (cont is TextBox)
{
((TextBox)cont).Attributes["class"] = "form-control";
}
}
}
}
}
}
}
}
}
}
In aspx of master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" />
<asp:TextBox runat="server" ID="textbox2" />
<asp:TextBox runat="server" ID="textbox3" />
<asp:TextBox runat="server" ID="textbox4" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Try this, just add CssClass on your control, that's it:
<asp:TextBox CssClass="form-control" runat="server"></asp:TextBox>
Make sure your bootstrap has reference on your Master Page style, under the Head section:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<%--Added Bootstrap Style Here--%>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</style>

why is firefox throwing the error google.maps.geocoder is not a constructor?

I have recently began testing my JavaScript in Firefox, originally I was working in chrome.
This section of code works fine in chrome:
geocoder = new google.maps.Geocoder();
however the above error is thrown in Firefox, why is that? are there any extra considerations required for Firefox?
Below is my JS and aspx code
var map;
var placesService;
var geocoder;
function loadMap() {
$("#map-canvas").ready(function () {
alert("ready");
geocoder = new google.maps.Geocoder();
alert("1");
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12
});
alert("2");
placesService = new google.maps.places.PlacesService(map);
alert("3");
$('#control').hide();
$('#errorLog').hide(); // the error log text box would cause the map to only display half the tiles, delaying the showing of these elements stopped that.
alert("4");
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
alert("5");
map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("control"));
map.controls[google.maps.ControlPosition.RIGHT].push(document.getElementById("errorLog"));
$('#control').show();
$('#errorLog').show();
alert("6");
});
alert("7");
$('#locateTown').click(function () { locateTown(); });
$('#scanTown').click(function () { scanTownStart(); });
$('#newSearch').click(function () { backToSearch() });
$('.scanTown').hide();
$('.info').hide();
alert("8");
})
}
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Title</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
<asp:ScriptReference Path="~/bundles/Page" />
<asp:ScriptReference Path="~/bundles/Utils" />
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ" />
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?libraries=places" />
</Scripts>
</asp:ScriptManager>
<div class="fill flex-container flex-column">
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="uploadResults" EventName="Click" />
</Triggers>
<ContentTemplate>
<div id="control" style="margin-top:0.3%">
<input type="text" id="towntoSearch" class="locateTown" value="Hatfield" />
<input type="button" id="locateTown" class="locateTown" value="Locate Town" />
<select id="selectedTown" class="scanTown" ></select>
<input type="button" id="scanTown" class="scanTown" value="Scan Town" />
<input type="button" id="newSearch" class="scanTown" value="Search Again" />
<input type="text" readonly id="infoDisplay" class="info" />
<asp:Button runat="server" ID="uploadResults" OnClick="uploadResults_Click" ClientIDMode="Static" Text="Upload" CssClass="hidden" />
</div>
<div id="errorLog" style="margin-top:0.3%; margin-right:0.3%">
<textarea cols="20" rows="25" id="errorText"></textarea>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="flex-1" id="map-canvas">MAP</div>
</div>
</form>
</body>
</html>

You get this error because you are loading the Google Maps API twice which causes a conflict. You should see that in your console.
So just add the API once with the library you want:
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ&libraries=places" />

Loading jQuery before trying to use jQuery functions in .Net masterpages

I want to trigger an alert by clicking on one div inside the toolbar, but I couldn't run jQuery function.
jQuery installed correctly and intellisense works, but the jQuery code does not work.
This is my MasterPage aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="../Styles/Style.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
<script type="text/javascript">
jQuery(document).ready(function () { alert('My alert'); });/// or
$('#DivMessage').click(function () { alert('My alert'); });
</script>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
</Scripts>
</asp:ScriptManager>
<div id="Safhe">
<div id="header"></div>
<div id="ToolBar">
<div id="Messages" class="GorooheIcon">
<div id="DivMessage" class="Icon" title="پیام های عمومی"></div>
</div>
<div id="Content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>

You are trying to run a jQuery function on header
<script type="text/javascript">
jQuery(document).ready(function () { alert('My alert'); });/// or
$('#DivMessage').click(function () { alert('My alert'); });
</script>
but you only import jquery script at body
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
</Scripts>
solution:
Move your script declaration above to header or move your function to the end of the page.
...
</form>
<script type="text/javascript">
jQuery(document).ready(function () { alert('My alert'); });/// or
$('#DivMessage').click(function () { alert('My alert'); });
</script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Javascript won't run in masterpage - javascript

Related

How can I use a const of javascript instead of repeated codes?

ASP.NET JQuery - jQuery.Deferred exception: $ is not a function

How to add bootstrap control to asp controls in master page so that it reflect to all of my asp:textbox?

why is firefox throwing the error google.maps.geocoder is not a constructor?

Loading jQuery before trying to use jQuery functions in .Net masterpages

Categories

Resources