While it does seem this would have been asked a million times no matter of search phrasing seems to locate the exact issue. So, another question for the "pros". Opening a dialog is relatively easy, yes. I created a sample page to test the code and make sure it works, and it does. Then I added an alert() to the click event and whoa! its not recognizing the click but it will on the sample page. the click event...
$( "a#newDialog" ).click(function() {
$( "#dialog" ).dialog('open');
alert('Button Clicked');
return false;
});
The difference between the sample page and the actual page is the link itself
<a name="node02" id="newDialog" href="#">OpenDialog</a>
What I've narrowed down is how the link arrives on the page. In the sample page it is static. In the real page it is included through an ajax call fetching a json file that has the markup for the link. So it has to be something to do with being unable to access the dialog functions. Is this correct? and how could I go about making this work? While we are at it I need to know how to get the name="node2" from the link and include it into the dialog for an ajax call.
Basically your problem is that when you assign your click handler, the link doesn't exist so it doesn't "bind" to that link and is effectively useless. You need to use jquery 'on': https://api.jquery.com/on/
Let's assume your link is contained in a parent element #parentContainerId that exists in the DOM when you assign your click handler. In this case, you can use delegated events as described in the link above.
$( "#parentContainerId" ).on('click', 'a#newDialog', function() {
$( "#dialog" ).dialog('open');
alert('Button Clicked');
return false;
});
Related
I have filter-from with ajaxSubmitButton.
CHtml::ajaxSubmitButton('Show',Yii::app()->createUrl('office/ajaxFilter'),array('update'=>'#office-install'),array('id'=>'filterSubmit'))
And i want to submit it on pageLoad (to recive data using default filter values). How to trigger click on ajaxSubmitButton?
using
$(document).ready(function () {
$('#filterSubmit').trigger('click');
}
raise redirect.
If I understand your problem correctly, you need to trigger the click on #filterSubmit element to run some actions associated with it, but without having the page following the regular click, if so:
UPDATE YOUR CODE TO THIS:
$(document).ready(function () {
// bind a click event to the button
$('#filterSubmit').bind('click', function(e) {
// the browser from following the click
e.preventDefault();
});
// trigger the click on the button
$('#filterSubmit').trigger('click');
// unbind the click event to allow the normal usage of that button
$('#filterSubmit').unbind('click');
}
This assumes that you have some click events binded to the #filterSubmit... If that is not the case, perhaps a more elaborated question cold allow us to help you out!
EDITED
By the comment you've just post, you can do something like:
YOU CODE (with a minor fix):
$(document).ready(function(){
$('#filterSubmit').trigger('click');
}); // was missing ); here
WITH Yii Framework
<?php
// the script string
$ourscript = "$('#filterSubmit').trigger('click');";
// Yii’s registerScript
Yii::app()->clientScript->registerScript(
'filtersubmitclickscript',
$ourscript,
CClientScript::POS_READY
);
?>
This topic has been covered many times here:
https://stackoverflow.com/search?q=click+trigger+jquery
You might get issues in several browsers with the trigger because of security restrictions.
I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});
I am developing a web-page in PHP that needs following functionality:
1. When User click on "Say Thanks" it should be changed with "Done!".
2. At the same time I want to call an action in indexController.
3. At this time I want to show "loading...."
4. The current page has a lot of dynamic contents that should also not change.
Please suggest me what should I do to complete above tasks......
I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate action, ofc). Then I use jQuery for the AJAX magic:
$(function() {
$("a.CommentsListBtn").click(function() {
var tmpHref = $(this).attr("href");
var tmpLayer = $(this).parent().children("div.CommentsList");
tmpLayer.load(tmpHref, function() {
tmpLayer.stop().slideDown("medium");
});
return false;
});
});
I hope this helps.
Learn to use JQuery, JQuery UI. It isn't that hard! What I think you need to learn is the following for your problem:
.click()
.html()
jQuery.get()
I Have a PHP page that is like this:
Here is the Schematics:
http://img233.imageshack.us/img233/4895/13423274.jpg
In DIV 1 And DIV 2 i made Ajax calls for Content. The Ajax Calls Are made from the main Page.
If i want to make a call From DIV 1 to change DIV 2 it doesnt Work =/
I Tried:
document.getElementById('div2').innerHTML = data;
Can Anyone Help Me? Thankyou!
An id cannot start with a number, so that could lead to problems.
Apart from that it depends on where your javascript is located and how and when you attach it to your event handler.
If the javascript is included in the code that is loaded in DIV 1, there shouldn´t be a problem, but if it already is on the page, you need to attach it to the newly loaded DIV 1 as soon as it´s loaded.
See for example the jQuery .live() function documentation for a detailed explaination of what I mean.
So in DIV1's content you have some links that, say, want to load content in to DIV2? What you'd need to do then is add event listeners to the links in DIV1 so that when they're clicked they'll created AJAX calls that load content into DIV2.
I'd recommend using jQuery (http://jquery.com/) and you can do something like this:
// getting the content into DIV1
$( '#div1' ).load( '/path/to/backend.php', function()
{
// the ajax request is complete, so let's add listeners to the a tags in DIV1
$( '#div1 a' ).click( function()
{
// this clears DIV2's content
$( '#div2' ).empty();
// and now we load some ajax by getting the href of the a tag and passing that to our backend
$( '#div2' ).load( '/path/to/backend.php', { page: $( this ).attr( 'href' ) };
});
});
You can read more here: http://api.jquery.com/load/
Here's a pastebin link to my entire jQuery code. [ http://pastebin.com/w57ma5Gx ] The "Thumbnails" section was working fine before I added the ajax sections. Anyone can help me with why it quit working? Thanks!
Just use a .live click handler on your thumbnails, which I assume are getting replaced by your ajax call, instead of the 'classic' click handler:
$("img.thumbs").live("click", function()
{
var imgLink = $(this).attr("src");
$("img#spotlight").attr("src", imgLink);
});
That way, you will attach a click handler "for all elements which match the current selector, now and in the future".