jQuery tab with multiple web forms - javascript

I am trying to navigate multiple web pages using jQuery tab like below
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
this is working fine, when I navigate through tab click. But, if any post back happens within the pages, they are popping out of the tab(with out tab). I tried using the tab in a Master Page, it is showing the tab properly in Master page, but showing the ul markup again in the child pages.
Since I have lot of condition checks in every page, I am trying with separate pages, rather than putting everything into one single page.
Currently I am using User Control as the menu, to navigate between these pages. I am just curious to try the same with jQuery tab. Can anyone help me out to resolve this issue. Thanks in advance.

Because Your web forms are targeting the same master page (this result in render the whole page including html and head... tags)!
So, to solve this issue, you need to replace webforms by partial views (as of MVC) or simple user controls (as of WebForm) or webForm not having a master page, nor html tag
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>

Related

Refresh only content page in ASP.NET CORE Razor Pages

Please am a newbie in Razor pages. I need to integrate AdminLTE template into my Razor Page application which I have done successfully.
I placed the side bar menu with anchor tags that open specific pages, header bar and footer html code in the _Layout.chtml file and then I have the below div in the same _Layout.chtml to render the content pages
<div class="content-inner-all">
#RenderBody()
</div>
This works alright but when I click on any of the menu options it opens the content page alright but it refreshes the entire page together with the side bar.
What I want is to be able to click without refreshing the sidebar only the content page.
Please help me out
Thank you
For you to refresh or load content without refreshing the entire page, i'll advise you to integrate blazor server to your razor pages app.
Blazor allows you to split your admin template into different routable components and pages and the side bar and any other component that you doesn't need to be refresh won't be refreshed.
It might take a while getting used to but it would work best for your admin template.

Disable scroll to content when using Foundation Tabs

I am using Foundation 5.5.3, and I'm having a serious problem with the content tabs. I've tried everything I can think of, but for some reason whenever a user clicks on a tab, it scrolls the page down to the content. I'm not using deep linking, as I understand there's some issue with deep linking/scroll to content.
Here's an example of the html:
<ul class="tabs" data-tab data-options="scroll_to_content: false">
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
</ul>
<div class="tabs-content">
<div id="tab1" class="content active">
<p>Tab 1 content</p>
</div>
<div id="tab2" class="content">
<p>Tab 2 content</p>
</div>
</div>
Yet it still scrolls to the content when the tab is clicked. I'm at a loss, any help would be greatly appreciated.
Put together a solution with some help from this answer.
The issue seems to stem from the way MixPanel handles tracking links. It intercepts the click action, does some tracking stuff, and then manually directs the browser to where it should be going. This is normally fine, but Foundation tries to disable the default action when clicking on a content tab. MixPanel then comes along and ignores that, sending the browser to the link anyway, causing the scrolling issue.
Disabling link tracking altogether solves the issue, but that also means that we're collecting a lot less useful data. So I went around trying to find a way to disable link tracking on in-page links. That's where the answer above came in handy, as it's a neat little function that allows using a jQuery selector in determining which links to track.
Instead of the standard link tracking setup, I used the provided delegate_links method, as such:
mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');
That ignores any links starting with #, so it disables tracking on the in-page links. Normal links are tracked as they were, but the tab specific links no longer trigger MixPanel, and the browser no longer scrolls to the content on click.

jQuery Mobile refresh page onclick

I'm making an application with jquery Mobile, is there any way , when i click a button link page , it also refresh the page (#page_aboutus). Thank you
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c"><small>About Us</small></li>
</ul>
Use this function
onclick="window.reload()"
Reloading a page div in multi-page model will be very tough because it will break the entire application DOM. in case you want to trigger a method or to apply some mobile look and feel, try reloading the element with refresh functionality of that element.
have a look on page reload functionality with page container widgets. http://api.jquerymobile.com/pagecontainer/#method-load

jQuery Mobile page implementation and hash navigation conflict

I am using jQuery 1.9.1 and jQuery Mobile 1.4.2.
I have a problem with my jQM site that causes data-rel="back" links to break. Originally I thought this was some other problem but I have found the cause of this.
My website consists of an index page which contains the header and the body, which looks like:
<div data-role="header">
</div>
<div data-role="page" id="login">
</div>
<div data-role="footer">
</div>
The login page does contain login forms and other elements but that is not important for this problem.
The other pages are simply html files that have:
<div data-role="page" id="pageId">
content
</div>
My javascript file then loads those files into the DOM:
$("body").pagecontainer("load", "page.html");
Then, all links do their usual navigation:
Link
And that performs normally.
The problem is that if you refresh on a page, for example #pageThree, the site reloads, and takes you to the login page, but the URL keeps #pageThree, but since it doesn't exist at load time it is ignored. This is my desired behavior. However, I then use the link
Link
to go to #pageFour which has a link:
Back to pageThree
Now, if I press that "back" button, it should take me to #pageThree, however since I refreshed on that page, the back button takes me back to the login page.
So in short: If I refresh on a page with a hash navigation, any back buttons that point to that page redirect to the initial login page instead.
I may have done an improper implementation of pageload and am open to suggestions, as long as it makes back buttons work properly.

Apply facebox to links displayed using Ajax

I have a small problem. So I have this page that loads dynamic content using jQuery Ajax after the page is done loading. On the top of the page is a link called "Add News". When you click on that Link, a facebox pops open. This link is static and is only displayed once on the top of the page. Its labeled:
<a href="linktopage" rel='facebox[.xhr]'>Add News</a>
The dynamic page (loaded from Ajax) lists all the existing news in the DB. They are labeled:
<a href="linktonews?id=1" rel='facebox[.xhr]'>News 1</a>
<a href="linktonews?id=2" rel='facebox[.xhr]'>News 2</a>
<a href="linktonews?id=3" rel='facebox[.xhr]'>News 3</a>
and so on... Clicking one of the news items, open a facebox where you can view/edit the news.
Every time a new news item is added, the dynamic content reloads without refreshing the page.
The definition of facebox is instantiated using $('a[rel*=facebox]').facebox(); when the main index page is loaded.
Now my problem is that this $('a[rel*=facebox]').facebox(); does not apply to the news content loaded using ajax. So clicking on those links does not open a facebox. How can I achieve this?
Thanks in advance.
I had the same problem so I started looking at the pull requests in GitHub and found:
https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801
by Dator (props to him! :D)
As it seems that the pull request isn't merged yet I just changed that line in my facebox.js and it works great :D
Hope this helps :)

Categories

Resources