GWT FormPanel and submitting data to server - css

I've a GWT app that I need to put FormPanel to wrap a textbox (TextBox). (to solve some styling issue)
EDIT:
The style issue is that: we are using some pre-build style sheet which put styles by HTML tag names .. so we need to put a form tag to wrap some components in order to be able to read the styles!
the problem is, on the KeyPress event, I notice there is a loading in the page appears. although the result returns ajaxaly as if there's no client-server trip happened.
The question is, How to remove this trip to server?
NOTE: i am just wrapping the componenets into the formpanel, I've not set any properties of it:
FormPanel formPanel = new FormPanel();
CaptionPanel captionPanel = new CaptionPanel();
formPanel.add(captionPanel);
captionPanel.add(horizontalPanel);
verticalPanel.add(formPanel);
Thanks.

From your question, it isn't clear that what is causing the trip to the server. But if it is the FormPanel that's causing this, I would change the instantiation of the FormPanel to the following:
FormPanel formPanel = new FormPanel() {
public boolean onFormSubmit() { return false; }
};
This should be the equivalent of the following html, which will keep the form from submitting:
<form onsubmit="return false">
If this doesn't fix it, you'll need to do some more debugging to see where the server is being called. The Tamper Data plug-in for Firefox might be of help for this.

The whole point of FormPanel is to create a classis HTML-style form submission. It should be used to achieve interoperability with servers that require form submission.
Don't use FormPanel just to solve "some styling issues".
OTOH, if you need to retrieve some data from the server, AJAX-style, than read http://code.google.com/webtoolkit/doc/latest/tutorial/JSON.html#http

Related

How to wait until HTML file loads?

In a page I am working on I replace the HTML code in a DIV with different HTML, then using Javascript I insert additional HTML into a DIV the new code using innerHTML.
If that is confusing, the original HTML contained a form, the HTML that replaced it contains the response to the form's Submit, and the code I want to insert is the information from the form.
This seemed to work as long as I had alert code in the script, which I use to check the progress as I debug this. Once I removed the all of alert lines the insert would fail. I figure it has to do something with the asynchronous nature of page rendering, so I think I need to find a way to make sure the new HTML code has loaded before I try writing to the DIV it contains.
In the code below the script fails at show_member_info unless I uncomment the preceding alert line.
function handle_join(X)
{
do_trace('handle_update');
get_member_info();
send_emails(X);
do_trace('clear content');
document.getElementById("members_content").innerHTML='';
document.getElementById("members_image").innerHTML='';
do_trace('load content');
Load_HTML('members/joinConf.html','members_content');
// alert('show_member_info');
show_member_info();
show_trace();
}
How do I determine when the new HTML has loaded and is ready to be manipulated?
Thanks, Mike
The question is a bit dry, but from what i can understand the problem is that you are not awaiting Load_HTML and that's causing some issue with show_member_info.

How to change css style locally and save this changes

i have an webapp and i need to onclick change css style, but i need to save this change in the webapp instaled into the phone of my user, and only in his phone. The javascript for onclick change css style it's working but i don't have no idea to how to save this css changes.
Can somebody help me with this?
Since now thanks
In general CSS styles can't be directly saved on an HTML client.
What you can do is make an Ajax call back to your server and save the information there. The next time the user asks for the page send HTML with the appropriate style class already on the element you wish to style based on the saved information.
There are several hackish client side possibilities involving JavaScript & cookies or local storage but I would avoid that sort of solution if at all possible since it's very likely to lead to an annoying flicker as the page loads and renders styled one way and then the JavaScript finally runs and corrects the style.
To elaborate on my comment:
el1.addEventListener('click', function() {
el2.style.color = 'red';
localStorage['color'] = el2.style.color;
})
And then on startup:
window.addEventListener('load', function() {
if (localStorage['color']) {
el2.style.color = localStorage['color'];
}
}
Of course, you may want to add error checking and fallbacks as appropriate.

Control is set to visible false, jQuery selector fails

Hi I have some controls on an asp.net modal which I show manually via code behind. Now I am trying to attach a selector on one of the controls inside pageLoad(), problem being is that the modal container is initially set to visible=false.
I tried checking for length but it still throws exception
if ($('#<%= myControl.ClientId %>').length > 0)
{
$('#<%= myControl.ClientID %>').click(function() {
// Do work
});
}
Compiler Error Message: CS0103: The name 'myControl' does not exist in the current context
A few things here, the first/main issue is that myControl isn't defined in the current scope, wherever you are in ASP.Net, that's entirely a .Net side problem.
For the Script, there are more issues, .ClientID, not .ClientId. Also, there's no need to check for it's existence, you can just do:
$('#<%=myControl.ClientID%>').click(function(){
// Do work
});
...if the control isn't there, it just won't find/bind anything. There's also an easier way to go about it in ASP.Net, if there's a unique class you can give it, just give add that class, e.g. CssClass="MyClass", then use that as your selector; like this:
$('.MyClass').click(function(){
// Do work
});
This allows you to put the script in an external file instead of the page as well, another benefit to the user.

ajaxSubmit and Other Code. Can someone help me determine what this code is doing?

I've inherited some code that I need to debug. It isn't working at present. My task is to get it to work. No other requirements have been given to me. No, this isn't homework, this is a maintenance nightmare job.
ASP.Net (Framework 3.5), C#, jQuery 1.4.2. This project makes heavy use of jQuery and AJAX. There is a drop down on a page that, when an item is chosen, is supposed to add that item (it's a user) to an object in the database.
To accomplish this, the previous programmer first, on page load, dynamically loads the entire page through AJAX. To do this, he's got 5 div's, and each one is loaded from a jQuery call to a different full page in the website.
Somehow, the HTML and BODY and all the other stuff is stripped out and the contents of the div are loaded with the content of the aspx page. Which seems incredibly wrong to me since it relies on the browser to magically strip out html, head, body, form tags and merge with the existing html head body form tags.
Also, as the "content" page is returned as a string, the previous programmer has this code running on it before it is appended to the div:
function CleanupResponseText(responseText, uniqueName) {
responseText = responseText.replace("theForm.submit();", "SubmitSubForm(theForm, $(theForm).parent());");
responseText = responseText.replace(new RegExp("theForm", "g"), uniqueName);
responseText = responseText.replace(new RegExp("doPostBack", "g"), "doPostBack" + uniqueName);
return responseText;
}
When the dropdown itself fires it's onchange event, here is the code that gets fired:
function SubmitSubForm(form, container) {
//ShowLoading(container);
$(form).ajaxSubmit( {
url: $(form).attr("action"),
success: function(responseText) {
$(container).html(CleanupResponseText(responseText, form.id));
$("form", container).css("margin-top", "0").css("padding-top", "0");
//HideLoading(container);
}
}
);
}
This blows up in IE, with the message that "Microsoft JScript runtime error: Object doesn't support this property or method" -- which, I think, has to be that $(form).ajaxSubmit method doesn't exist.
What is this code really trying to do? I am so turned around right now that I think my only option is to scrap everything and start over. But I'd rather not do that unless necessary.
Is this code good? Is it working against .Net, and is that why we are having issues?
A google search for
jquery ajax submit
reveals the jQuery Form Plugin. Given that, is that file included on your page where the other code will have access to the method? Does this code work in Firefox and not IE?
Seems like there was too much jQuery fun going on. I completely reworked the entire code block since it was poorly designed in the first place.

creating help for asp.net website

My requirement is to have database based help system for asp.net website, as shown in the image below. i have searched web but could not find even remotely related solution.
DNN Help System http://img3.imageshack.us/img3/6720/dnnhelpimage20091125.jpg
You could assign each help item a unique ID (perhaps GUID to make it easier to generate by the developer enabling help for that item).
Clicking on the link opens a dialog, tooltip, new window, whatever. Just have the UI load the help text by ID from the database.
To make this easier to implement in the UI, there are a few ways. Perhaps you can create a jQuery client-side behavior.
your HTML would look something like:
<span class="help" id="#{unique-id-here}">Admin</admin>
and you could have jQuery on DOM load:
$(function() {
var help = $(".help");
help.prepend("<img src=\"path/to/images/help.png\" />");
help.click(function() {
//do something with this.id; open a popup, a title bar, whatever.
}
});
We did it on our site by doing the following:
We have a HelpTopics database with a HelpTopicId and HelpTopicText
We create an aspx page that displays the HelpTopicText based on the HelptopicId passed in the querystring.
We set up a css class for the A tag that displays the link to the help with the question mark image.
We created a UserControl named TitleandHelp that contained a link to the page mentioned in step 2 and the style for the link set to step 3 above: The usercontrol has a public rpoperty for the title and one for the topicID (We called it HelpContext).
We add the usercontrol to the aspx page where appropriate
<uc2:titleandhelp ID="titleandhelp1" runat="server" HelpContext="4" PageTitle="Forgot Password" />
it may sound like a lot of work, but really it only takes a half hour or so to do all of the setup. The rest of the work lies in populating the table and dragging the usercontrol onto the pages where appropriate.

Resources