I want create a loading modal while a big function dosen't finish, this modal cant be close while this function dosen't finish, how i can do that?
You should explain little more to your question for better understanding.
I think go through my given link you will get your answer for your question
Link here: loading model
visit this link
How to use bpopup
« Basic example that will bind a click event which will trigger bPopup when fired. Add a reference to the jquery core lib (newer than 1.3.x) and bPopup. Please don’t hotlink to bPopup:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script>
Markup: Add a button + an element to pop up.
<html>
<head> ... </head>
<body>
...
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
...
</body>
</html>
CSS: Hide the element you want to pop up on page load.
<style>
#element_to_pop_up { display:none; }
</style>
The magic: Bind a click event on the button which will trigger the popup.
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
OR
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup({
appendTo: 'form'
, zIndex: 2
, modalClose: false
});
});
});
})(jQuery);
Link For Demo Link here
Related
How to trigger click event in textarea?
I tried:
jquery
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').trigger('click');
});
html
<textarea id='txtid' rows='5' cols='20'></teaxtarea>
But the click is not happened. What is wrong in the code.
I tried the focus event like this
$('#txtid').focus(); //this worked
But i need to trigger a click event after getting the value to textarea.
Please help..
You have to set a click event handler first.
Edit 1: Since you try to trigger the click event within document ready, you have to declare the click event handler within the document ready event handler, even before you trigger it.
Html:
<textarea id='txtid' rows='5' cols='20'></textarea>
jQuery:
$(document).ready(function(){
$('#txtid').click(function() { alert('clicked'); });
$('#txtid').val('something');
$('#txtid').trigger('click');
});
Fiddle:
http://jsfiddle.net/j03n46bf/
Edit 2:
Since you want the event to be triggered after you get a value to your textarea, Milind Anantwar is right, you have to use the onchange event:
Same Html, different jQuery:
$(document).ready(function(){
$('#txtid').change(function() { alert('Value changed'); });
$('#txtid').val('something');
$('#txtid').trigger('change');
});
Fiddle: http://jsfiddle.net/sb2pohan/
Edit 3:
After some comments:
$(document).ready(function(){
$('#txtid').click(function() { changeDiv(); });
$('#txtid').focus(); // Set Focus on Textarea (now caret appears)
$('#txtid').val('something'); // Fill content (caret will be moved to the end of value)
$('#txtid').trigger('click'); // Click Handler will be executed
});
function changeDiv() {
// do some stuff;
}
Edit 4:
Working test.html (Tested in IE, FF, Chrome):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtid").click(function() { changeDiv(); });
$("#txtid").focus();
$("#txtid").val("value");
$("#txtid").trigger("click");
});
function changeDiv() {
$('#changeDiv').css("background-color","red");
$('#changeDiv').html("changed content");
}
</script>
</head>
<body>
<textarea id="txtid"></textarea>
<div id="changeDiv" style="background-color: green; width: 100px; height: 100px;">start content</div>
</body>
</html>
You probable need to trigger change event:
$('#txtid').trigger('change');
To see it works first define click listener, then trigger the click event.
http://jsfiddle.net/gfkjs5ps/
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').click(function(){alert("clicked");}); //define click listener
$('#txtid').click(); //click text area
});
As the documentation says, the event click/Change needs exits to that works so your Javascrtipt should be:
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').on('change', function(){
alert('hi!!!!!');
})
$('#txtid').trigger('change');
});
LIVE DEMO
For native Javascript is working for me:
document.querySelector('textarea').select();
Simply $('#txtid').click(); will trigger the click event.
I'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.
Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>
DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});
If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});
I have this simple HTML page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
$(document).ready(function () {
$('#test').click();
});
</script>
</head>
<body>
<a id="test" href="http://google.com">http://google.com</a>
</body>
</html>
I want to trigger a click event on the element called test on loading the page. The actual code is actually more sophisticated than that but this very basic example is not working. I checked the console log and there are no notices there.
You need to use to trigger the DOM element click
$('#test').get(0).click();
Use .get(), It retrieve the DOM elements matched by the jQuery object. As .click() will trigger the element click event handler. It will not actually click the element.
Using simple Vanialla JS
document.getElementById('test').click()
DEMO
.click() doesn't actually send a click event.
What .click() does is define something that happens when you click on the element.
The .click() you are triggering is correct but you are missing a click event for '#test' as shown :
$('#test').click(function(){
alert('here');
});
Now your complete jquery code is as shown :
<script>
$(document).ready(function () {
$('#test').click(); //or $('#test').trigger('click');
$('#test').click(function(e){
e.preventDefault();
alert('here');
window.location.href = $(this).attr('href'); //redirect to specified href
});
});
</script>
Your #test link should be bound to a function, eg:
$(document).ready(function () {
//do something on test click
$('#test').on("click", alert());
//click test
$('#test').click();
});
http://jsfiddle.net/ub8unn2b/
Here click event is triggered i.e. click event is fired on page load but you can not load href by just triggering the click event,for that you can use
window.location.href = "http://www.google.com";
After Bootstrap modal is shown, my app JavaScript is not working.
When I execute JavaScript from console then it is working, but my app JavaScript does not work.
Can somebody please give me advice how I can solve this issue?
HTML file:
<button type="button" class="btn btn-primary" id="save-category">Save changes</button>
JavaScript file:
var jquery = jQuery.noConflict();
jquery(window).load(function() {
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
Try to use delegate instead of event binding
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery(document).on('click', '#save-category', function() {
jquery('#myModal').modal('hide');
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
To fix this, you should register your click event to after you show your modal view:
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
// Register the event here
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
});
Also note that the load event has been deprecated in jQuery 1.8 so you might want to use jQuery(document).ready( for initialising your script code unless you need to wait for images to load.
Here's index.html:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.btn_test').click(function() { alert('test'); });
});
function add(){
$('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
}
</script>
</head>
<body>
test1
add
</body>
If I click on test1 link, it shows alert('test'), but if I click on add link then click on test, it doesn't show anything.
Could you explain it?
For users coming to this question after 2011, there is a new proper way to do this:
$(document).on('click', '.btn_test', function() { alert('test'); });
This is as of jQuery 1.7.
For more information, see Direct and delegated events
You need to use a "live" click listener because initially only the single element will exist.
$('.btn_test').live("click", function() {
alert('test');
});
Update: Since live is deprecated, you should use "on()":
$(".btn_test").on("click", function(){
alert("test");
});
http://api.jquery.com/on/
I have same problem like question I was just near to pulling my hair then i got the solution.
I was using different syntax
$(".innerImage").on("click", function(){
alert("test");
});
it was not working for me (innerImage is dynamically created dom)
Now I'm using
$(document).on('click', '.innerImage', function() { alert('test'); });
http://jsfiddle.net/SDJEp/2/
thanks #Moshe Katz
.click binds to what is presently visible to jQuery. You need to use .live:
$('.btn_test').live('click', function() { alert('test'); });
Use Jquery live instead. Here is the help page for it http://api.jquery.com/live/
$('.btn_test').live(function() { alert('test'); });
Edit: live() is deprecated and you should use on() instead.
$(".btn_test").on("click", function(){
alert("test");
});
This is because you click event is only bound to the existing element at the time of binding. You need to use live or delegate which will bind the event to existing and future elements on the page.
$('.btn_test').live("click", function() { alert('test'); });
Jquery Live
you need live listener instead of click:
$('.btn_test').live('click', function() {
alert('test');
});
The reason being is that the click only assigns the listener to elements when the page is loading. Any new elements added will not have this listener on them. Live adds the click listener to element when the page loads and when they are added afterwards
When the document loads you add event listeners to each matching class to listen for the click event on those elements. The same listener is not automatically added to elements that you add to the Dom later.
Because the event is tied to each matching element in the document ready. Any new elements added do NOT automatically have the same events tied to them.
You will have to manually bind the event to any new element, after it is added, or use the live listener.
$('.btn_test').click
will add the handler for elements which are available on the page (at this point 'test' does not exist!)
you have to either manually add a click handler for this element when you do append, or use a live event handler which will work for every element even if you create it later..
$('.btn_test').live(function() { alert('test'); });
After jquery 1.7 on method can be used and it really works nice
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("The paragraph was clicked.");
$("body").append("<p id='new'>Now click on this paragraph</p>");
});
$(document).on("click","#new",function(){
alert("On really works.");
});
});
</script>
</head>
<body>
<p>Click this paragraph.</p>
</body>
</html>
see it in action
http://jsfiddle.net/rahulchaturvedie/CzR6n/
Or just run the script at the end of your page
You need to add a proper button click function to give a proper result
$("#btn1").live(function() { alert("test"); });