I'm trying to add a script to my view head part. Problem is when I load view I'm getting a console error "Uncaught ReferenceError: myfunction is not defined". As I understand my script wasn't loaded. I just started working with .NET.ASP MVC.
Here is part of my view.cshtml
#model dynamic
#{
var rUser = ViewBag.User as MyAplication.Model.User;
}
#section head {
#if (!rUser.IsPremiumMember)
{
<script type="text/javascript">
myfunction
</script>
<script type="text/javascript" async="async" data-cfasync="false" src="https://script.js"></script>
<script type="text/javascript" async="async" data-cfasync="false" src="https://otherscript.js"></script>
}
}
Related
I have handlebars and I want them to be rendered conditionally.
F.e pseudo code:
if(condition)
{
<script id="template-1" type="text/x-handlebars-template">
...................
</script>
<script id="template-2" type="text/x-handlebars-template">
...............
</script>
}
else
{
if(condition2)
{
<script id="template-1" type="text/x-handlebars-template">
................
</script>
}
else
{
<script id="template-2" type="text/x-handlebars-template">
..........
</script>
}
}
so I do not want to repeat template1 and template2 handlebars in cshtml. How can I achieve this?
my popover doesn't work and I don't know why. It doesn't work when I get the working codes and when I write them. Please help.
Here is the code part that I want to show popover
<p
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
data-bs-trigger="hover"
class="d-inline-block"
>
Service Ports
</p>
Here is my imports.
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
And this is the javascript part.
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
I am not sure whether you have added the full code here or not but as far as what I am seeing, I can say that you are missing the popoverTriggerList declaration var popoverTriggerList = [].slice.call() which might be causing the issue for you or you are not calling the js code from different file the right way. I have tried your code with the declaration and it works. Check the below code for your output:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<p data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" data-bs-trigger="hover" class="d-inline-block">
Service Ports
</p>
I am trying to place a marker with the users current location.
However I am failing to even get the User Location in the callback.
It seems that the console.log call is triggered before the geocoding of the browser
What am I doing wrong?
haml view
= gmaps(:map_options => {:center_on_user => true})
- content_for :scripts do
:javascript
Gmaps.map.callback = function () {
console.log(Gmaps.map.userLocation)
}
html output
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_on_user = true;
Gmaps.map.initialize();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
<script>
//<![CDATA[
Gmaps.map.callback = function () {
console.log(Gmaps.map.userLocation)
}
//]]>
</script>
At the moment of this callback, the user location is not already retrieved, it just means the map is done displaying.
Think about this: the user has to decide whether or not he accepts browser geolocation so it could take very long.
I didn't need some callback for geolocation Success, I only created one for geolocation Failure.
You should simply patch the js/coffee in your assets and call whatever function you need at this line.
I try to use the jQuery Globalization plugin in order to fix the comma problem with jquery unobstructive client validation. However I tried many many solutions and there no good solution to fix this. I am on a non-English localization computer and this is important that my customers enter a decimal value like "123,66" and not "123.66". ASP.NET validation tell me that the price must be a number! meh ? are you serious ? lol
I am getting this javascript error when I try to do the fix.
$.global is undefined
Here my code.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
glob.fix.js
$.validator.methods.range = function (value, element, param) {
var globalizedValue = value.replace(",", ".");
return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}
I can't understand.. it should work since I added ~/Scripts/globalize.js.
Any idea? or you might have a better solution for having client validation work and lets me enter comma as decimal values?
I found the way to finally get rid of the decimal problem with comma seperator!
Here a picture of the result! No more validation problems.
The steps to the fix.
1- Get the Globalization library for jQuery
You must get the latest script! Also I found some answers out there that was outdated. The object to call the library is no more $.global or anything like that but Globalize.
2- Include the scripts in your project. You must add them after jquery.validation stuff.
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
3- Replace some methods of the validator. This will override the methods for 'number' and 'range' validation which was causing problems.
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
Globalize.parseFloat => This will actually replace anything that contains ',' to '.' if you selected a culture that require it.
After this.. You must add. This will make the globalize functions to work with the culture.
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
The complete code look like...
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script type="text/javascript">
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Well, to solve the same problem, I did:
$.validator.addMethod("price",function(value){
return /^(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
});
and then used the added method as rule:
$("#form").validate({
rules: {
price: "price"
}
});
I "borrowed" the validator regex from the validation plugin itself, and inverted the dots . and the commas , (thousand separator X decimal separator).
For whatever reason I had to change my globalize reference from:
<script src="#Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script>
to
<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script>
And that solved my problem. Went crazy for 30min until I got it to work. If anybody can explain why I will appreaciate.
I am developing some ajax stuff on asp.net mvc framework beta.
but,I got exception as following.
Anyone has problem like me?
Sys.ArgumentUndefinedException: Value cannot be undefined.
and my source code is like this.
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
$(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
</asp:Content>
From the snippet you provided there are a couple of things to consider:
You are missing a script reference to the Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008.
You are using the jquery's document.ready function (raised whenever the DOM is ready to be traversed and manipulated) instead of the System.Application.init event (raised after all scripts have been loaded but before objects are created).
Can you try this to see if it works for you:
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
Sys.Application.add_init(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
Scott Hanselman has written a nice post on this subject.