I have built a form in Grails. I have used the g:submitToRemote button which dynamically creates a Html <input> tag. I want to apply a dojo style to it like to all other elements in my form like this <g:submitToRemote dojoType="dijit.form.Button" /> but the style doen't get applied. Can you help me out to figure the problem?
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
There are several things you need to check:
Are you sure the button is being parsed? Look at the HTML source and validate whether or not the HTML code of the button is still the same as the code you provided. When Dojo parses the HTML code it will usually change the HTML code to something more complex. If you don't have that complex code, your widget is not picked up by Dojo.
Did you import the correct CSS file? You need to make sure you imported the correct CSS file, for example claro.css.
Does any of the parent elements have the theme class name? If you use the claro theme (for example), you need to make sure you have the classname claro somewhere, usually in your body-tag.
EDIT:
More things to check:
Do you have dijit/form/Button in your require()? Assuming you're using Dojo 1.6 (because you're using the old dojoType) the code you need is:
dojo.require("dijit.form.Button");
Is your button loaded asynchronous or not? If it is loaded async, your node will not be parsed when your page loads. This means you have to async it manually by wrapping your button in a <div> and manually parse that div, for example:
<div id="toParse">
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
</div>
And in JavaScript:
dojo.parser.parse("toParse");
Related
This question already has answers here:
Ajax without JavaScript
(11 answers)
Closed 3 years ago.
I have read an article that combining HTML and CSS results in a touring complete language. At my work place we are trying to avoid the use of Javascript for efficiency and client demands.
Where would I start in creating a network request using CSS and HTML only?
This should work when browser has javascript disabled
ABOUT Ajax:
Ajax (also AJAX) is short for asynchronous JavaScript and XML. No JavaScript, no Ajax.
JQuery, one lib of JavaScript, can easily achieve the goal of Ajax, but when JavaScript is disabled, its' Ajax can't work any more.
ABOUT CSS:
CSS is Cascading Style Sheets, pure CSS actually control the style of your webpage, like font size and font color, not about networking request.
So, maybe you key problem is how to make a request using HTML, the answer is using HTML tags like , for example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
Sample code from W3schools.
In this example, there is only HTML/CSS in the frontend. Note the action attribute in the form tag, it's the server side path of your request to submit. Once you click the button "submit", data in input box will be sent to the specified path in server side, in this example is "/action_page.php", and the click action makes the web page achieve a request without JavaScript.
Ajax， in a sense, is also one type of contact with server (in the way of Fetch or XMLHttpRequest) like pure HTML forms, the difference between Ajax and pure HTML form is that:
In Ajax way, make a small request, like update your web account logo, needn't
to refresh and download all the web page, but in pure HTML forms you
must. And this is the point of asynchronous in the asynchronous
JavaScript and XML, i.e. Ajax.
I have created a user control. I want to use CSS classes in this, but no CSS is working here. I tried registering CSS in master page, user control. But nothing worked.
As your usercontrol gets rendered in the containing page, you can use css on it like on any other tag on your website.
The only thing you need to do is add the css file to the header of you masterpage.
When using css selectors tho, remember that the ID's of the controls on your usercontrol is not this one you should use as your css selector.
fe.
<input type='text' id='txtName'/>
in your usercontrol will be rendered to something like
<input type='text' id='ctl00_phMain_MyUserControl_txtName' />
so make sure you use the correct id to apply your style or use the class tag
I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.
My login page uses a standard button
<asp:Button ID="LoginButton" runat="server" Text="Login"
onclick="LoginButton_Click" />
linked to code behind (C#) which performs the login check.
I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this
<button type="submit" class="positive" onclick ="...">
<img src="/icons/tick.png" alt=""/>
Login
</button>
I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.
The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element
EDIT 2:
I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked
<asp:LinkButton ID="LoginBtn" CssClass="button positive"
OnClick="LoginButton_Click" runat="server">
<img src="/icons/tick.png" alt=""/>
Login
</asp:LinkButton>
Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.
I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>
The answer to your question:
if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
is yes. If you have a button like:
<button type="submit" id="submit" class="positive" runat="server">Submit</button>
The attribute you need to set is not onclick, but onserverclick. You could also do something like:
protected override OnInit(EventArgs e)
{
submit.ServerClick += new EventHandler(submit_ServerClick);
}
If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.
An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.
The property of interest if CssClass
You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.
You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.
As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.
From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
I have an issue that's been bugging me this morning. I'm building an ASP.NET webforms app that has many input forms and I'm trying to standardise how I manage validation. I would like to use the built-in validators (RequiredFieldValidator, Regex etc). My html requirements are:
Before validation:
<div class="formLine">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
</div>
After validation (in case of error):
<div class="formLine formError">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
<span class="errorMessage">Please enter some value</span>
</div>
The additional span is fine, this is achieved with the ASP.NET validation controls. My problem is adding the formError class to the containing <div>.
I'm comfortable using jQuery/DHTML to add this class, but just don't know where to hook it in. Is it possible to monitor DOM changes with jQuery - for example fire an event handler whenever a span is added as a child of <div class="formLine">?
Does anyone else have any good suggestions for dealing with this?
Thanks for reading.
EDIT: After clarification
You could write a custom function that is called by the onClick client side event. Because you are using ASP.Net validation controls you should be able to call the function ValidatorValidate(val) where val is the validator. You could then check the contents of the validators SPAN tag for your validation error and update your div tag accordingly.
Note: I'm no expert on client side validation but this should work in principal.
Further info on MSDN.
You need to declare your div as runat="server" with an id tag so you can reference it in server side code then in page load do a test for Page.IsValid which will return false if one of your validators fails to vaildate.
You can then set the class property on your div programatically. Something like:
<div class="formLine" id="divForm" runat="server">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
</div>
Code-Behind (VB)
If Not Page.IsValid Then
divForm.Attributes.Remove("class")
divForm.Attributes.Add("class", "formLine formError")
End If
i'm assuming you're looking for a way to do this on the client side, without postback.
when you use asp.net validation controls on your webform you'll notice that a script reference to WebUIValidation.js is rendered on your page. peeking into that file offers some useful info. there's a global variable in that file named Page_IsValid. whenever validation fails, that variable is set to false.
EDIT: the WebUIValidation.js script reference was prior to .net 2.0, so you can't look at that file anymore. however, the Page_IsValid variable is still there and can be used by hooking into a form submit handler. something like this
// verified that this works
$(document).ready(function() {
$('#form1').bind('submit', function(e) {
if (!Page_IsValid)
$('#yourDiv').addClass('error');
});
});