Loading content into a container div from a button within using jquery - jquery-load

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>

Related

asp.net lock grid when checkbox selected

I have a grid that includes a checkbox control with Autopostback=yes and CheckChanged calling a routine in the vb.net code that updates the record with the checkbox value. When a checkbox is clicked it takes a second or two to run the code and return control back to the web page. I have some users that are clicking several checkboxes one after another so the program is not being called correctly and they are getting a hodgepodge of updated records. For now my solution is for them to wait until the page refreshes before they click the next one. Pretty lamo. Does anyone have any suggestions to work around this problem?
Thanks!
You could write a little jQuery function to temporarily hide your checkbox immediately after it has been checked.
Maybe extend the code below slightly to display a <div id="loading">Loading...</div> or loading .gif image to the user so that they know that your page is being processed and don't get frustrated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#" + "<%: CheckBox1.ClientID %>").change(function () {
if (this.checked) {
$(this).hide()
}
});
});
</script>
Thanks so much Dennis! Your solution finally got me learning jQuery (which I have wanted to do for some time) and helped me get it to work like I wanted.
When the grid loads all the check boxes show with their values. When one is clicked the jquery below runs and hides them all. I have an OnCheckedChanged event on the asp checkbox control that calls the program and updates the clicked record, and when the grid loads again all the check boxes show with their correct values. Totally cool!
<script src="../Scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("input:checkbox").click(function () {
$("input:checkbox").hide();
});
});
</script>

autofocus on input in bootstrap modal

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>

show the div when button clicked with css transition in asp.net

I have a web application created in asp.net. In which, I would like to show a div (which is hidden initially) when a button is clicked with a css transition.
Additional Request:
The div that is shown on button click, will have some content added to it dynamically at run time.
How this can be done?
Here is a variation of the script from #geevee which I tend to use a lot, the DIV will slide up or down with a close and open option. Note the 500 is the speed of execution in milliseonds, you can change that to what ever suits you.
$(function(){
$('#BUTTON_ID').click(function(){
if ($('#DIV_ID').css('display') =='none')
{
$('#BUTTON_ID').html('Show DIV');
$('#DIV_ID').slideDown(500);
}
else
{
$('#BUTTON_ID').html('Hide DIV');
$('#DIV_ID').slideUp(500);
}
});//end .click
});//end onload
Hope this helps
Plain Javascript:
document.getElementById('BUTTON_ID').addEventListener('click', function(){
document.getElementById('DIV_ID').style.display = 'block';
})
Alternatively, with jQuery:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});
replace BUTTON_ID and DIV_ID with real element IDs.
UPDATE:
if you want the div to be shown with transition, i'd recommend to use jQuery as following:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});
notice the .fadeIn() method, which can be replaced with .show(), .slideDown() and more. jQuery is fun.
UPDATE 2:
in order to inject dynamic content into the div, do as following:
$(function(){
$('#BUTTON_ID').click(function(){
$('#DIV_ID').html('<b>Hello, dynamic content!</b>');
$('#DIV_ID').fadeIn();
});
});
hope that helps.

Add a class to parent element when clicked with Knockout.js

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');
});

jQuery UI Button loses CSS Styling when called using $.get() and .html()

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.

Resources