How to remove Dojo Dijit from javascript call
How can I change the following code to use just a html select we dont want to use dijit or dojo.. Can someone please help us out
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "borough",
widgetType : "dijit.form.Select",
widgetAttrs : {
promptMessage : "Enter Borough",
required : true,
onChange : function() {
Spring.remoting.submitForm(
'submit',
'member',
{_eventId: 'loadSchools', fragments:'contents'}
);
return false;
} }}));
</script>
Delete the Dojo stuff and repace it with plain old pure Java Script: onchange='this.form.submit()':
<form ...>
<select name='someField' onchange='this.form.submit()'>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</form>
Related
can one help on how can i submit the form to search page script on index page and return the results of search script on specific DIV id search_results we out going to the search.php or refresh the index page using AJAX onClick
Am not good in Ajax but i try my best to come out with the following code which does what am looking for but is loading the page we out clicking anything i need a user to trigger the event when he/she enters what they are looking for? Any answer or suggestion is greatly appreciate
<script language="javascript" src="js/jquery-8.js"></script>
<script language="javascript">
var grbData = $.ajax({
type : "GET",
url : "search_m.php",
data : "q=",
success: function (html) {
$("#more-info").html(html);
}
});
</script>
<div id="more-info"></div>
I wish the above code to use this following htm form
<form method="get" style="width:230px; margin:0 auto;" id="find">
<input type="image" src="images/searchthis.png" id="search_btn">
<input type="text" id="search_toggle" name="q" placeHolder="type to start searching">
</form>
Add a click event to the search_btn element.
$('#search_btn').click(function(e) {
e.preventDefault();
$.ajax({
type : "GET",
url : "search_m.php",
data : $('#search_toggle').val(),
success: function (html) {
$("#more-info").html(html);
}
});
HTH.
i am a newbie programmer.I am stuck for two days with a simple code.I try to use jquery form plugin for submitting a form to another page and get a feedback from that page.The problem is the plugin is not working.the form is submitted as normaly without feedback.Here is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='submit' id='sub'>
</form>
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Here is my ajaxcall.php page code
if(!empty($_FILES['picture']['size']))
{
echo "<img src='images/197.jpg'>";
}
Expectation was the echoed image would feddback but the page is simply redirected to ajaxcall.php page.ajaxForm() function is not working.But why?please help.Thanks in advance.
Just replace your submit button for a normal one, because you are already submiting the form programatically from your click handler, so replace your following html:
<input type='submit' id='sub'>
for this one:
<input type='button' id='sub'>
use these codes instead of your script codes. sorry for the late answer
$(document).ready(function(){
$("#sub").click(function(){
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Using Spring Webflow and Dijit it looks like I can only add one Decoration per element (field)?
I am working on a Spring Webflow project and I was loading a list of schools once the user selects a Borough from a dropdown. The form was working great until I added a dijit.form.Select widgettype to it. Please look at the code below.
Can I use both?
The Issue I am having is on the Spring MVC side the bean now has the value "borough" in the borough field and NOT the value the user entered!
<form:select path="borough" id="borough" >
<form:option value="UNKNOWN" label="Unknown" />
<form:option value="X" label="Bronx" />
<form:option value="K" label="Brooklyn" />
<form:option value="M" label="Manhattan" />
<form:option value="Q" label="Queens" />
<form:option value="R" label="Staten Island" />
<form:option value="O" label="All Other Schools" />
</form:select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "borough",
widgetType : "dijit.form.Select",
widgetAttrs : {
promptMessage : "Enter Borough",
required : true }}));
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "borough",
event: "onChange",
formId:"member",
params: {fragments:"body", _eventId: "loadSchools"}}));
</script>
I fixed the issue. I removed the Spring.AjaxEventDecoration call and changed the Spring.ElementDecoration to the following:
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "sex",
widgetType : "dijit.form.Select",
widgetAttrs : {
promptMessage : "Enter Sex",
required : true,
onChange : function() {
Spring.remoting.submitForm(
'submit',
'customer',
{_eventId: 'sexchange', fragments:'contents'}
);
return false;
} }}));
</script>
I am not 100% clear on why the Ajax call did not work but I have my project working with this code now!
Can anyone tell me why this happens.
The following code works perfectly, I get the datepicker in German:
<input id="foo" type="text"> pick it
<script>
$(function() {
$( "#foo" ).datepicker();
$.datepicker.setDefaults( $.datepicker.regional[ "de" ] );
});
</script>
But the following code doesn't work (I get the datepicker in Japanese):
<input id="foo" type="text"> pick it
<script>
$(function() {
$( "#foo" ).datepicker();
$( "#foo" ).datepicker( $.datepicker.regional[ "de" ] );
});
</script>
Here are my include files :
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js
Side note. According to the docs http://jqueryui.com/demos/datepicker/ it should work. Can anyone reproduce this?
If you your regional code is not recognized by the plugin it sets japanese...
http://jsfiddle.net/IrvinDominin/rGpCE/1/
I reproduce it; you can change your code in this way:
$(function() {
$("#foo").datepicker();
$("#foo").datepicker("option", $.datepicker.regional["de"])
});
Updated fiddle: http://jsfiddle.net/IrvinDominin/rGpCE/2/
I am using Spring 3.0.5, Webflow 2.3.0 and Spring JS for decorating.
One of my forms has the following code:
<form:select path="selection">
<form:option value="" label="Please select"></form:option>
<form:options></form:options>
</form:select>
<noscript>
<button id="btnSelect" type="submit" name="_eventId_dropDownSelectionChange">Select</button>
</noscript>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
widgetType : "dijit.form.Select",
widgetAttrs : {
forceWidth : true,
missingMessage : "<s:message code="NotEmpty" />",
}
}));
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId : "selection",
formId : "templateModel",
event : "onChange",
params : { _eventId: "dropDownSelectionChange" }
}));
</script>
The intention is to render a second part of the form depending on what is selected in the dropdown. This is to be achieved either via an AJAX call on the onChange of the dropdown, or in the case of noscript - the pressing of the 'Select' button.
The noscript side of things works. I select something in the dropdown, press 'Select' and the rest of the form is rendered on a refresh.
However, the AJAX call does not have the just-selected value in its request. It's as if the AJAX call happens before the Dijit component has updated its representation. Are these components compatible in the fashion I am using them?
I can get it to work if:
I don't decorate the component as a Dijit component and instead just normal dropdown with an onclick AJAX decoration.
I put the AJAX call on a button instead of on the Dijit onChange
Faced the same issue and the workaround for it is setting the selected value in a hidden field and Spring.AjaxEventDecoration takes care of the rest.
<input id="vehicleType" name="vehicleType" type="hidden" />
<select id="selectVehicle">
<c:forEach var="vehicle" items="${vehicleTypes}">
<option value="${vehicle.type}"><fmt:message key="${vehicle.description}" /></option>
</c:forEach>
</select>
</p>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : 'selectVehicle',
widgetType : "dijit.form.Select",
widgetAttrs : {
value : "${vehicleType}",
onChange : function(newValue){
document.getElementById('vehicleType').value=dijit.byId('selectVehicle').get('value');}
}
}));
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId : "selectVehicle",
formId : "quote",
event : "onChange",
params : {
_eventId : "dropDownVehicleSelectionChange",
fragments : "body"
}
}));
</script>