I have a html page using a jQuery UI Button with some jQuery script like this:
<script type="text/javascript">
$('button).button(); // sets up the jQuery UI button style
$('#btnClose').live('click',function () {
$.get('content.html', function (data) {
$('#EditCategory').html(data);
});
});
</script>
<html>
<button type="button" id="btnClose'">Close</button>
<div id="EditCategory" class="category"></div>
</html>
On the content.html page I have:
<button type="button" id="btnNewCategory">Add new category</button>
When I click on '#btnClose' the content.html is returned and the button is displayed but
the jquery ui css styling is lost. Is this because the css style is applied before the
DOM is reconstructed? If so, is there anything I can do like using .live() to ensure the
CSS gets applied?
Thanks for the help!
You'll need to apply the button styling to that content after you've inserted it:
$('#btnClose').live('click', function() {
$.get('content.html', function(data) {
$('#EditCategory').html(data);
$('#EditCategory button').button();
}
});
Unfortunately, there isn't a .live() analog for applying plugins. The technique it uses is only useful for catching and handling events.
Related
This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.
I'm trying to load content into a div using a button, like so:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
$(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>
And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:
This is the first one.<br>
<button class="load-second">Load Second</button>
Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.
Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() {
$(".load-container").load("/test-1.html", function(){
// now load-second button is available, register the click handler
$(".load-second").click(function() {
$(".load-container").load("/test-2.html", function(){
// now load-third button is available, register the click handler
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
});
});
});
});
</script>
I'm using bootstrap 3 to create a modal box. I want to have it autofocus on the input area. I tried with jQuery, but I don't know, what is the problem?
JavaScript:
$('#click').click(function () {
$('input').focus()
});
Here is a demo on JSFiddle
I've updated your JSFiddle. When using the bootstrap modal window there are a number of custom events you can use. one of those is shown.bs.modal wich runs after a modal is fully shown (and your input field is focusable). Remember that the event will be triggered on the modal, not on whatever opened the modal.
$('#myModal').on('shown.bs.modal', function () {
$('input').focus();
})
This may be hard code but add a Timeout function to focus it.
The fact is the modal isn't here yet so the browser can't focus an element in it.
$('#click').click(function() {
setTimeout(function(){
$('input').focus()
},500);
});
I am also use this code
<script>
function setFocusOnModal(){
$('#searchModal').on('shown.bs.modal', function () {
$('#q').focus();
});
}
</script>
Where #searchModal is modal div ID and #q is input element ID
Use this code in button
<button type="button" onclick="setFocusOnModal()">Open Modal</button>
I have a div with a close button on it. The close button has a function fired via Knockout.js that I would like to add a class to the parent of this button, i.e. the encapsulating div. However, in my JS file (see below) the function firing is linked to an object in an array.
HTML
<div>
<button data-bind="click: $parent.myFunc">
</div>
JS file
this.myFunc = function(e) {
// this.addClass('boo'); does not work
}
I can fire a console.log off in this function, but can't seem to manipulate this element through standard jQuery.
Knockout way of doing it would be to add a css binding to the parent and then manipulate it within your function fired by click event:
<div data-bind="css: someClass">
<button data-bind="click: myFunc">
</div>
And within your JS file:
this.someClass = ko.observable("");
this.myFunc = function(e) {
this.someClass("boo");
}
since you tagged jQuery, I assume you can use it, so:
$('button').click(function(){
$(this).parent().addClass('boo');
});
This is my first answer on here but how about looking into jQuery's .parent() api? http://api.jquery.com/parent/
I'm not familiar with Knockout.js but perhaps something like this could work..
$('button').data('bind','click: $parent.myFunc').click(function(){
$(this).parent().addClass('boo');
});
i want a anchor should act like and input type submit button.
i am using a jquery plugin library that actually uses input type submit but i have styled my buttons on anchors. i dont want to use
<input type="button">
or
<input type="submit">
i want to use anchors such as
<a href="javascript to submit the form" ></a>
and here is my jquery code where i want to use
{
var submit = $('<button type="submit" />');
submit.html(settings.submit);
}
$(this).append(submit);
}
if (settings.cancel) {
/* if given html string use that */
if (settings.cancel.match(/>$/)) {
var cancel = $(settings.cancel);
/* otherwise use button with given string as text */
} else {
var cancel = $('<button type="cancel" />');
how to use anchors instead of button.
If you want an anchor tag to act like a button just do this
<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>
<script>
$("a#fakeanchor").click(function()
{
$("#submit_this").submit();
return false;
});
</script>
Since you're using jQuery, just use $() to select the form element, and call submit on it; hook all this up to the anchor via $() to find the anchor and click to hook up the handler:
$("selector_for_the_anchor").click(function() {
$("selector_for_the_form").submit();
return false;
});
Probably best to return false; to cancel the click on the anchor.
Off-topic: But note that this makes your page completely unusable without JavaScript, as well as making it confusing even for JavaScript-enabled browsers employed by users requiring assistive technologies (screenreaders, etc.). It makes the markup completely un-semantic. But since you'd said quite clearly that this was what you wanted to do...
<a id='anchor' href="javascript to submit the form" ></a>
now you can use jquery to add an event handler
$('#anchor').click(function (e) {
// do some work
// prevent the default anchor behaviour
e.preventDefault();
})
now you can style your anchor as you wish and it will act as a regular button
And what about:
<form id="formOne">
...
link here
</form>
you can use input of type image (it works as a submit button for a form) or in jquery:
$("a").click(function(event){
event.preventDefault();
$('form').submit();
})
How do I apply jQueryUI styles to an asp:Button. Here is the problem: jqueryUI button requires you to have the following format <button>Test button</button>
When I try to use an asp button server control, <asp:Button />, asp:Button renders as <input type=button>Test button </input>
Update : I get the standard button styling that jquery provides. However, when I want to make a toolbar out of it, like in this example : http://jqueryui.com/demos/button/#toolbar, the standard asp:Button fails me....or maybe i am missing something.
Thanks in advance,
Sashidhar Kokku
You can apply the jQuery UI button to a number of different HTML elements: <a>, <input type="button"> and so on.
$(function() {
$("input[type=button]").button();
});
This will convert all <asp:Button>s on the page into jQuery UI buttons.
This is how you do it: Add the following to your initialize function:
$(function () {
//Converting asp buttons to html buttons
$('input:submit, input:reset').each(function () {
$(this).replaceWith('<button type="submit" name="' + $(this).attr('name') + '" class="' + $(this).attr('class') + '" id="' + $(this).attr('id') + '" >' + $(this).val() + '</button>');
});
//Adding button icons .....
$(".createbutton").button({
icons: { primary: "ui-icon-circle-plus" }
});
The jQuery UI button widget is capable of transforming the following button types:
<input type="button" />
<input type="submit" />
<button></button>
Since the <asp:Button> control renders the first type of HTML, you could include the following in your master page to apply the jQuery transform to all ASP.NET buttons:
$("input[type=button]").button();
You should also
$("input[type=submit]").button();
to handle submit buttons.
You can assign a style to the ASP.NET buttons, then use the style as a selector to selectively (pardon the pun) apply the jQuery button. For example, if you set the attribute CssClass="special" on the buttons you want to modify, then you would put the following jQuery in your page:
$(function() {
$(".special").button();
});
Hope that helps.
$(document).ready(function() {
$('#<%= Button1.UniqueID %>').click(function() {
// do something
});
});
I'm pretty sure jQuery UI will work fine with button input, as well any other element.
You just need to select the desired element.