I have an Asp.NET website being written in C#. There is a DataGrid () that has three columns of buttons (). I an using jQuery UI to redesign site and I wanted to style the buttons in this grid. After finding no way to do it with HTML/ASP markup, I decided to use a jQuery selector to set the style. This works to style the buttons, but in IE 8, when I hover over a button, the rest of the buttons disappear and they don't come back until I refresh the page. My javascript looks like this:
$('input[type~="submit"]').button ();
$('input[type~="submit"]').css ('font-size', '10px');
Any help would be greatly appreciated.
The issue was my lack of a DOCTYPE declaration. Making it strict fixed the issue.
Related
I have a current page which uses JqueryUIHelpers to render JQuery UI DatePicker.
I've followed the tips on:
JqueryUIHelpers - Getting Started
Everything was working fine until I started moving the codes to a partial view.
The datepicker is no longer rendering on click.
I've read around that the same issue happens with normal JQueryUI usage, and I should move the JavaScript that renders the datepicker to the base view (something like $('#date').datepicker()).
However, the JQueryUIHelpers code is like:
#Html.JQueryUI().Datepicker("date")
Can I know if there's anyway to get it working?
Thanks to Kartikeya's suggestion, managed to get the datepicker working.
First I have the DatePicker defined:
#Html.JQueryUI().Datepicker("date")
and in the partial view's document.ready() function, I re-initialized the DatePicker once more:
$('#date').datepicker();
and now everything's working fine.
edit:
thanks to Kartikeya's suggestion again. Including the JQueryUI file in the partial view will eliminate the need to re-initialize the DatePicker once more in the document.ready() function block.
What I did was to include the line:
#Scripts.Render("~/bundles/jqueryui")
in my partial view and then everything clicks.
By the way, now I know "what to do to get it work", can I know "why does it work this way"?
Well i m explaining your problem in answer section because there is no proper space in comments section.
Yes many people think that this might be a bug in partial view in asp.net mvc but it is not so if we write #Html.JQueryUI().Datepicker("date") then somewhere internally the datepicker initialize same way as :
$(document).ready(function(){
$('#date').datepicker();
});
even if we are not required to write above jquery code but datepicker initialize this way only,so this is the case if we use datepicker in views but if we use datepicker in partial view then scenario changes because partial views are generally used for dynamic content for ex :- if we want to change some html dynamicaly then we use partial view and the dynamic html returned by partial view is displayed inside view,so here the problem arises because for partial view no document.ready() event fire to initialise the datepicker so this problem occurs and my two comments and your two answers can solve it.In above lines i m again and again writing dynamic html because this problem is because of this dynamic html only in order to overcome this we can also use event delegation i.e .on() in jquery or intialize datepicker as(give all datepicker textboxes a class say 'textbox') :
$('body').on('focus',".textbox", function(){
$(this).datepicker();
});
Thanks..!!
I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();
I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
Im looking to extend the jquery tabs to add next and previous buttons - which i have done using the show event. The problem is that its a big chunk of code added to that event for each page that needs tabs and these buttons. How i go about making it a reusable component?
David
Write a jquery plugin to wire your tabs up by convention. Here's a tutorial: http://docs.jquery.com/Plugins/Authoring
Decorate your tab list with something like , then have your plugin pick up on ul's with class "scrollable". Write all your logic in there. You shouldn't need to call any function explicitly for each page.