I have a modal plugin on my page that shouts on $(document).ready but i also have another function (innerHTML) which puts the <a> 5-10 seconds after the page has been loaded, this way the modal doesn't work cause it's only working on the code that was there before it has been loaded.
I was thinking about making a function that will "click" on an existing <a> can it be done?
basically i need that when the <a> will appear it will open up the modal instead of going to chat.php
<a href=\"chat.php\" class=\"iframe\">
any help?
If you use bind method, or directly use onclick on your selectors, it will attach event to that specific control only if selector has results. Try to do same thing using live method, it will remember your event attachment even if your selector doesn't have any results, and if same kind of control is added later on, that event is automatically bonded to that control.
for example, if you are using
$('#btnSubmit').click(function(){ ... ); in document.ready replace it with $('#btnSubmit').live('click',function(){...}); this will fire click event even if you add btnSubmit after page load.
Related
I want to map a tap event to a function that changes the data-theme of a specific element in my document. It looks something like this:
$(document).delegate("#item1", "tap", function() {
$("#item1").attr("data-theme", "e");
});
So far, it kind of works correctly. In the source code I can see it changing the attribute. However, it doesn't get re-rendered on the document and everything appears to the stay the same. Do I have to reload the document or is there a way to make it dynamically update?
First use .on and vclick instead of delegate and tap.
You can read on vclick here, read on .on here
You need to trigger refresh event, than jquery mobile will apply styling to that element again, for example if you change a list view, you can do this
$("#listview").listview('refresh')
In case you want styling changed on an element that has no refresh event, you can trigger page create event on the whole page, that will refresh everything.
$('#pageid').trigger('create')
Check here to see which elements have refresh event
I'm trying to use the jQuery Plugin SelectBoxIt, but my content is loaded by Ajax, and I'm not getting it to work.
I'm using Grails and I don't wanna put inline code, so I've tried to load it with the .on() jQuery method, but I can't get it since I don't want to put an event, I just want it to load when my content loads, and I can't find another solution.
I'm trying to do something like this:
My page calls a remote link:
<g:remoteLink controller="strategy" action="index" update="content-box"></g:remoteLink>
Then, ALL my HTML selects must trigger the plugin and turn from normal selects to the ones the plugin provides:
$(document).on('click', 'select', function(){
$('select').selectBoxIt()
})
But I don't want to trigger them with the click event, I want them to trigger right when the page is called.
Since my content is not added when the first page loads, I thought the .on() method was the right choice, but it makes me put an event, and I want to trigger when the page loads()
Thanks in advance.
Maybe read this, http://api.jquery.com/load/ and http://api.jquery.com/jQuery.ajax/. Sorry I can't be of more help.
I have a modal window called kmodal, which has some links in it. When i click one link, it provides me with an accept button. Now when i click this button, i have to bring my jsp within this modal without closing it and i have to get rid of other links without disturbing the lay out. How can i achieve this ?
I tried this one :
jQuery('#button').load('myJSP', function() {
jQuery(this).show();
But this does not work.
Can any one suggest any ideas here ?
You just need to do load without the callback function - and you don't want to load the jsp inside your button.. You want it in the modal. You can read more about .load() here
jQuery('yourmodalcontainer').on('click','#button',function(){
jQuery('yourmodalcontainer').load('myJSP');
// this will load your jsp into the modal
});
My example uses delegation as I don't know how/when your button is created
You need to use delegation when your elements don't exist in the dom at the time of binding.. So I'm actually not sure when your modal or how it's created also.. It's best to bind to the closest parent element that is static and available at dom ready.. but to be safe you can bind it to the body
jQuery('body').on('click','#button',function(){
I am having anchor tag in my page. I like to trigger click event onload . Which means I wanna open this page "http://XXXXX.com" with new tab. Because I don't wanna popup blockers. Is there anyway to do this?
anchor attrs are given bellow
id="add_redirect"
href="http://XXXXX.com"
target="_blank"
Yeah, you can use a click event called onLoad(). Just use the setTimeout() method in jquery. It will call a click function without clicking it. Here is an example:
$("document").ready(function() {
setTimeout(function() {
$("#add_redirect").trigger('click');
},10);
});
This will work for you when the page start to load and the time delay is 10ms which is negligible.
Syntax has been corrected.
Try adding the following code in the page load
document.getElementById('add_redirect').click();
Using JQuery you can do that pretty easy. The earlier posted solution also work of course.
$(document).ready(function(){
$("#add_redirect").trigger('click');
});
TRY DEMO
If your goal is to bypass pop-up blockers on page load, triggering the click event synthetically probably won't work. Browsers are smart enough to know when a click is user-generated vs. when you've called the click function on the DOM element (on those browsers were that even works). Examples: http://jsbin.com/avibi3/3, http://jsbin.com/avibi3/4
Using jQuery's trigger mechanism certainly won't do it, because it doesn't really trigger a click event at all; it just fires the handlers that jQuery hooked up (edit: and, apparently, ones defined via an onclick attribute — see Sukhi's answer — but not ones attached via addEventListener). If that's what you want to do, Sukhi's answer shows you how, although I always say: If you want code to be run from two different places, put it in a function, and call that function from two different places (rather than putting it in a click handler and then simulating a click just to run the code). There are valid use cases for trigger (mostly relating to integrating with third-party scripts), but for running your own code from two different places, it's a symptom of a design problem.
I have a site with a few containers that need to load content dynamically via AJAX.
Most of the links inside of the containers actually load new data in that same container.
I.E: $("#navmenu_item1").click(function() { $("#navmenu").load(blah); });
When I click on a link, lets say "logout," and the menu reloads with the updated login status, none of the links now work because I would need to add a new .click into the callback code.
Now with repeated clicks and AJAX requests I am not sure how to move forward from here, as I am sure nested callbacks are not optimal.
What would be the best way to do this?
Do I include the .click event inside the actual AJAX file being pulled from the server, instead of within index.php?
Or can I somehow reload the DOM?
Thanks for the help!
You're looking for the .live function, which will handle an event for all elements that match a selector, no matter when they were created.
Since you're reloading a particular element, you can store the event listener there using .delegate() like this:
$("#navmenu").delegate("#navmenu_item1", "click", function() {
$("#navmenu").load(blah);
});
This works by listening for the click to bubble up to the #navmenu element and executing any handlers that match the selector. The .delegate() format is .delegate(selector, event, handler).
Since you're loading inside #navmenu, the event handlers on that actual element won't get blown away like they do on the children that are replaced inside, so the clicks will now work for current or future elements inside #navmenu.