I have the following html code
<div class='login'><a href='#'>Log in</a> to create custom dashboard</div>
This is my jquery code
$(".login").click(function() {
$(this).children('a').removeAttr("href");
$(this).attr('class','disabledlogin');
..............
}
So when I click on "Log in" link the dialog appears and I need to disable "Log in" link. But even if I change the class attribute I'm able to click and open another login dialog. What is the problem?
You can use .unbind() to unbind the event handler.
$(".login").click(function() {
$(this).children('a').removeAttr("href");
$(this).attr('class','disabledlogin');
// unbind the click handler. it should no longer fire.
$(this).unbind('click');
});
To revert, i.e. to add back the handler, you need to separate the handler into a function and bind it when needed using $(".login").click(onLinkClick);
function onLinkClick() {
$(this).children('a').removeAttr("href");
$(this).attr('class','disabledlogin');
// unbind the click handler. it should no longer fire.
$(this).unbind('click');
}
// call this initially for binding first time
// call this whenever you need to revert
$(".login").click(onLinkClick);
Use #techfoobar suggestion:
$(".login").click(function() {
$(this).children('a').removeAttr("href");
$(this).attr('class','disabledlogin');
// unbind the click handler. it should no longer fire.
$(this).unbind('click');
}
Related
At the moment I'm working on a project that requires the submission of a form for 'voting' for specific posts. At the moment clicking on the submit button works as it should, although if the button is clicked more than once, it does exactly that - submits the POST variables more than once causing them to be able to 'vote' for the item multiple times in one set of clicks.
I've looked at every jQuery code example I can find to solve this but nothing works. It works to disable the button, but after that the redirection page that grabs the data and runs the queries returns an error as nothing has been submitted. In short, it seems to disable the button but at the same time disable the information from being submitted.
Here's my jQuery code:
$('#vote').submit(function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Any help would be great.
Thanks.
Use jquery .one
Description: Attach a handler to an event for the elements. The handler is executed at most once per element.
$(document).one("click","#vote",function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Probably your best option is to only allow a single submission and adjust the button appearance some other way:
var submitted = false;
$('#vote').submit(function(){
if(submitted) {
// cancel additional submits
return false;
}
submitted = true;
$(this).children($btn).val('Please wait...');
});
you could add an click event. Instead of using submit button use a button click event.
the code might look like this
$($button).click(function(){
$(this).attr("disabled","disabled");
$($form).submit();
});
Jquery's on and off can be used here.
for example after submission,you can completely disable the click by
$('#vote').off('click');
and then switch it back if you want by
$('#vote').on('click');
i have one link for buy credit . i want when click on link confirm show so if user click yes link direct . but in my page when i click yes or no link direct me to href link . means yes or no not difrent and link work.
<script>
<!--
function confirmbuy() {
if (confirm("Are You Sure???")) {
return true;
} else {
return false;
}
}
//-->
</script>
Buy
i test this code for submit button and work propertly but for link not work !!!
Your event handler function (defined by the value of the intrinsic event attribute) doesn't return anything. It just calls confirmbuy and then stops.
If you want to return the return value of confirmbuy then you must do so explicitly:
onclick="return confirmbuy();">
You wouldn't have this problem is confirmbuy was the event handler:
ref_to_link.addEventListener('click', confirmbuy);
I recommend reading more about addEventListener and Unobtrusive Javascript.
You need to return the result of the confirmbuy() function, otherwise the event will never be cancelled.
Buy
Inline handlers are actually put into a function, which is set as the handler for the click event. So basically your code is equivalent to:
a.addEventListener("click",function(e){
confirmbuy();
})
As you can see, this handler does not return false, so the event progresses as normal.
you need:
onclick="return confirmbuy();"
better..
Buy
Fixed and removed unnecessary code:
Buy
I'm using atk dialogURL with button false, i've some fields and added my buttons:
$f2->addSubmit();
$f2->addButton('Close')->js('click',$f2->js()->univ()->closeDialog());
if($f->isSubmitted()){
$f->update();
}
after push "Save" button my dialog don't close (I don't want it) then I click my close button dialog, but appear :
"'Changes on the form will be lost. Continue?'"
why? my data is correct saved in database. Seem that .form_changed is not updated
inside isSubmitted, you need to explicitly close the dialog:
if($f->isSubmitted()){
$f->update();
$f->js()->univ()->closeDialog()->execute();
}
By default before dialog is destroyed it checks if it's been changed. It's implemented by adding a class (form_changed) to the form tag. You have few other options. For example, you can remove the form altogether:
if($f->isSubmitted()){
$f->update();
$f->js()->remove()->execute()
}
Or:
$this->addButton('Close')->js('click',
$form->js()->find('form')->removeClass('form_changed')
)->univ()->closeDialog();
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache
I have some tabs which have been created using Javascript and Mootools, my client wants the 'next button' at the bottom of the page to be disabled, until the tabs have been read(clicked). The page is dynamic (created with PHP and MySQL) and there could be two tabs or three, depending on the set-up. I am struggling today to think of the best solution.
Any help more than welcome...
view example working on jsfiddle:
http://www.jsfiddle.net/dimitar/THMxa/
it can work with some classes and logic added to tab clicks and next click.
// fade out next button and set it to disabled, then define the event to check state.
document.id("next").store("disabled", true).set("opacity", .5).addEvent("click", function() {
if (this.retrieve("disabled")) {
alert("please view all tabs first!");
// console.log(document.getElement("div.notclicked"));
return;
}
// insert code here that goes next.
alert("allowed to run");
});
// this is pseudo - you probably already have a function that assigns events on your tabs to change
document.getElements("div.tabs").each(function(tab) {
// first tab may already be open so no click needed
if (!tab.hasClass("clicked"))
tab.addClass("notclicked");
// add click event
tab.addEvent("click", function() {
if (document.getElement("div.notclicked"))
this.addClass("clicked").removeClass("notclicked");
// check again if that was the last one, if so, enable next button...
if (!document.getElement("div.notclicked"))
document.id("next").store("disabled", false).fade("in"); // or whatever
// regular code for tabs here...
});
});
Since the number of tabs is dynamic, I'd probably use an attribute on the tab's header/label/whatever indicating that it has not been read, and then when the tab's header/label/whatever is clicked, I'd change that attribute to indicate that it had been read and then trigger a function that may enable the button depending on whether all the other tabs had been read.
I'm not a MooTools person, but IIRC it's a fork of Prototype (although it's been a while and they've probably diverged). The click handler could look something like this in Prototype:
$$('.tabClass').invoke('observe', 'click', function(event) {
this.setAttribute("data-read", "Y");
if ($$('.tabClass[data-read=N]').length == 0) {
$('buttonId').disabled = false;
}
});
...where $$ is Prototype's "search the DOM for elements matching this CSS selector" function and $ is Prototype's "get me the element with this ID". The invoke there just calls observe for each matching element (you could do this with event delegation instead), and I think observe is fairly self-evident. :-)
The code above makes these assumptions:
Your tab header or whatever has the class "tabClass".
You've created the tables with the attribute "data-read" set to "N" (e.g., <div class="tabClass" data=read="N"> or similar). The data- prefix is to be HTML5-friendly. (Yes, we're finally allowed to put any old arbitrary attribute name on elements if we want to! We just have to prefix them with data-.)
The button has an ID, "buttonId"
The button starts off disabled
Edit Or use a marker class if you prefer, all tabs start out with class="tabClass unread":
$$('.tabClass').invoke('observe', 'click', function(event) {
this.removeClassName("unread");
if ($$('.tabClass.unread').length == 0) {
$('buttonId').disabled = false;
}
});
Double-check that MooTools supports the ".tabClass.unread" selector (it really should, I'm just saying, check). Some implementations may work more quickly with class-based selectors than attribute-based ones.
You should disable the button where you send the request to load the content,
and enable it from the callback that handles the returned content.
I would add a class to the tab when it's clicked - like "clicked". Also, check if the 'click' is the last tab, so..
$('myElement').set('class', 'clicked');
then get all of the tab elements (a elements i assume) and count them.
Then get all of the tab elements with class "clicked"
If they match, they were all 'clicked'.