Hi i have a MasterPage (ASP.Net MVC) which contains a couple of loads for Jquery ui and under that a contentplaceholder for view specific scripts:
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/ui.tabs.js" type="text/javascript"></script>
<script src="../../Scripts/ui.accordion.js" type="text/javascript"></script>
<script src="../../Scripts/LeftNav.js" type="text/javascript"></script>
<asp:contentplaceholder id="Scripts" runat="server"></asp:contentplaceholder>
Now I made a view which contains this script
<asp:Content ID="Content2" ContentPlaceHolderID="Scripts" runat="server">
<script>
var $tabs = $('#tabs').tabs();$tabs.tabs('option', 'selected', <%= ViewData["tab"]%>) ;
location.href='#<%= ViewData["anchor"]%>';
</script>
</asp:Content>
tha value in tab is the tabindex which should be selected. the anchor is a anchor on the tabpage which should be selected.
My suggestion was that first all Master scripts load than the tabindex I saved in the ViewData will selected and than I jump to the anchor i wanted to.
But how could it else be... nothing happens.
The side loads and the tabs too. But not the tab in the ViewData propertie tab is selected. and than the anchor cant work annyway.
I tried following. I put a alert in the script above and if I do that the alert is thrown before the tabs are load. Why does he exectue this script before loading the ui.script`???????????
I'm not sure if I got that all right and I don't know nothing about asp, but maybe you should checkout jquery's ready event, which is triggered when the page is loaded. That might get you out of timing problems.
put your script at the bottom of the page ... that is before the </asp:Content>
that way ur script will load after all the content has loaded ... if not write down the exact error ur getting ... as suggested above u can also use the $(document).ready
Related
Hello Jquery/js experts
I'm currently working inside a jsp page( app type= portlet) I have a jsp file in which I put a jquery code to add some css classes and append an element inside it, this jsp is an init.jsp page then with <%# include file="init.jsp" %> I import it in the A.jsp page
the problem is: This jsp not able to run code with $('') sign despite I added the cdn link to jquery like that: <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> .
This is the code( plz focus on my code comments //):
<script type="text/javascript">
$(document).ready(function(){
console.log('Im here invoking the class added event'); //this line log is well displayed in the console
$('div#premiereConnexion .lfr-icon-item.taglib-icon').addClass('btn fistLogin btn-block'); // this line
//log is NOT displayed in the console
console.log('****************************');//this line log is well displayed in the console
$('div#premiereConnexion .lfr-icon-item.taglib-icon').append('<i class="fa fa-address-card"></i>');// this line log is NOT displayed in the console
});
</script>
Any one has explanation please, Thanks
I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.
I'm struggling to work out how I should be authoring my partial views which use jQuery.
For example, in the partial view below, I am displaying a text box which is hooked up to the jquery autocomplete plugin.
Eventually I want the results to be shown with an "X" next to them which the user can then remove, but for the purpose of this example the selected text is simply appended to the sibling div.
Is my jQuery code OK sitting here in the partial view, or should I be putting it in an external file? If an external file is used, then another developer using the partial view will need to be aware that the external js file should be included - is that OK?
I suppose my question really is that, although I'm kind of OK with jQuery (finding elements in the DOM, calling actions asynchronously etc..), I need some sort of guidance on where to put all this code that will stop me getting in a mess.
Does any of what I have just typed make sense????
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".acEmployee").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
select: function(event, ui) {
$(this).siblings().append(ui.item.value);
}
});
});
</script>
<div><div></div><input class="acEmployee" /></div>
If the JavaScript is "hookup" code then I don't mind it being in with the partial - as after all, everything it relates to is there.
If the JavaScript is "framework" code and can be reused all over the place, and isn't dependant on anything in the partial then I put it in its own file.
That's just what I do, but I'd be interested in hearing other peoples methods too.
If possible, keep all your js code in an external js files. That way you can put your jquery includes at the bottom of the page.
for .net mvc try something like:
<!--try fetching jquery from CDN, if CDN is down, fallback to local-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='<%:Url.Content("~/Scripts/jquery-1.5.1.min.js")%>' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" language="javascript">
var MVC_baseurl = "<%:Url.Content("~/") %>";
</script>
<script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/jquery-ui-1.8.10.custom.min.js")%>"></script>
<script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/plugins.js")%>"></script>
<asp:ContentPlaceHolder ID="BottomJavascript" runat="server">
</asp:ContentPlaceHolder>
You can then put your page-specific stuff in the content placeholders. , your master page specific plugins in plugins.js, and you can use
var path = MVC_baseurl + "Controller/Action"
and use that in your ajax calls etc...
I am using an open source wysiwyg editor on one of my asp.net web pages to create news pages... On one page It is put into place like this:
Registered at top of asp.net web page...
<%# Register Src="~/WebUserControls/HTMLEditorControl.ascx" TagName="HTMLEditorControl" TagPrefix="uc2" %>
Incorporated into the page:
<div>
<uc2:HTMLEditorControl ID="HelpTextBox" runat="server" />
</div>
In the code behind there is a Save method that basically saves the above editor data using the id:
dataset.column = htmlTextArea.GetHTML ;
When I try to bring up the page with the editor, I get the error: 'WYSIWYG' is undefined at Line 900, which is:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_HelpTextBox_htmlTextArea');
</script>
What's confusing, I have another page set up identically, that produces the same WYSIWYG.attach source, but it handles it with no problem at all. The only difference is the names of the pages. The page that works produces the following, with no problem:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_htmlTextArea_htmlTextArea');
</script>
So I'm at a loss...
Does the name of your code-behind class match the class name of your aspx page? Does the aspx page point to the correct code behind file?
My guess is that you copied and pasted but forgot to change that.
In my ASP.Net 2008 app I've got a page that uses a Master Page and I want to use jquery/javascript but I can't even get this simple code to work.
the page loads and controls display but no alert.
Ideas?
<asp:Content ContentPlaceHolderID="cphMain" runat="server" ID="mainBodyContent">
<script type="text/javascript" src="../../js/jquery-1.4.1.js">
$(document).ready(function() {
alert("Hey");
});
</script>
....
other controls
...
You can either have the src attribute set of the script element or have it contain script in its body. Not both in the same time.