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.
Related
Will try to keep this simple so its not too much reading
I have a simple page with the following ...
$divid = 'append_here_$x;
$clickme = 'click_$x';
<div id='$clickme'>Click Me</div>
<div id='$divid'></div>
Then , I have a separate php file that builds content in a while loop generating a unique id for each div.
while ...
$imgid = 'imgid_$z' ...
<div id='$imgid'>This was appended</div>
Finally, I have this just for testing and keeping things short
$( "[id^='imgid_']").on( "click", function() {
alert('you clicked me');
});
This above works fine for the most part. If you were to click on click me, it will do ajax call and a post against the file with the while loop in it, return data and append it inside the append_here_ div. The problem is the new appended data that also has an id so yo can click will not respond to the simple click.
The way you link the click event to the elements of the page will not work for elements added later.
You are linking the event to the elements present by the time you define the click events, but if you add items later, they won't have the event on them. You could do:
$(document).on('click', '[id^="imgid_"]', function() {
alert('you clicked me');
});
That way, the event will be on the document, which is present at the startup, and everytime you click, it will check the selector (second parameter), so the new elements will respond to the click.
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;
});
I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?
So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.
I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.
An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.
More specifically it looks like this:
$(document).ready(function() {
$('.rating').click(function() {
$('.rating').removeClass('selected');
ratingClick(this);
});
});
function ratingClick(that) {
console.log(that.id);
if (that.id == 'rating4' || that.id == 'rating5') {
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
$('#questions').submit();
} else {
$('#getMore').fadeIn();
$(that).toggleClass('selected');
}
}
$(document).ready(function() {
$('#submit').click(function(){
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
What you want is the jquery post function: http://api.jquery.com/jQuery.post/
Make sure your data is JSON.
$("#formdiv").click(function(){
$.post("somepage",{ yourformdata} );
$("#formdiv").replacewith("Thanks for filling out the form!");
});
You can use the replaceWith function to replace the desired content with the thankyou message.
Alex,
from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.
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()