Loading/Unloading Select2 cleanly - javascript

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?

Related

content loaded with JQuery needs form submit to reload content in parent

Working on an admin-dashboard page, and I have it loading other pages from a nav menu with JQuery like so:
$('#stores.sub_menu--link').click(function(){
$('#content').load("https://mydomain.mywebsite.com/ApageWithForms.php")
});
This part works fine; the problem is this:
The loaded content is coming from PHP pages, and have form and click GET and POST functions. These work fine if we load the page itself in a browser, but when the page is loaded as content POSTing or GETing loads the page in a new tab instead of reloading in the content. I understand WHY it does it, but I have no idea HOW to fix it! I have tried adding _PARENT to forms and pages even though I knew this wouldn't be the answer (it wasn't).
I've tried searching, but I think my limited ability to explain the problem is also preventing me from finding a solution.
Can anyone point me in the right direction? What I am looking to have happen is when a form is submitted have the page re-load into the dynamic location of the parent.
Figured it out. The loaded content had duplicate class, id and names for some elements which confused jQuery. Changing these allowed ajax posts to work as intended.

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

Have only part of php document load

I have created a PHP/HTML document which uses jQuery to create a sliding page effect. I would like to have what the user selected on the first page correspond to what they see on the second page. I know how to do this if I was to use two separate pages however I would like to keep the sliding page effect.
The problem is that PHP is loaded first so for the second page nothing is displayed because on initially loading the page nothing is selected on the first page.
The only solution I have is to have the second page only load when the first is completed, but I have no idea how to do this. Does anyone know if its possible to have the document load at separate times?
UPDATE
On second thoughts could I use a XMLHttpRequest to achieve this? And if so how can I do this

Issue with ng-repeat after calling $compile to bind dynamic HTML in angular

I'm building an application which has multiple tabs containing HTML which is generated dynamically. Clicking a tab calls a .net MVC controller to render a razor view, return the HTML to the angular and display in the body of the tab.
The body of the tab needs to be bound to an underlying angular model. I'm not sure if this is the best way to do it, but this is what I have so far, which mostly works:
function updateHtml(html, tabId) {
angular.element(document.getElementById('tabBodyContainer')).html(html);
$scope.currentTab = tabId;
var fnLink = $compile(document.getElementById('tabBodyContainer')); // returns a Link function used to bind template to the scope
fnLink($scope);
}
This works great except when I click on a tab which has a repeater. My first tab has a repeater which renders fine on load because the first tab is generated on page load by the razor view engine and then bound. When I click a different tab and click back, all the rows in my repeater are missing, as if the repeater didn't bind or the DOM never updated for that section after the $compile.
Any ideas? Or is there a better way to do this?
Thanks!
I worked it out - I was caching the HTML so that I only called my MVC controller once per tab. The HTML for the first tab was being cached AFTER angular had been bound, meaning the HTML that was added on tab 1 was post compile HTML.
For most html this is fine, however with repeaters, angular replaces the markup with the comments before, meaning if I cache that HTML it won't know what was supposed to be repeated the next time I insert that HTML and run the $compile

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.

Categories

Resources