In my application I have a layout page for viewing the project:
This page have 4 sub-pages (Details, Photos, addresses and comments).
Example:
/myproject = Open the details page
/myproject/Photos = Open the Photos page
/myproject/Addresses = Opens the page addresses
/myproject/Comments = Open the page of comments
Question
How to use # to load pages via ajax to the URL?
Example
/myproject = Open the details page
/myproject#Photos = Open the Photos page
/myproject#Addresses = Opens the page addresses
/myproject#Comments = Open the page of comments
In page layout where I have four buttons, click on the photo for example, the page would be loaded via ajax. and url go
from /myproject
to /myproject#Photos
Resume
How to use '#' in asp.net MVC?
They are generally called URL fragments and are used as bookmarks on a page to navigate to different sections of that page. When clicked they will scroll down the currently loaded page to the matching tag name. I would recommend against using them as paths to different pages.
You can use them as bookmarks by specifying the fragment in the Htmlhelper:
#Html.ActionLink("My Photos", "Action", "Controller", null, null, "Photos", null, null)
Then in your Photos partial that represents the Photos sub-page, set the html id attribute to "Photos" in the div or label or whatever represents the beginning of the Photos partial. The link created with the #Html.ActionLink will look for a html element ID that matches the word you typed into the fragment.
See LinkExtensions.ActionLink Method for more details.
Sorry, brain fart there... You need everything client side...
I'd use the following jQuery plug-in to parse the URL fragment:
http://benalman.com/projects/jquery-urlinternal-plugin/
and then call MyDiv.Load('yourcontenthere') to load the content you'd like into the desired DIV.
Related
I have an view that extends the current project view, where we add multiple tabs (notebook pages) to show information from other parts of a project.
One of these pages is an overview page that summarizes what is under the other tabs, and I'd like to link the headlines for each section directly to each displayed page. I've currently solved this by using the index of each tab and calling bootstrap's .tab('show') method on the link within the tab:
$(".overview-link").click(function (e) {
e.preventDefault();
var sel = '.nav-tabs a:eq(' + $(this).data('tab-index') + ')';
$(sel).tab('show');
});
This works since I've attached a data-tab-index="<int>" to each header link in my widget code, but it's brittle - if someone adds a tab later, the current indices will be broken. Earlier I relied on the anchor on each tab, but that broke as well (and would probably break if a new notebook page were inserted as well).
Triggering a web client redirect / form link directly works, but I want to show a specific page in the view:
this.do_action({
type: 'ir.actions.act_window',
res_model: 'my.model.name',
res_id: 'my.object.id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'current'
});
Is there any way to link / redirect the web client directly to a specific notebook page tab through the do_action method or similar on FormWidget?
If I understood well you want to select the tab from the JavaScript (jQuery) FormWidget taking into account that the id could change if anybody install another module that adds another tab
Solution 0
You can add a class to the page in the xml form view. You can use the id of the element selected by this class name in order to call the right anchor and select the right tab item. This should happen when the page is completely loaded:
<page class="nb_page_to_select">
$('a[href=#' + $('.nb_page_to_select').attr('id') + ']').click()
NOTE: As you have said the following paragrah I assume that you know where to run this instruction. The solution I suggest is independent of the index.
This works since I've attached a data-tab-index="<int>" to each
header link in my widget code, but it's brittle - if someone adds a
tab later, the current indices will be broken. Earlier I relied on the
anchor on each tab, but that broke as well (and would probably break
if a new notebook page were inserted as well).
Solution 1
When the page is loaded you can get the tab list DOM object like this:
var tablist = $('ul[role="tablist"]')
And then you can click on the specifict tab, selecing by the text inside the anchor. So you don't depend on the tab index:
tablist.find('a:contains("Other Information")').click()
I think if you have two tabs with the same text does not make any sense, so this should be sufficient.
Solution 2
Even if you want to be more specific you can add a class to the notebook to make sure you are in the correct notebook
<notebook class="nt_to_change">
Now you can use one of this expressions in order to select the tab list
var tablist = $('div.nt_to_change ul.nav-tabs[role="tablist"]')
// or
var tablist = $('div.nt_to_change ul[role="tablist"]')
Solution 3
If the contains selector doesn't convince you because it should be equal you can do this as well to compare and filter
tablist.find('a').filter(function() {
return $.trim($(this).text()) === "Other Information";
}).click();
Where "Other Information" is the string of the notebook page
I didn't tried the solution I'm giving to you, but if it doesn't work at least may be it makes you come up with some idea.
There's a parameter for XML elements named autofocus (for buttons and fields is default_focus and takes 1 or 0 as value). If you add autofocus="autofocus" to a page in XML, this page will be the displayed one when you open the view.
So, you can try to add this through JavaScript, when the user clicks on the respective link -which honestly, I don't know how to achieve that by now-. But you can add a distinctive context parameter to each link in XML, for example context="{'page_to_display': 'page x'}". When you click on the link, I hope these context keys will arrive to your JS method.
If not, you can also modify the fields_view_get method (here I wrote how to do that: Odoo - Hide button for specific user) to check if you get the context you've added to your links and add the autofocus parameter to the respective page.
As you said:
This works since I've attached a data-tab-index="" to each header
link in my widget code, but it's brittle - if someone adds a tab
later, the current indices will be broken.
I assume that your app allow multi-user interaction in realtime, so you have to integrate somewhere in your code, an update part function.
This function will trig if something has changed and cleanout the data to rebuilt the index in order to avoid that the current indices will be broken.
I am working on testcomplete automation tool. I want to know how can I store current URL in a variable for validation. Example,
I click a link that takes me to a particular page. I want to validate against the URL of that page. how can I do that?
You can use the URL property of the Page object. Information on this property along with a script sample can be found in this document:
URL Property (Page Objects)
If it's not opening in a tab/window then this should work fine:
function PageSample()
{
Browsers.Item(btIExplorer).Run("http://smartbear.com/");
// Obtains the browser process
var browser = Sys.Browser("iexplore");
// Obtains the page currently opened in Internet Explorer
var page = browser.Page("*");
// Use the page object property and add a checkpoint to validate
…
}
I have a HTML file in Static Resource, which I need to display in one of the sections as an overlay in Visualforce page.
How can this be achieved? I tried including directly, did not seem to work
Got the fix, using jQuery.
//Get the URL of the HTML Page
var pageURL = "{!$Resource.ResourceName}/html/PageName.html";
//Load the HTML Content to the element(based on ID or Class)
$('.target-element').load(pageURL);
I'm using ASP.NET MVC 3 and the helper #Html.Raw in my view.
I'm passing it some HTML markup that I have stored in a database. The markup contains some URLs that point to other places on my site. For example http://www.foo.fom/events. These data are forum posts, so the page they're displayed on has the form http://www.foo.com/forums/thread/42/slug.
However, when the page is rendered, the saved URLs are rendered in modified form as:
http://www.foo.com/forums/thread/42/events/
This only happens for URLs on my site. If the URL points to some external site, it is unchanged.
I have verified that what I'm passing into #Html.Raw is the correct URL (http://www.foo.com/events). Why is it getting changed as the page is rendered? Is there an easy way to disable this "feature"?
Here's my code for displaying the markup:
<div>
#Html.Raw(post.Body)
</div>
and here's the controller code that genrates the page data:
var post = _forumRepository.GetPostById(id)
var model = new ForumPostView()
{
Body = post.Body,
PostDate = post.DatePosted,
PostedBy = post.Author,
PostId = post.Id
};
return View(model);
I have verified via debugger that the exact URL in the post.Body before being passed back to the View is of the form "http://www.foo.com/events" (no trailing slash). I have also verified via debugger that the value is unchanged before it is passed into #Html.Raw.
It sounds like the urls that are pointing to other pages on your site are non-absolute. Are you certain they start with a / or http? If not, it's behaving exactly as it's supposed and treating them like relative urls -- and thus appending them to the current url.
(Html.Raw will not manipulate the string, so it's not at fault here)
Also, it wouldn't hurt to show us your code.
No, in fact I am an idiot. The URLs were indeed stored in relative form without a leading /, which is why they ended up being relative to the current page. The text displayed was absolute, which is what I saw when I looked at the db. That's what I get for debugging on a few hours' sleep ;)
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.