I'm using DNN 5.4 with the default google api jquery reference:
I have confirmed that jquery.min.js is loading. I don't know if there's other jQuery (other than the plugin) that needs to be loaded.
I'm utilizing the Google Code jQuery Textbox Watermark Plugin (Link)
Web Dev Toolbar & Firebug suggest that both jQuery and the Watermark Plugin are loading. This code is sitting near the top of my skin .ascs:
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js"></script>
The following code works (when the inputs are wrapped in form tags) in basic html document. However, when placed inside either a DNN skin or DNN module, it fails to work and generates a javascript here.
<script language="javascript" type="text/javascript">
(function ($) {
$(document).ready(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
})
})(jQuery);
</script>
SearchString: <input type="text" id="xsearch" name="xsearch" />
<input type="button" value="search" id="xsubmit" name="xsubmit" />
The Error (FireBug):
jQuery("#xsearch").watermark is not a function
[Break on this error] jQuery("#xsearch").watermark("Leave blank for USA");
This alternate code produces the same error:
<script language="javascript" type="text/javascript">
jQuery.noConflict();
jQuery(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
jQuery("#xsubmit").click(
function () {
jQuery("#xsearch")[0].focus();
}
);
});
</script>
And finally, the same error is produced when I replace jQuery with $
It feels like a conflict of some sort, but I'm lost on what to do next.
Thanks in advance for your time
I noticed this is because :
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js">
should be
<script type="text/javascript" src="js/watermark/jquery.watermark.min.js">
If you are having js folder in your skin root.
You can see FireBug's net tab to make sure your script reference is loading properly. I'm judging this because I've done lots of dnn development and the link you referenced will become
http://www.mydomain.com/tabId/80/js/watermark/jquery.watermark.min.js when http://www.mydomain.com/tabId/80/Default.aspx is served
Related
I created a ViewComponent which display a Table that require some plugin for enable specific functionalities. Inside the ViewComponent I tried to create a specific section:
#section DataTableScripts{
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
unfortunately I discovered that a ViewComponent cannot load a #section.
So I tried to include the script directly in the ViewComponent, but the problem is that the scripts are loaded before of JQuery which is loaded inside the _Layout, specifically:
ViewComponent
<script src="~/js/JQuery/jquery.dataTables.js"></script>
<script src="~/js/JQuery/dataTables.buttons.min.js"></script>
<script src="~/js/JQuery/dataTables.keyTable.min.js"></script>
<script src="~/js/JQuery/dataTables.responsive.min.js"></script>
<script src="~/js/JQuery/dataTables.select.min.js"></script>
<script src="~/js/JQuery/dataTables.bootstrap4.js"></script>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
Layout
<script src="~/js/jquery.min.js"></script>
so in this case I'll get:
jQuery is not defined
How can I manage this situation?
Simply set the Layout for your ViewComponent .
#{
Layout = "/Views/Shared/_Layout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
Here's the screenshot that works :
[Edit]
This approach does not seems a good way to do that . As #Kirk Larkin says , this will make the Layout render twice . Another patch is to write a new RefinedLayout.cshtml and set the Layout of ViewComponent as the RefinedLayout :
#{
Layout = "_RefinedLayout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
For more information , refer workaround by MortenMeisler
You are using<script src="~/js/JQuery/jquery.dataTables.js"></script> twice. Just keep it once.
Specifying another layout for viewcomponents with scripts will duplicate scripts. And #section is just ignored during rendering.
So I replaced jquery document ready with plain javascript domcontentloaded and any jquery can be written inside domcontentloaded. Not a permanent good approach but works for me.
<script>
document.addEventListener('DOMContentLoaded', function (event) {
console.log($ === jQuery)
});
</script>
Hello how do i implement the sidebar from semantic ui? I would like to use the first example on the list.
http://semantic-ui.com/modules/sidebar.html#/definition
I tried copy-pasting the whole div section and putting it on my html
For the javascript(? not really sure), the
$('.left.demo.sidebar')
.sidebar('toggle')
;
i tried putting it on
button onclick , and
function then using href to call
but sidebar is not showing.. what am i doing wrong
You have to include the jQuery library in the <head></head> section of your page:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
And the semantic.js file:
<script language="javascript" src="[your path here]/semantic.js"></script>
Which you have to download from:
http://semantic-ui.com/
(It's located inside the folder dist. Copy that file in the desire location and populate src with the right path)
BETWEEN <HEAD></HEAD>:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.left.demo.sidebar').sidebar('toggle');
});
</script>
When you add jQuery to your project you can trigger your sidebar by adding this code to your .js file:
$('.element.to.trigger.sidebar').on('click', function () {
$('.left.demo.sidebar')
.sidebar('toggle');
});
We use JQuery UI to display image buttons (asp:Linkbutton, asp:HyperLink, ..) in our lists and we notice very slow performance when the page loads.
The page seems loaded except the images. At this point - under chrome - the loading circle is still spinning and that's where the user has to wait 10 seconds! for the images to load :
After 10 secs the images are finally displayed :
It's seems to be related to the jquery-ui image (ui-icons_ffffff_256x240.png) :
The jquery-ui and the css are referenced in the head section of the Master page:
<link type="text/css" href="/Ressources/css/jquery-ui-1.8.7.mf.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.13.custom.min.js"></script>
This is how the image is set:
in ASPX:
<asp:LinkButton ID="lkBtnEditFDM" runat="server" Text="Modif" CssClass="editFButton" OnClick="lkBtnAddFDM_Click" ></asp:LinkButton>
in JS:
$(document).ready(function () {
..
$(".editFButton").button({
text: false,
icons: {
primary: 'ui-icon-pencil'
}
});
});
Do you have any idea as to why this huge lag happens? thanks!
I am developing with CakePHP and want to modify height of CKEditor generated with cake html helper, because I need to have two editors inside one page, with different height.
How I can do this with css?
if I remember that you can do when you define ckeditor js in your view e.g.
ed = CKEDITOR.replace("textarea",
{
height:"291", width:"400"
});
check this documentation:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.width
http://cksource.com/forums/viewtopic.php?t=13810
Regards.
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'350px'});
</script>
or
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'100%'});
</script>
I am trying some AJAX calls for the first time. My site is hosted on my own IIS7, (http://myUserName:8078/HomePage.aspx).
Here is the jScript.
<script type="text/javascript" src="jQuery1.4.2.js"/>
<script type="text/javascript">
$(document).ready(LoadText);
function LoadText() {
$("#Content1").load("data.txt");
}
"content1" is a content place holder.
My IIS is set to .net 4 too.
My problem is that the data.txt contents is never loaded. It is in the same directory as the page. I haven't got much experience in IIS so I am wondering if I am missing a setting or something.
Thanks
You can't use a single-tag XHTML-style script tag for JavaScript. Change your first line to:
<script type="text/javascript" src="jQuery1.4.2.js"></script>
For some reason, the script tag can't be shortened down to just a single tag, you have to have separate opening and closing tags.
I recommend you pass the ClientID and file path into the function as arguments, but the code below should work:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/jQuery1.4.2.js")%>'></script>
<script type="text/javascript">
$(document).ready(function() {
LoadText();
});
function LoadText() {
$("#<%= Content1.ClientID %>").load('<%= Page.ResolveUrl("~/data.txt")%>');
}
</script>
Is data.txt in the root folder of your site? If so, the .load() method takes a URL so try "/data.txt"
LoadText() is a function. Try:
$(document).ready(
LoadText();
);
Also I would suggest using lower camel case for function names. Upper camel case functions as in LoadText() suggests by convention that it is a contructor.
$(document).ready(
loadText();
);
You can also log something in the loadText() function to verify that it actually gets executed.
function loadText() {
$("#Content1").load("data.txt");
console.log('tried to load data.txt');
}