In a GSP (Groovy Server Page), I'm using <g:submitToRemote update="..."> to update a <div> after the server-side call.
According to the tag's documentation and other sources on the web, the target <div> can be placed arbitrarily at the page. In my testings, however, I find that the <div> needs to surround the <g:submitToRemote> tag.
If it does not, the <div> will be updated with some "random" contents (i.e., parts of the form that surround the <g:submitToRemote> tag).
Consider the following GSP code:
<html>
<head>
<g:javascript library="prototype" />
</head>
<body>
<div id="updateMe_NOT_WORKING">${message}</div>
<g:form>
<div id="updateMe_WORKING">
<g:submitToRemote value="Click Me"
action="someAction" update="updateMe_NOT_WORKING" />
</div>
</g:form>
</body>
</html>
That's on Grails 1.3.4.
What am I missing? - Thanks
According to my testings, g:submitToRemote's action attribute must not point to the current controller's current action (as this will insert/duplicate the current view into the current view).
It works if you specify an alternate action in g:submitToRemote - i.e.,
<g:submitToRemote value="Click Me"
action="ajaxAction" update="updateMe" />
If this action provides a model - i.e.,
def ajaxAction = { [message: 'foo'] }
then there needs to be a corresponding GSP - that, in this case, should state,
$message
Alternatively, the action can use the render method - like this,
def ajaxAction = { render 'foo' }
I'll leave this issue open for some time, in case there might be additional responses, and, if there aren't, will accept this answer as the solution.
Thanks
I think the problem is that you don't specify the controller for your action. Try adding controller="..." into your g:submitToRemote tag. Or at least specify it in g:form.
I'm sure that the <div> doesn't need to be wrapped.
Related
I have a very simple drop down menu:
<select name="sNumR" id="sNumR" onChange="addTable()">
<option value=1>1</option>
<%For i=2 to 10
Response.write("<option value="&i&">"&i&"</option>")
Next%>
</select>
All I'm trying to do is access the selected value, whether it be the default value of 1 or otherwise. Please don't list a jQuery or javascript solution as I already know how to do that and am not concerned about that at all.
The simple: Request.Form("sNumR") doesn't work. I've tried it, many times...
What is it I'm missing? Is this even possible with vbscript/asp? I prefer a method that is simple as I believe this task should be but at this point I'm willing to take whatever I can get.
Request.Form() collection can only be accessed once data has been submitted, you do this either using client-side code to trigger a form submit or using an <input type="submit" />
This whole mechanic relies on the fact that your <select> and <input> tags are wrapped inside a <form> tag. The form has specific attributes you have to set to to access the Request.Form() collection.
action - Specifies URL you are submitting the form to, empty string will submit to the current page.
method - Either GET (to populate the Request.QueryString() collection) or POST (to populate the Request.Form() collection.
A simple HTML form example would like this;
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<form action="" method="post">
<input type="submit" name="submit" value="Submit Form" />
</form>
</body>
</html>
This will do a form POST to the current page (assuming it's called example.asp)
POST /example.asp HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 20
submit=Submit%20Form
You can then insert ASP anywhere in that page to access the Request.Form() collection for example, placing this code above the HTML in example.asp
<%
Dim is_submit
'Have we submitted the form?
is_submit = (Request.Form("submit") = "Submit Form")
Response.Write "Form submitted: " & is_submit
%>
Will produce Form submitted: False before submission and Form submitted: True after submission.
Try wrapping your value attribute value with double quotes.
<option value="1">1</option>
Other than that, check your variable names.
I am trying to use jQuery validate for a form.
I have added
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
My form:
<form id="Main">
<asp:TextBox ID="Box" name="box" required runat="server"
</form>
At bottom of page
$('#Main').validate();
This works. Which is great. But if I remove the required attr and try say
$('#Main').validate({rules:{box:{required:true}}});
This does not work. For the life of me i cant figure out what I am doing wrong.
In the end I need that input to be required and numeric.
I tried adding 'number' as an attribute but that didn't work either.
some guidance would be great.
Thanks.
There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.
I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.
Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.
Here is the code from the fiddle above..
<form id="myform">
<input type="text" class="box" id="box" name="box">
<br/>
<input id="submit" type="submit" value="Validate!">
</form>
$(document).ready(function()
{
$("#myform" ).validate(
{
rules:
{
box:
{
required: true,
number: true
}
}
});
});
For now, I have the following structure of the web page:
<div id="container">
<div id="navigator"></div>
<div id="content"></div>
</div>
Literally, the div with id "navigator" is for navigating use. I can choose such as "home", "login", "register", etc. I want to use ajax to refresh the whole div with id "content".
So what should I do?
1) Apparently, I need to have these separate divs. But in what form? Should I use ui:composition or else?
2) What should be the ajax part? Can you give me an example?
The Grails 2.0.4 documentation for validation shows you how to display error messages at the top of the page and how to add a css class to an element if a field is invalid, but it doesn't tell you how to display the error message next to the fields themselves, something like this:
-----------------------
Name: | | You must enter a name!
-----------------------
How do you retrieve the specific error message for an invalid field and then display it next to the field it's for?
Actually, the documentation does show how to do this, it just isn't overly clear that this is what they mean:
<g:renderErrors bean="${book}" as="list" field="title"/>
If you specify the field attribute, it will only render error(s) for that field. So then it is just up to you to write the HTML accordingly.
<input type="text" ... /> <g:if test="${bean.hasErrors}"><g:renderErrors bean="${book}" as="list" field="title"/></g:if>
It can get as simple or as complicated as you would like it and while I generally like grails plugins, this just seems simple enough to do without one and you have more control over the markup.
I use the Grails Fields plugin to do this, and it works a treat.
It makes it easy to create default templates for form field rendering. For example I have the following in grails-app/views/_fields/default/_field.gsp:
<%# page defaultCodec="html" %>
<div class="control-group${invalid ? ' error' : ''}">
<label class="control-label" for="${property}${index ?: ""}">${label}</label>
<div class="controls">
<%= widget.replace("id=\"${property}\"", "id=\"${property}${index ?: ""}\"") %>
<g:if test="${invalid}"><span class="help-inline">${errors.join('<br>')}</span></g:if>
</div>
</div>
As you can see from the HTML the errors are displayed inline. Here is part of my login form:
<g:form controller="home" action="login" >
<f:field bean="user" property="email"/>
<f:field bean="user" property="password">
<g:field type="password" name="${property}" value="${value}"/>
</f:field>
</g:form>
Here is the custom error in context, wrapped around username field. This will do what you want.
<dt>User Id</dt>
<dd><g:textField name="username" value="${user?.username}"/>
<g:hasErrors bean="${user}" field="username">
<g:eachError bean="${user}" field="username">
<p style="color: red;"><g:message error="${it}"/></p>
</g:eachError>
</g:hasErrors>
</dd>
I would recommend going with Jquery validation plugin. There's several Grails plugin about this, but they are a bit out-dated. Besides, I think this task is pretty simple for using another plugin.
I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.
The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindings once the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.
Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindings once?
ko.applyBindings accepts a second parameter that is a DOM element to use as the root.
This would let you do something like:
<div id="one">
<input data-bind="value: name" />
</div>
<div id="two">
<input data-bind="value: name" />
</div>
<script type="text/javascript">
var viewModelA = {
name: ko.observable("Bob")
};
var viewModelB = {
name: ko.observable("Ted")
};
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));
</script>
So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindings multiple times on the same elements, as you will get multiple event handlers attached.
While Niemeyer's answer is a more correct answer to the question, you could also do the following:
<div>
<input data-bind="value: VMA.name" />
</div>
<div>
<input data-bind="value: VMB.name" />
</div>
<script type="text/javascript">
var viewModels = {
VMA: {name: ko.observable("Bob")},
VMB: {name: ko.observable("Ted")}
};
ko.applyBindings(viewModels);
</script>
This means you don't have to specify the DOM element, and you can even bind multiple models to the same element, like this:
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
I've managed to bind a custom model to an element at runtime. The code is here: http://jsfiddle.net/ZiglioNZ/tzD4T/457/
The interesting bit is that I apply the data-bind attribute to an element I didn't define:
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
You should look at the with binding, as well as controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html