I have defined both the template and filetemplate options for the fineUploaderS3 object.
I have been able to change the look of the qq-upload-button element, by changing the div to a button, and setting it as a button after the uploader creations.
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<button class="qq-upload-button"><div>{uploadButtonText}</div></button>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
...
$('.qq-upload-button').button();
Though the button changes, and works when clicked on to add files, the files do not get shown in the list, it obviously is broken.
What is the correct way to make the Upload button use the current jQueryUI style button?
Update 1
After reading the following thread: How to assign custom css class to upload button in fineuploader?
It appeared as though the upload button would be very problematic to try to change into a normal jQueryUI button.
So I solved the problem by changing the upload button to 'display:none;', created my own generic jQueryUI button, on the clicking of my button, send a click to the hidden button.
Solution:
<button id="addFiles">Add Files</button>
...
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<div class="qq-upload-button" style="display:none;"><div>{uploadButtonText}</div></div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
...
$('#addFiles').click(function() {
$(".qq-uploader input").click();
});
Your solution will not work on IE9 and older since programmatically clicking an input element is not allowed in those browsers.
Using a button element as your upload button will not work on IE9 and below because those browsers intercept change events on button elements before Fine Uploader is able to. Also, the jQuery-UI button constructor must add some logic that intercepts events too because I needed to instantiate it before Fine Uploader. Possibly related to an earlier question regarding Bootstrap's button.
The cross-browser solution would be to first render your button as a div instead of a button, then instantiate jQuery-UI's button() on that element, then instantiate an instance of Fine Uploader with the button option set as that element. Also, with the changes I've proposed, you can do away with the template option. Fine Uploader has some logic in the default template which adds or removes its own button element based on the presence of the button option.
<h3>Fine Uploader</h3>
<div id="addFiles"">Add Files</div>
<div id="jquery-wrapped-fine-uploader"></div>
$(document).ready(function() {
// Construct jQuery-UI button
$("#addFiles").button();
// Instantiate Fine Uploader
$('#jquery-wrapped-fine-uploader').fineUploaderS3({
button: $("#addFiles")
});
});
Related
I have a link and a css hidden div:
Click me
<div class="bio">Your bio</div>
When I click the link, it shows the div. Refresh the page, and it's hidden again. I want the 'bio' div to stay open even when refreshing the page if the link was clicked and the div shown. I also want the opposite, that if I clicked the link again and the 'bio' div get hidden, to stay hidden on page refresh.
Basically, I am trying to "persist" the toggle state of the div in Laravel, and not sure how to do it.
I am using jquery for the show/hide functionality.
$('.bio-toggler').click(function(){
$('.bio').toggle();
});
Any ideas on how to do this?
Just do an AJAX POST to an endpoint within your application which sets the variable. When you're showing you're HTML, just check for that.
jQuery:
$.ajax({
type: "POST",
url: 'http://localhost:8000/api/profile/toggle',
success: function() {}
});
Controller:
public function toggle()
{
Session::set('toggled', true);
}
View:
#if (Session::get('toggled'))
Click me
<div class="bio">Your bio</div>
#endif
This is just boilerplate. You would probably have to tune it, like check if there is an older value to toggle in PHP, etc.
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I am using Angular UI Bootstrap to create a popover but I am unable to find the option to add a close button inside the popover.
I customized the popover template to include the close button. But I am still unable to find a function/event to close the popover. Setting isOpen to false works for the first time as it just overwrites the function - but thereafter becomes unusable.
<button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button>
Here is the template script:
angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
I thought of writing a directive for close button to trigger the 'click" event of "POPOVER WITH CLOSE" button. But I am not sure if that's the approach to follow.
What's the correct approach to follow?
The right solution now is to specify a popover template via the uib-popover-template attribute and bind your template's close button's ng-click handler to the popover's popover-is-open property. We added this property to allow the user to "ignore" the provided trigger options (by specifying popover-trigger="none" and give the user full control over when to show and hide the popover.
You may see the updated docs (and examples) here.
I changed the tooltip and popover code.
Here is how it looks like plunker
Here is the pull request for this.
I have a page with links of class 'dialog' that generate in JQueryUI dialog when clicked. Those dialogs are created from other elements present on the page, and can contain links of class 'add_tab', that should create a new JQueryUI [tab] (http://jqueryui.com/demos/dialog/) when clicked. Those tabs load their content via Ajax and consist identical structures. This means that an 'add_tab' link in a dialog creates a new tab, which contains 'dialog' links that generate dialogs containing further 'add_tab' links, and so on.
This is the basic HTML structure:
<div id="tabs">
<ul>
<li>tab 1</li>
</ul>
<div id="tabs-1">
<p>This tab contains a popup and a direct link to a new tab.</p>
<div id="popup1" style="display:nonee;">This popup contains a link to a new tab.</div>
</div>
Using JQuery 1.7's .on() method, I have troubles with properly registering the click handler for 'add_tab' links that appear in dialogs on added tabs. I manage to register the click handlers for the 'dialog' links in newly generated tabs (so that they generate a dialog), but fail to register click handlers for 'add_tab' links that appear inside those dialogs. I've put a simplified test version online at http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm. Take, for example following scenario:
on http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm , click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will generate a new JQueryUI tab
in the the newly added tab labeled 'tabs2.htm', click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will NOT generate a new JQueryUI tab, but instead open the target in a new window
==> this illustrates how this event handler is apparently NOT registered correctly for 'add_tab' links that occur inside dialogs that are generated in newly added tabs
in the tab labeled 'tabs2.htm', click 'new tab': this will generate a new JQueryUI tab
==> this illustrates how this event handler is registered correctly for 'add_tab' links that occur directly inside newly added tabs
This is my javascript code:
// these event registrations register clicks on $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
// note: this event registration works for all such links on the original page
$('a.dialog').on('click', function(){
$($(this).attr('href')).dialog();
return false;
});
$('a.add_tab').on('click', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function(){$(this).dialog('close')})
return false;
});
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
$tabs.tabs($tabs.tabs('option', 'selected'))
.on('click', 'a.dialog', function(){
$($(this).attr('href')).dialog();
return false;
})
// this registration doesn't seem to work for <a class="add_tab"> links occurring inside generated JQueryUI dialogs inside added JQueryUI tabs
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
return false;
});
}
});
I'm nearly there! Could anyone help me out with the last event handler in the code above? Any help is much appreciated!
The idea with event delegation is to bind the event on a parent that is fixed on the page (not created dynamically). Using the selector parameter of the .on() method allows telling for which elements the event handler should be fired for.
In your code you are using event binding in two ways, event if you use .on():
first you do direct binding on the existing elements a.dialog and a.add_tab - this will only work for the links on tab1 as they are the only the ones existing at the time the code is executed, no event delegation here.
when adding a tab, you are doing event delegation on the tab container $tabs:
for the links to open a dialog with $tabs.on('click', 'a.dialog', function(){ ... }) - this works as expected because the link a.dialog are indeed within the tab container.
for the links in the dialog with $tabs.on('click', 'a.add_tab', function(){ ... }) - this won't work because when the dialog is created, the plugin moves the <div id="popup2"> at the end of the body (before </body>). So when you click the a.add_tab inside the dialog, it is not a descendant of the tab container anymore and event delegation does not happen.
Here's what I would do:
to avoid repeating the same code, declare your event handlers as variables
use event delegation on the tab container for links a.dialog and a.add_tab
when creating a new dialog, use event delegation on the dialog for the a.add_tab links it will contain
Here's the code:
var addTabClickHandler = function(e) {
$tabs.tabs("add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function() {
$(this).dialog('close')
})
return false;
};
var dialogOpenClickHandler = function(e) {
$($(this).attr('href'))
.dialog()
.on('click', 'a.add_tab', addTabClickHandler);
return false;
}
var $tabs = $("#tabs").tabs({
add: function(event, ui) {
$tabs
.tabs('select', '#' + ui.panel.id)
.tabs($tabs.tabs('option', 'selected'));
}
});
$tabs
.on('click', 'a.dialog', dialogOpenClickHandler)
.on('click', 'a.add_tab', addTabClickHandler);
Meanwhile I've come up with a workaround that just registers the event handlers once on the 'tabs' container and appends the dialog to the 'tabs' container upon creation. My initial code could thus be trimmed down to:
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
create: function(event, ui) {
$(this)
.on('click', 'a.dialog', function(){
// dialog: upon creation, move the dialog to the tab to ensure delegated event registration
$($(this).attr('href')).dialog().parent('.ui-dialog').appendTo($tabs);
return false;
})
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), $(this).attr('href'));
$('.ui-dialog-content').dialog('close');
return false;
})
}
});
I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).
For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.
Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?
Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?
Thanks!
I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application's functionality.
Button 3
And the script would simply use the href to post to your page.
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
Update
Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.
If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()
Each will work fine. But the <a> you can style with an image while <input> and <button> you cannot (the browser decides on the look).
Simply bind the click event on the button. Assuming you have this HTML:
Button 1
Button 2
...
Button 3
Here's the Javascript. The trick is to call the AJAX here, and return false to prevent the Browser from changing page.
$('a').click(function(e) {
$.get($(this).attr('href'), function(result) {
alert('AJAX result = '+result);
});
return false;
});
You could create a custom attribute on each button.
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
In your javascript
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
By doing this you can add additional attributes to extend the data stored in each button and it also makes chaning the AJAX target link very easy since it's centralised, rather than spread around multiple anchor tags.
As an alternative to Marks answer, you could use a <form> element, and have each button a submit button; either a input or button. Set the name of the element to "btn" and the value of the element to the button number.
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
The jQuery would look something like:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
If you want the submission to be a POST request, this would most likely be better. For a GET request however, Marks will probably be easier.