Calling jquery alert using ScriptManager in Asp.net - javascript

I have a single line code that displays JS alert right now. I am trying to replace it with the jQuery alert so that I can theme it. Below is the code that I wrote for jQuery alert:
ScriptManager.RegisterStartupScript(this, GetType(), "onload",
"window.onload = function () {jAlert('This is a custom alert box', 'Alert Dialog');}", true);
This code used to be like this:
ScriptManager.RegisterStartupScript(this, GetType(), "showalert",
"alert('This is a custom alert box');", true);
The existing code works fine. But my code gives me an error saying,
value of property jalert is null
I am unsure, what I am missing here.

You're running an external plugin to JQuery.
Make sure that on your page you have valid references to the jquery library and jalert plugin.
The $.browser property is considered obsolete and should not be used anymore. This is because there are a lot of browsers that misidentify about whom they are. IE12, for instance, identifies itself as a Mozilla browser.
You can find more information about the $.browser property here.
If your version is JQuery 1.8 and under use this:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
If your version is JQuery 1.9 and over, you'll need to reference the jquery-migrate.js file so that you can use the $.browser property:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-migrate.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Related

jquery is thorwing error stating "idleTimeout is not a function"

I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.

javascript conflict with my datepicker and bootstrap

I have these codes in my webpage:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
It is working perfectly fine with my textbox. But since I have a dropdown function with my header:
I need these lines to make them work:
<%--<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>--%>
When I try to paste them, the header dropdown is working but the problem now is my datepicker. Any tricks on this please?
ANSWER: made it work by pasting the pageresolve url to the top .
UPDATE QUESTION: what may cause this problem?
You are including jQuery.js twice. The second version is loading after the datepicker plugin has extended the original jQuery object and wipes it out .
You likely are seeing error datepicker is not a function or similar. You made no mention of errors thrown which is always the first thing to look for
Only include jQuery.js once and before all dependent plugins and code.

jQuery noConflict issue 1.7.0 and 1.10.2

I have tried to figure this out for 2 days now reading every post on 10 or 12 sites including this one. Can someone tell me what i did wrong here? I am calling the first jQuery library and implimenting noconflict and still the first jquery plugin will not load.
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript'>
var $jq170 = jQuery.noconflict();
</script>
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.ccountdown.js"></script>
<script src="assets/js/init.js"></script>
<!--[if lte IE 7]><script src="assets/css/lte-ie7.js"></script><![endif]-->
<!-- Main Jquery & Hover Effects. Should load first -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/hover_pack.js"></script>
<!-- Bootstrap core CSS --> \
<link href="assets/css/bootstrap.css" rel="stylesheet">
You are trying to use $ after assigning the first version to $jq170.
In order to continue using $ you would need to do:
$jq170(function($){
/* can use "$" here and it will be the same as "$jq170" */
});
It is most likely that you could use the newer version only and replace the first version so you only include jQuery once in the page.
If plugins are failing in 1.7 when switching to 1.10 it is possible that the migrate plugin may help also. See jQuery downloads

Chrome and local JavaScript files

I have a code like this: http://codepad.org/0j9m2Xdw
These files:
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<script src="js/jtable/jquery.jtable.min.js" type="text/javascript"></script>
are in 100% in correct location. I run google-chrome with --allow-file-access and --allow-file-access-from-files parameters. Even that I still get a blank page when I try to access my index.html location, which is: file:///home/myusername/code/web/index.html
What's wrong?
JTable needs also jQueryUI, try this :
<script src="js/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<!-- JqueryUI -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js " type="text/javascript"></script>
<!-- Include one of jTable styles. -->
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
See this jsfiddle demo

jQuery importing jQuery

I have an HTML page with jQuery inside and JavaScript.
I'm importing the libraries I need in the head tag:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
Then I'm importing some html with jQuery inside:
$('#cliente').click(function(){$('#container').load('/clienti/cliente');});
But the jQuery inside the page loaded is not working. (I'm sure the code is right as is working standing alone).
I need to do something? I have tried to import the libraries in the imported page before the script (out of the head), but not working.
I haven't other ideas!
.load() only works for HTML the way you're using it. (see the section titled "Script Execution"). It won't evaluate any script inside the HTML you load. What you want is to load it using a suffix, i.e.
$('#cliente').click(function(){$('#container').load('/clienti/cliente.html');});
If your JS and HTML must be in the same file, a better way to do this is this way. I believe it will evaluate JS that way.
$('#cliente').click(function(){
$.get('/clienti/cliente', function(data){
$('#container').html(data);
});
});
Alternatively, you can pass both items (the HTML and the JS) back as text
$('#cliente').click(function(){
$.getJSON('/clienti/cliente', function(object){
$('#container').html(object.html);
$parseJSON(object.jscript);
});
});
Otherwise, you will need to use $.get() and $.getJSON() to fetch the html and js in two shots.

Categories