I've tried with several half fails to get the DNN 6 version of jQuery tabs (called DNNTabs) to work inside a custom modules "Edit" page (which opens in a modal, similar to module "Settings"). I want the same default theme/css applied to the tabs and buttons (it should behave almost exactly like Settings).
Here is what appears to be the start of some documentation, but its not very complete.
http://www.dotnetnuke.com/Resources/Wiki/Page/dnnTabs-jQuery-Plugin.aspx
I've scoured the interwebs for an example to follow, but most all examples utilize the original jQuery Tabs and/or a modification of it to "work" with DNN.
http://jqueryui.com/demos/tabs/
The start of my code which does not work.
<script type="text/javascript">
$('#tabs').dnnTabs();
</script>
<div id="tabs" class="dnnForm dnnModuleSettings dnnClear">
<ul class="dnnAdminTabNav dnnClear">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
Some content...
</div>
<div id="tab2">
Some content...
</div>
</div>
Somewhere else I read I have to request the DNN plugins registration in my OnInit like so:
protected void OnInit(object sender, System.EventArgs e)
{
DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration();
}
Am I missing another reference, line of code, something? 1) all the tabs display on load and 2) clicking a tab just scrolls to id location in modal (which cannot scroll back to the top after)
I think that looks complete; the only issue that I see is that you're initializing the plugin before you've defined the tabs. That is, the first thing you do is retrieve the element with ID tabs and setup the plugin for it, but that element doesn't exist yet. Move your script to the bottom of your control and I think it'll start working.
One other thing that you might need to adjust is your OnInit handler. Typically, OnInit is an override of Control.OnInit, so it'll end up looking like this:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
jQuery.RequestDnnPluginsRegistration();
}
You may also want to look at my example of this (and other) plugins at https://github.com/bdukes/DNN-World-Demos. These examples are pretty stripped down, so you'll see that there are a few CSS styles that you don't really need in there, if you aren't using them.
Related
I'm making an app in Blazor Server (.NET 5), and I'd like to hide the side and top bars for a specific page. I tried searching but I couldn't find any solutions that worked. Below is a screenshot showing what I want to hide (in red rectangles).
Obviously, I want the content/body section itself to take up the whole page instead.
To future viewers of this question, here's what I did, I made a new file called 'NoMenuLayout.razor' in the 'Shared' folder, and put this code inside it:
#inherits LayoutComponentBase
<div class="page">
<div class="content px-4">
#Body
</div>
</div>
Then I went to the file in which I wanted to hide the top and side bar and simply put #layout NoMenuLayout right below the #page directive like this:
#page "/Landing"
#layout NoMenuLayout
<h3>Landing page test</h3>
#code {
}
The top and side bar are defined in the shared/MainLayout.razor file. You can edit that file in order to edit the layout.
If you want to hide the top and side bars on only specific pages and not all the pages in your application, you can create a new layout component that does not have the top and side bar elements and then add the new layout to the selective pages using the #layout directive.
Create and apply new layout to component - ASP.NET Core Blazor Layouts
I have a simple button in my application.
Page.aspx
<asp:Content ContentPlaceHolderID="main" runat="server">
<form runat="server">
<button id="btnStart" class="btn btn-primary" runat="server">Start</button>
</form>
</asp:Content>
Page.aspx.cs
public void btnStart_ServerClick(object sender, EventArgs e)
{
//Do some work
Response.Redirect("NextPage.aspx");
}
This Page.aspx gets called from a php site and it displays Page.aspx in an iFrame. I don't have the code for that but I can ask if necessary.
Problem is ...
The Start button does not work in IE (IE 11) but it WORKS in Chrome and FireFox.
Also, sometimes when the iFrame gets called for the first time, it works just once. But after closing the iFrame and open the iFrame again, the Start button does not work any more.
Another thing is that when I right click the iFrame page (Page.aspx) and click Inspect element, then the Start button always works.
What I've tried
I did find some similar questions like this (Elements appear only after inspect element). And I tried removing all divs that surrounds the button and also tried removing classes for the button but did not work for me.
I've also tried adding this to Global.aspx.cs
HttpContext.Current.Response.AddHeader("p3p", "CP=\"CAO PSA OUR\"");
as someone suggested that sessions get blocked from traversing the iFrame, but again it did not work for me.
For some reason, if it's after inspecting element, it works fine consistently. What am I doing wrong here?
I'm writing a C# form application which automates some user behaviour by clicking through buttons, links, forms, etc in a WebBrowser. Everything worked fine, im using InvokeMember("click") without problem on several buttons and links, but now i'm stuck with one click.
I'm struggling for days, and i have tried several tips, but nothing worked yet. The HTML code with the form basically looks like the following:
<form name="shipsChosen" id="shipsChosen" method="post" action="http://www.example.com/index.php?page=2">
<li class="off" id="button1">
<div class="buildingimg"></div>
<input id="ship_1"/>
</li>
<li class="off" id="button2">
<div class="buildingimg"></div>
<input id="ship_2"/>
</li>
<li class="off" id="button3">
<div class="buildingimg"></div>
<input id="ship_3"/>
</li>
</form>
<a id="continue" class="off" href="" onClick="trySubmit(); return false;"><span>Submit</span></a>
What i want, is to click on the link with "sendall" ID, and then click on the link with "continue" ID.
I have already tried the followings, but none of them worked. Nothing happens:
HtmlElement AllShips = webBrowser1.Document.GetElementById("sendall");
AllShips.RaiseEvent("onclick");
AllShips.InvokeMember("click");
I have also tried to put some value into the input fields, but it's not works neither:
HtmlElement Input= webBrowser1.Document.GetElementById("ship_202");
Input.Focus();
Input.InnerText = "ship_1";
It's very interesting to me, since althought it's not working when i run this without any user interaction in my C# form application with WebBrowser, BUT if i click once by myself in the WebBrowser, and run the click codes above, it works. But it's not automation right..?
Anyone experienced similar problems like this? The only difference i found between the working clicks and in this, is the in the HTML.
More:
I'm using Internet Explorer 11 FEATURE_BROWSER_EMULATION for the WebBrowser.
The page is fully loaded.
Try letting your application pause before invoking the clicks and between them, because the page may still be busy with some earlier processes.
you can use a timer control for that effect.
I have tried searching for a solution for this, but nothing seems to be working for me. My problem is pretty straightforward though (so, I think).
I am using foundation with asp webforms and have a reveal modal window that fires when the page is loaded.
Code:
$(document).ready(function () { $('#myModal').foundation('reveal', 'open') });
The above works fine, however, any time I put an ASP button inside the modal (the one I am using, btnReset, redirects to a new page), clicking on it will not fire the event attached to it.
Code:
<div id="reset">
<div class="large-2 columns">
<asp:Button ID="btnReset" runat="server" Text="Reset"
OnClick="btnReset_Click" OnClientClick="btnReset_Click"
CssClass="button small radius alert" />
</div>
</div>
Code for btnReset:
protected void btnReset_Click(object sender, EventArgs e)
{
HttpCookie cookie = Request.Cookies["userInfo"];
cookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(cookie);
Response.Redirect("LogIn.aspx");
//Server.Transfer("LogIn.aspx");
}
I'm sure I am missing some here, but I'm just stumped on what I am doing wrong. How can I get an ASP button and have it fire it's event when it is inside a modal?
I know this was asked a month ago, but I ran into the same problem and found this question with no solution. I have found the solution over at the Foundation forums and thought I would answer it here for future reference.
This issue is with how foundation adds your modal. When you look in your dev tools you will see that the modal, when called, is outside the form making the asp buttons unable to access the code behind.
This means we need to append the the modal to the form so that the buttons will access the code behind.
I tried several different ways to achieve this in the javascript using appendTo, but found the easiest method was the make foundation use the root element form.
$(document).foundation('reveal', { rootElement: 'form' });
I found that here: Elena Zhdanova solution
For anyone new stumbling across this issue you can now add this to your reveal modal and your webforms buttons will work as intended inside the modal.
data-append-to="form"
The documentation is here. And the credit goes to this old forum post by Lars Jensen at the bottom of the thread here
I´m a very new to jquery.
I´m using this jquery code fragment and it´s working fine. But I would like to navigate from anywhere on the website and still have the function work:
function showselectedbox(theselectedbox) {
$(".pageboxes").each(function (index) {
if ($(this).attr("id") == theselectedbox) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
<a id="myHeader1" href="javascript:showselectedbox('mynewboxes1');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>
<a id="myHeader2" href="javascript:showselectedbox('mynewboxes2');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>
... more of the same.
I also build a tabbed menu for the navigation, and would like the selected link marked.
<div id="metaltop-teal">
<ul>
<li class="first active"><a id="myHeader1" href="javascript:showonlyone('mynewboxes1');" >show this one only</a></li>
<li><a id="myHeader2" href="javascript:showonlyone('mynewboxes2');" >show this one only</a></li>...
</ul>
</div>
Is there also another way to format the url? e.g: <a href="url" ...>link to page</a>
Thanks
you should put your javascript in a .js file and then include the file in your other files:
<script src="yourfile.js" type="text/javascript"></script>
now you can refer to your javascript function freely.
Remember to include your .js-file AFTER you include jquery, or your script won't work.
EDIT:
To have code execute upon pageload, I'd use $('document').ready() This ensures that the code isn't executed until all elements of the DOM is loaded. This way, you avoid trying to manipulate elements that aren't there. This is especially important when using eventhandlers such as click(). For live() and delegate() which also are attached to elements created later, this is not so important.
Firstly you make a line:
$('document').ready(function(){
after that line, you put anything to execute when the page is loaded.
To finish this block, you write
});
And after that you put your functions etc.