jQuery in ASP.NET UserControl - javascript

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.

Related

Targeting instances of JQuery UI Accordion without knowing what they are

I have a site that uses jquery UI accordions on different pages. The script for these accordions is on the page in each case.
We're looking into daily site prints for all pages so we need those accordions to be fully expanded when we do the site print (we'll be doing this by detecting the site printer's userAgent string because they can issue a custom one).
The site printer can halt execution of javascript on a page to keep content fully expanded but we also use AJAX scripts so that would prevent content from loading.
So we need a script that targets any jquery accordions on a page and makes them fully expand. We have a custom.js file that is present on all pages so we could place a command there.
My question is, is it possible to target all instances of accordion objects without already knowing what they are? I'm looking at the possibility of putting a script in the custom.js file rather than having to rewrite all the JQuery accordion calls page by page (and trying to get everybody that adds stuff to the site to also remember to write a conditional userAgent based expand everytime they use an accordion).
Without seeing your code or knowing anything about your current HTML, you can try something like this:
$(".ui-widget.ui-accordion").each(function(index, elem){
// Code that you want to execute on each Accordion
// For example, we could disable each one:
$(elem).accordion("disable");
});
I don't see a method to expand all panels at once. Likely, you would have to activate each panel.
Found this: jQuery UI Accordion Expand/Collapse All
It advises using the theming to make the accordion look correct, and then roll your own ability to expand all.

Loading/Unloading Select2 cleanly

My page loads within a portlet-like application on which I have no control. My page is rendered within a portlet content pane when I click a link on the menu of the portlet application.
Scripts that have been declared within the JSP file get loaded properly.
I am creating dynamic select elements on my page and applying the Select2 plugin on them.
For Select2, I have observed the following issues (which I can't create a fiddle for...or don't know how to create).
When the portlet loads my page in the content pane via ajax the first time, everything works fine.
When I reload the page (still ajax), I get the following error:
$selectBox.select2 is not a function
I presumed this may be because there might be an extra instance of Select2 getting created on my page.
Therefore I added the following statement in my page (before the script tag for select2)
window.Select2 = undefined;
Now, the select2 plugin loads fine. However, when I click on a drop-down and click anywhere else on the page, I would expect the drop-down to close, but I get the following error on the console
TypeError: self is undefined
Is there a better way of solving this problem?
How do I cleanly remove "Select2" from my page before loading it again?

Foundation 3 - customForms checkbox`es/radio buttons don't work when loaded dynamically

I'm working with Foundation 3.
And I'm having a problem with custom forms and javascript. I use reveal plugin for login and signup forms. if I load forms statically into HTML everything works fine. But if I load them dynamically (lets say ajax), check boxes and radio buttons don't work. Even after reviel I call "$.foundation.customForms.appendCustomMarkup". What should I do? I really like those custom checkboxes and radio buttons. How could I use them with dynamically loaded HTML?
I know this was asked a long time ago -- but incase anyone else comes across it, here's how you do it:
Let's say the container that your ajax is loaded in is <div id="myModal"></div>
After, your content is loaded, you've got to fire $('#myModal).foundation('forms');

Programmatically load usercontrol to a div in masterpage

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

weird problem with aspx page closing automatically

First I am new to the asp .net world and am trying to figure out a weird issue that I am having. Any suggestions or comments are welcome.
I have a page that has a form and on submit I launch another aspx file that exists in the same directory.
The problem is the aspx file is shown and the file closes immediately!.
Howewever, the weird part is if I make any modifications to the aspx file and save it and then run my application it works fine ONLY THE FIRST TIME!? any subsequent submit actions launch the aspx page but then the aspx file immediately closes.
But after I make some modifications to the aspx file..(simple ones) it launches correctly the first time.
I realize that this is very little info to go on and I am not even sure if I have got my point across...but any suggestions on how to debug this will be helpful.
We are targetting .net version 4.0 and using IIS7.
I am thinking that the asp worker process is doing something weird like checking for timestamps and closing it?! Not sure tho.
Any help is appreciated.
ASP.Net webforms don't use the form in quite the same way as regular HTML forms. All you need in your form tag is
<form runat="server">
If you want to pass the user onto another aspx page you can use the Response object:
Response.Redirect("~/pages/SomeOtherPage.aspx");
or (Server.Transfer - read up on the differences)
Server.Transfer("~/pages/SomeOtherPage.aspx");
If you want to open a page in a new/pop-up window or similar you'll need to do so using JavaScript
window.open('/pages/SomeOtherPage.aspx') [There are overridden versions of this method]
You can use the forms PostbackUrl property too, but this will also keep the user in the same browser window. More info here.
HTH

Categories

Resources