ExtJS 3.4 - FormPanel cannot be rendered to <DIV> in Chrome and IE - extjs3

I am trying to load the jsp content of each tab in tab panel in tabChange listener by calling the .load() method.
In each jsp, there is a Ext.Panel and rendered to a . I found that if the Ext.Panel contain a Ext.FormPanel or the Ext.FormPanel is directly rendered to the , page will not be shown on the tab and error will be found in IE and Chrome while there is no such problem in Firefox.
The error message in Chrome is:
Uncaught TypeError: Cannot call method 'applyStyles' of null
I have tried to replace the Ext.FormPanel with Ext.Panel, it works, but I must need the Ext.FormPanel for calling .getForm.submit() for SAVE action purpose.
Please help.

The problem is your render a Formpanel inside a Formpanel. So the inner formpanel cannot be rendered in Chrome and IE. But Firefox can ignore this error.

Related

Everything undefined after postback after removing AjaxControlToolkit ScriptManager

I just removed AjaxControlToolkit v7 from my project, and therefore replaced the ToolkitScriptManager with the standard ScriptManager.
Now after postback on iframe in popup window all script functions (including jquery, $ etc) are undefined. Just about everything on the window object is undefined. The location is correct and all the script files are there in the head. I put a breakpoint in the script file and when it tries to call a function defined in that very same script file it is undefined.
Any ideas where to look?
Always ask: "What has changed?"
In my case, I no longer use the Modal Popup Extender with a PERMANENT div. I now use jquery dialog with a dynamic div that I destroy when we click an OK button.
It seems IE still tries to execute scripts after the IFRAME container has been removed from the DOM (with $(div).dialog("destroy").remove()). Chrome at least seems to behave differently and not try to run the scripts.
Related:
Issue with Iframe inside JQuery dialog only for IE
https://msdn.microsoft.com/en-us/library/gg622929(v=VS.85).aspx?ppud=4

nyroModal v2: How to validate form opened in iframe?

I'm trying to figure out how to validate a form opened using nyroModal.
The page is being opened as below on click of a button:
$(function() {
$('.btnedit').click(function() {
$.nmManual('form_page.php);
});
});
On the form that opens up, I have a few fields that are mandatory and a cancel & submit button.
<a class="nyroModalClose button" href="#" id="btn_submit">Submit</a>
On clicking of the submit button, I want to make sure the mandatory fields have value. If no, an error message should be displayed & the modal window should not close.
I'm trying to use the jquery validation plugin, but without success. The modal window always closes irrespective of the validation scripts.
I haven't found much info regarding form validation in a modal window. Is this not a preferred approach?
Thanks in advance.
I'm not able to help you about the jquery validation plugin in a modal window, but I know that using the instruction $.nmManual in that way, the form will not be placed inside the iframe tag, and if I remember correctly the content of new page will be added without header and body tags, so in a word incorrectly. I guess this can produce no validation.
To successfully open an iframe you need to use filters as described here:
Open iframe manually in nyroModal?
I hope this can help you.

How can I hide like button or div from Firefox?

I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps

Unable to call getValues() on an Ext Js FormPanel on initialization of a container Panel

I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.

Selenium RC popup window question

My webpage submits information to a page and the response returns a popup window. Does anyone have an idea about how I can validate the information in the popup window?
Popup window doesn't have a WindowId and I'm not able to get hold of the popup window using selenium.GetWindow("popuwindowname"), selenium.GetWindow("title=something") or selenium.GetWindow("name=popupwindowname").
Has anyone had a similar problem and found a workaround or an alternative solution?
Can you put the html source of the popup window. Usually, what you see in the screen may different in the html code.
What type of popup dialog is returned if this is a modal dialog selenium does not handle modal dialogs.because a modal dialog stops all javascripts from running until it is closed.
see Selenium FAQ
Try this
public void testPopup() throws Exception {
selenium.open("http://yoursitename/page.aspx");
selenium.click("//img[#alt='Share']");
selenium.waitForPopUp("_blank", "30000");
selenium.selectPopUp("");
verifyTrue(selenium.isTextPresent("Recommend to a friend"));
selenium.close();
Hope will help you!