I'm developing a web application in asp(mobile).
When using the iPhone browser for entering some search text in the search text box (<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False></mobile:TextBox>) , the iPhone launches the search keypad and when I click the search button using the iPhone keypad it refreshes the full page, but clicking the search button below the textbox it is working fine.
Can anyone tell me how to fix this?
Here's my code so far:
<body>
<mobile:Form ID="frmSearch" Runat="server" Font-Name="NotSet" Font-Size="Small">
<mobile:DeviceSpecific ID="dsSearch" Runat="server">
<Choice Filter="isHTML32">
<ScriptTemplate>
<link href="StyleSheets/Common.css" rel="stylesheet" type="text/css"></link>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="Meta1" name="viewport" content="width=device-width; initial-scale=1.0;" />
</ScriptTemplate>
<HeaderTemplate>
<table cellspacing="2" width="100%">
<tr>
<td width="100%">
<uc1:Header ID="ucHeader" runat="server" />
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">
Find :
</td>
<td>
<mobile:DeviceSpecific>
<Choice="isHTML32">
<ContentTemplate>
<asp:DropDownList ID="lstGroups" runat="server" OnSelectedIndexChanged="LstGroups_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</ContentTemplate>
</Choice>
</mobile:DeviceSpecific>
</td>
</tr>
<tr>
<td align="right"> Search by:</td>
<td>
<mobile:SelectionList ID="lstSearchPreferences" Runat="server" BreakAfter=False>
<Item Selected=True Text="select" />
</mobile:SelectionList>
</td>
</tr>
<tr>
<td> </td>
<td>
<mobile:SelectionList ID="lstSearchOptions" Runat="server" BreakAfter=False>
</mobile:SelectionList>
</td>
</tr>
<tr>
<td> </td>
<td>
<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False>
</mobile:TextBox>
</td>
</tr>
<tr id="trContractorFilter" runat="server" visible="False">
<td align="right">
<mobile:Label id="lblContractorFilter" BreakAfter=False Runat="server" Visible="True" >
Results:
</mobile:Label>
</td>
<td>
<mobile:SelectionList ID="lstContractorFilter" Runat="server" BreakAfter="True" Visible ="True" >
<Item Selected="True" Text="Active Permits" />
<Item Text="All Permits" />
</mobile:SelectionList>
(your permits only)
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<mobile:DeviceSpecific>
<Choice="isHTML32">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Search" UseSubmitBehavior=true OnClick="BtnSearch_Click"/>
</ContentTemplate>
</Choice>
</mobile:DeviceSpecific>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<mobile:Label ID="lblError" Runat="server" Font-Bold="True" ForeColor=Red Visible="false" BreakAfter=False></mobile:Label>
</td>
</tr>
</table>
</HeaderTemplate>
</Choice>
</mobile:DeviceSpecific>
</mobile:Form>
</body>
In conjunction with this question and its answer using jQuery, you can write this same code in your page and do the client processing before firing the submit.
Additionally, you can use $.ajax() library functions to submit the form asynchronously(within the above discussed code block and not firing the form.submit() at all), which will eliminate any page refresh (no matter from where the form submit event is fired.)
<form id="hello-world" action="sayhello">
<input type="submit" value="Hello!">
</form>
You can attach an event handler like this:
$('#hello-world').submit(function(ev) {
ev.preventDefault(); // to stop the form from submitting
/* Validations go here */
//this.submit(); // If all the validations succeeded
$.ajax({
url:'your_form_target',
data:formData,
success:function(data,textStatus, jqXHR){
}
});
});
Set the Action attribute of mobile:Form to #.
That should cancel the default postback action of the form, which is executed when the Search button on the keyboard is hit.
Ref
By default ASP.NET controls make full page postback, to send page data to the server.
For handling AJAX request on asp.net you should use an ScriptManager and UpdatePanel controls or using a client side mechanism like jQuery AJAX.
The reason is that your search BUTTON isn't actually firing the form submission, it's firing a JS function: onClick="BtnSearch_Click"
BtnSearch_Click is probably preventing the default action (Submitting the form and reloading the page) from occurring which is what you need to do to your form's default submit action.
I'm not familiar with ASP, so i'm probably way off the mark but you should be able to put a
onSubmit="Btn_Click"
on the form, which the "search" button on iOS will trigger.
Related
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</form>
I have a question regarding the magento order emails.
I have created my own order template by loading the default template and modifying it. When i take a look via the 'preview template' button on there, the email appears without order information (of course) but with every styling etc.
However when my customer gets the email it is pure text with no styling at all.
What could i have been doing wrong
Idk if it helps but here is my email template:
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style='background: #fff' class="email-heading">
<h1 style='color: #68883e;'>Thank you for your order</h1>
<p>Your order is being process right now</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3 style='display: inline; float: left'>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p style='display: inline; float: right'>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details">
<h6>Client:</h6>
<p><span class="no-link">{{var order.getclientfirstname().format('html')}}</span></p>
</td>
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table><!-- asd-->
{{layout handle="sales_email_order_items" order=$order}}
{{template config_path="design/email/footer"}}
You shouldn't use the CSS classes to stylize the templates.
Also, you shouldn't use the file with the styles info, that is located anywhere else, as they are not supported by the majority of the email services.
Instead, you can directly use the attribute tags (to implement the stylazation) or use the styles right in the email code (using the tag <style>)
And here is the list of tags you can use:
https://www.campaignmonitor.com/css/
I am unsure about doing simple crud operation with spring and freemarker.This is what I tried to do.
springTag.ftl
<!DOCTYPE html>
<html xmlns:sec="http://www.springframework.org/security/tags" >
<head>
......
<#import "/spring.ftl" as spring />
..........
<head>
......
</head>
<body>
<#fragment.header/>
<form action="/listController/springTag" method="post" >
<#spring.bind "student" />
<table>
<tr>
<td>Name:</td>
<td><input path="student.name" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input path="student.age" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save Changes" />
</td>
</tr>
</table>
</form>
........................
</body>
How do I get the values in controller ? I have specified the model attribute as student . I am a newbee here . Can someone help ?
I found the answer.
<form action="/listController/springTag" method="post" >
<#spring.bind path= "student" />
<table>
<tr>
<td>Name:</td>
<td> <#spring.formInput "student.name" /> </td>
</tr>
<tr>
<td>Age:</td>
<td><#spring.formInput "student.age" />
<#spring.showErrors "student.age","error" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save Changes" />
</td>
</tr>
</table>
</form>
This was the change I made.
Iam using ajax accordion. Is it possible to add an ajax accordion inside another accordion.
I tried adding this, but the accordion inside is not loading(not getting displayed)
<ajax:Accordion ID="accordionCountry" HeaderCssClass="headerStyle marginUpDown" HeaderSelectedCssClass="headerSelectedStyle" ContentCssClass="contentBackground" runat="server" SelectedIndex="-1" FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None">
<HeaderTemplate>
<asp:Panel ID="pnlShowCategory" runat="server" CssClass="cursorPointer categoryPanelBackground marginUpDown">
<table cellpadding="0" cellspacing="0" width="98%">
<tr>
<td align="left">
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>'
CssClass="paddingLeft"></asp:Label>
</td>
<td align="right">
<asp:Image ID="Image3" runat="server" ImageAlign="Right" Height="20px" CssClass="verticalAlignMiddle" />
<asp:HiddenField ID="hdnCategoryId" runat="server" Value='<%# Eval("CategoryId") %>' />
</td>
</tr>
</table>
</asp:Panel>
</HeaderTemplate>
<ContentTemplate>
<ajax:Accordion ID="accordionCountry1" HeaderCssClass="headerStyle marginUpDown" HeaderSelectedCssClass="headerSelectedStyle"
ContentCssClass="contentBackground" runat="server" SelectedIndex="-1" FadeTransitions="true"
SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40"
RequireOpenedPane="false" AutoSize="None">
<HeaderTemplate>
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnl" runat="server" CssClass="cursorPointer categoryPanelBackground marginUpDown">
<table cellpadding="0" cellspacing="0" width="98%">
<tr>
<td align="left">
<asp:Label ID="lblSubCategoryName" runat="server" Text='<%# Eval("SubCategoryName") %>'
CssClass="paddingLeft"></asp:Label>
</td>
<td align="right">
<asp:Image ID="Image3" runat="server" ImageAlign="Right" Height="20px" CssClass="verticalAlignMiddle" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:Accordion>
</ContentTemplate>
</ajax:Accordion>
try to use jQuery for accordion, it's better, check below link out :
click run after you click the link below
(function($) {
var allPanels = $('.accordion .dd').hide();
$('.accordion .dt a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
Check This
I have displayed a table using struts iterator tag. Now every row has an edit link at the end. I need to be able to send that row into action when the edit button is clicked .
But I am unable to understand how to do that. I have
<s:form action="/execute" id="frm" name="frm" method="POST">
<table style="width: 800px; ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions </th>
</tr>
</thead>
<s:iterator value="listToIterate" var="row" status="stat" begin="0" >
<tbody>
<tr>
<td><s:property value="ID" /></td>
<td><s:property value="Name" /></td>
<td><s:a href="#" onclick="document.forms['frm'].submit();">
edit<s:param name="Name" value="%{#row[2]}"/></s:a></td>
</tr>
</tbody>
</s:iterator>
</table>
</s:form>
Using the param tag I want to set the row as a parameter so that I can retrieve it in my action . How do I do this ?
Assuming your form is displaying id's correctly... then substitute your s:a with one following this form:
<s:a namespace="/yournamespace" action="the-edit-action">
edit<s:param name="ID" value="ID"/>
</s:a>
I would rather ID be called id. the-edit-action will need a getter and setter for id.