Programmatically load usercontrol to a div in masterpage - javascript

There are different user controls to be included in the master page dynamically.
Only some of the pages inheriting the master page will be required to display some of the user controls. I need to know what are the best options for displaying these user controls. Can we decide which user control is to be loaded and do it programmatically through code? Or is there a way in javascript or jquery to do this?
I wanted to know how to load the user control programatically to a div in master page from a content page.

You can load UserControls dynamically by using the LoadControl method available on all TemplateControl based classes (such as Page, UserControl and MasterPage). See this MSDN article for an expanded explanation.
var userControl = (TheTypeOfMyUserControl)LoadControl("~/MyUserControl.ascx");
var div = TheNameOfMyRunAtServerDiv;
div.Controls.Add(userControl);
Edit: The above is required to be placed in the MasterPage. If you want to invoke it from a content page you can create a public method on the MasterPage that the page can call (taking the user control path as a parameter).

following code will work for you,
UserControl uc = (UserControl)LoadControl("controlPath");
div.Controls.Add(uc);
reference:
http://msdn.microsoft.com/en-us/library/c0az2h86(v=VS.90).aspx

Related

How to show jsp content in ExtJs window?

I have a jsp with ExtJs application. I click a button new Ext.Window appers . In this window i want to show forms from another jsp. Its mean that i want:
1 Send parametrs to jsp.
2 Fill a forms according to these parameters.
3 Show froms in window.
4 After send parametrs to first jsp.
Another way its send a parameters in second jsp and create window and forms in this jsp and show it.
Which way is more correct and how to realize it?
Second way might be easier. The Ext Window (or it's parent Panel) component has contentEl property that can be specified. What this does is load the html of the element into the Panel component as html property. So you can take an existing JSP with all of its rendered html on the server side and show it as is inside a Window panel.
The first way might be achieved through a component loader . What this does is lets you load content of a remote page (JSP in your case) into your Ext component. I have not used this so I am not sure what limitations you might face with this. There are however some interesting possibilities described in the docs: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader

Attache script to the visualforce parent page

I have added my visualforce page to Account page and found that I can set only fixed height. I wrote javascript solution for auto height. First part I added to the parentAccount page by adding new button with {!REQUIRESCRIPT("my_scipt_here")}, second part I added to visualforce page.
s it possible to add javascipt to the "parent" Account page without adding Custom Button?
I'm not aware of any way to run javascript on a page other than by using a button (or maybe a link as a field), though it'd be good to know if there is one but I highly doubt it would be available, or if it is, supported.
Would overriding the Account view page with a full visualforce page be an option where you use an <apex:detail> tag to get the standard fields etc.?
Remember that Visualforce components on page layouts occur as iframes. If the domains match up, which may or may not be the case - you could inject JavaScript from the iframe to the parent.
This may give more details:
Inject javascript function into parent window from iframe

jQuery in ASP.NET UserControl

Scenario 1
The page contains nothing but only the 'MultiSelect' user control. Here, jQuery is working well.
Scenario 2
I moved the 'MultiSelect' user control to a project where we use master pages and UpdatePanel. The hierarchy of the page is
Master Page --> Content Page --> Div --> MultiSelect user control
Here jQuery is not working.
About MultiSelect user control
The control having a reference to jQuery file and it contails lot of check boxes grouped. So if I click on group header check box, all the child check boxes will get selected.
My queries are
Why jQuery does not work in Scenario 1 ?
Where is the best place to link the reference to the jQuery file, in Master Page, in Content Page, or in UserControl itself.
I heard about if we use UpdatePanel, we need to use PageRequestManager too.
Writing JavaScript code in Code Behind file will solve the issues ?
Well. While using jQuery in ASP.NET User Control, we have to do the following(all the steps are not mandatory)..
a. You may write code in code behind file. There you have to use PageRequestManager too.
b. You may put reference to jQuery in Master Page.
May be your JQUERY is conflicted with AJAX Javascript.
If you have put our jquery in usercontrol check its path. If the usercontrol in one folder then the path must not according to user control. A path always according to master page or parent page.
You can test you java script error by Firebug or if you have latest fire fox press ctrl+shift+k. the refresh your page and check you function why it is not working. you will find the Java script error.
I have this problem but with lot of test can solved it this details.
Best place to define and import css and jQuery files in asp pages and should not be added in ascx (user control).
Update panel with jQuery and Javascript have conflict so if you use jQuery and Javascript in your usercontrol as well as me, delete update panel nevertheless you can this :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"
RenderMode="Block">
in user control.
And set Script Manager in your master page or asp page that included user controls.
In accordance your help for use PageRequestManager, I try for it, but scripts which generated for page have conflicted with update panel and crashing it.

JQuery Mobile page does not load getJSON content until page is refreshed

I have a list of "patients" that is queried and linked like so:
list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));
Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (i.e. patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.
Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:
function login() {
var query = window.location.search;
if (query.substring(0, 1) == '?') {
query = query.substring(4);
}
$.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {
var head1 = document.getElementById("name");
var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
head1.firstChild.nodeValue=newtitle;
document.frmLogin.email.value=" "+data.BirthDateText+" ("+data.Age+")";
document.frmLogin.password.value=" "+data.SSN;
document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";
});
}
I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..
Linking within a multi-page document
A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
href="multipage.html" rel="external">Multi-page link

including form by user action

i have a page containing a form and directs to another page (page2) asusual. Page 2 have a edit button that must include the entire previous page into a div in page2(initially it has none).How to do this with javascript?
You can use the
load
function in jQuery. It loads HTML from a remote file and inject it into the DOM.
$("#yourdivid").load("page1.html");
With jQuery you can get the html of the page using the following...
var x = $("body").html();
You can then add that to your form.
If you don't require the entire page (the page will include the form again after all), you can change the selector in the code example to limit it to any part of the page.

Categories

Resources