Display HTML from Static Resource in VF Page - visualforce

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);

Related

Unable to add image to Customer Asset

I have a few Entities, for which I have added an IFrame inside a single column tab. The IFrame displays the image which it fetches from the url in the URL field on the same form.
For this I have added a javascript in the IFrame tag properties.It works for the Product Entity and the image is displayed in its form, however it doesn't work for Customer Asset Entity.
Here is the javascript I have used
function onload()
{
var url =Xrm.Page.getAttribute("new_url").getValue();
Xrm.Page.ui.controls.get("IFRAME_pic").setSrc(url);
}
It is unable to locate the attribute on the page and gives out the below on page load of Customer Assets:
**Xrm.Page.ui.controls.get(...) is null**

CKEditor is changing my SRC or Href when saving

I am trying to save a link in DotNetNuke (DNN) using the CKEditor for the HTML module.
When I save, the editor will automatically adjust the link.
I am trying to save it as
data-src="#bronze"
The reason for the hashtag is for displaying a fancybox pop-up with hidden content. https://fancyapps.com/fancybox/3/docs/#inline
But the editor adds /portals/2/ in front of this URL.
I have looked at this article below.
CKEditor - Change image source
I assume the CKEditor is saving the SRC and Href links in protected mode for browsers. Is there a way that I can turn this off in the settings?
I did try to change to RAW mode, but it still does the same thing.
I face the same problem on data-fancybox-href, the only solution I can think of is using jQuery / javascript to change back to correct value:
var src = $(".more_info_btn")
$.each(src, function(){
var href = src.attr("data-src")
var hrefArr = href.split("#")
href = "#" + hrefArr[hrefArr.length-1]
$(this).attr("data-src", href)
})

load a random html with ajax on page load

I'm looking for a way to load in a random html file from 3 html files with ajax into a main html page whenever the page is refreshed. Is there a simple way of doing this?
Thanks!
var urls = ['url1', 'url2', 'url3'];
var randomUrl = urls[Math.floor(Math.random() * urls.length )];
$('body').load(randomUrl);
Have in mind that you may run into cross domain request policy issues. This means that you cannot load using ajax pages from others domain unless a special header is sent from the external hosts.
Alternatively you can redirect the page to the new one:
window.location = randomUrl;

How to get the raw markup from a jquery mobile pageload request?

How can you get the raw HTML markup from an AJAX request that loads a page in jquery mobile?
My page has a menu outside of the page container element (data-role="page") and I need to update it on each page load but jquery-mobile only gives me the page markup from the request not the entire document.
I've even tried using the global ajaxSuccess callback for jquery; apparently jquery-mobile feels the need to filter this to just the page element also.
Can't you just assign an id to the menu page and access it directly?
$('#myMenu').html(newContent);
Found the http request object in the pageload event.
$(document).bind("pageload", function (e, data) {
console.log(data.xhr.responseText);
});

What are and how to use '#' in URLs

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.

Resources