Using fancy upload, trying to trigger file browser - mootools

I am using this module: http://digitarald.de/project/fancyupload/
Say for example my initialization code as follows:
this.uploader = new FancyUpload2(this.uploader_element, this.list, {
limitSize: _config.upload_max_filesize,
verbose: false,
url: this.form.action,
path: this.options.root_dir + 'libraries/fancyupload/source/Swiff.Uploader.swf',
typeFilter: {
//'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
},
target: 'assets-browse',
Is this possible to invoke opening browse window, the same when I press element with id 'assets-browse'? I tried $('assets-browse').call('click') with no luck.

You can call a opening window's functions through opener. Use it like parent:
<script type="text/javascript">
window.opener.foo();
</script>

Related

Second time ajax call not working

This is my page code and when I click on button work just first time:
I saw question about but I couldn't solve my problem!
<html>
<head>
<title>tsee</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
URL: "../../generate", //this read from a servlet
type: "get",
data:{
id:120
},
cache: false,
complete: function () { alert('farshid') },
success: function (data) {
$('#result').html(data);
},
error: function () {
alert('Error')
}
})
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="Ajax Request" />
<div id="result">
</div>
</body>
</html>
When I click on button, my result load to div(Draw a chart in this div and Because avoid from huge code I avoid to write here) and in second time when I click on don't work.
How can I solve this problem?
And this is video for better understanding problem.(video from my run enviroment
I think you can try .on('click', function(){ // your code }) instead of simple .click function.
After looking at your video and the jsfiddle, the problem has nothing to do with the button.
If you had opened the console, you would have seen that the problem occurs when setting the options for the HighCharts plugin.
You try to change the colors from flat to gradients, but you run this code each time you try to draw a chart.
This code assumes that the initial colors are hex values but the second time you run it it is not hex (since you changed them on the first run), and this causes the plugin to crash and stop executing (and thus it never reaches the part that draws the chart)
See problematic demo: http://jsfiddle.net/dgr2ky4h/
You need to remove the HighChart color setting from that function and only run it once when you load the page.
See working demo: http://jsfiddle.net/dgr2ky4h/1/
So remove the following code from your success method
Highcharts.getOptions().colors = Highcharts.map(
Highcharts.getOptions().colors,
function (color) {
console.log(color);
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[
1,
Highcharts.Color(color)
.brighten(-0.3)
.get('rgb')] // darken
]
};
and run it out of the success only once..
<script>
$(function(){
Highcharts.getOptions().colors = Highcharts.map(
Highcharts.getOptions().colors,
function (color) {
console.log(color);
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color)
.brighten(-0.3)
.get('rgb')] // darken
]
};
});
});
</script>
could be a binding issue...
.click binds event to button as many times as you click. try
Either using $("element").on("click", function(){do stuff here});
or unbind click on button after you execute stuff...
wrong answer...Apologies

Chrome extension open new window behind the current window

i have a chrome extension which automatically open a window using
window.open();
when user open some specific websites.
what i want is the new window which i open from the background script through window.open() should be displayed behind the current webiste opened by the user.
i have tried window.open properties like alwaysLowered=1, z-lock=1 etc. but not working.
Also tried.....
var w = window.open('url');
if(w){
w.blur();
window.focus();
}
all these have no effect on chrome. can anybody help?
If you don't need the handle to the opened window (returned by window.open), you can use the chrome.windows API's methods create and update:
In background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({ url: "http://www.google.com/" }, function(win) {
chrome.windows.update(win.id, { focused: false });
});
});
Theoretically, passing the focused: false property in the createInfo argument should achieve the same result in one step, but it is not working for me with Chrome version 31.0.1650.57 on Windows.
UPDATE:
The above code seems to not "blur" the window on Macs. To overcome this (while determining the position and size of the new window - as per OP's comment) use the following code:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: "http://www.google.com/",
width: 430,
height: 150,
top: top_popup,
left: left_popup
}, function(win) {
chrome.windows.update(tab.windowId, { focused: true });
});
});
chrome.windows.getCurrent(function(winCurrent){
chrome.windows.create({url:url, function(win){
chrome.windows.update(winCurrent.id, {focused: true});
});
});
Try this, its fast so viewer doesn't feel much

primefaces barchart : displaying data point on bar

how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)

Click event not registering on second page

I'm using tablesorter and tablesorter.pager. Here is my code:
$(document).ready(function() {
$("#peopletable")
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
.tablesorterFilter({ filterContainer: $("#people-filter-box"),
filterClearContainer: $("#people-filter-clear-button"),
filterColumns: [1, 2, 3],
filterCaseSensitive: false
})
.tablesorterPager({ container: $("#peoplepager") });
$("#peopletable tr.data").click(function() {
var personid = $(this).attr('id');
$.ajax({
type: "POST",
url: "/Search/GetDocumentsByPerson",
data: { "id": personid },
datatype: "json",
success: function(data) {
var results = eval(data);
$("#documentstable > tbody tr").remove();
$.each(results, function(key, item) {
$("#documentstable > tbody:last").append(html);
});
$("#documentstable").trigger("update");
}
});
});
});
Everything works great except when I click on the next page my button click event doesn't fire. Is this a known issue with jQuery tablesorter?
It's because the elements are updated, the ones you bound the click handler to are gone, you can use .live() to resolve this, change this:
$("#peopletable tr.data").click(function() {
To this:
$("#peopletable tr.data").live('click', function() {
Alternatively, if #peopletable isn't destroyed you can use .delegate(), like this:
$("#peopletable").delegate('tr.data', 'click', function() {
I have also faced the same kind of problem with tablesorterPager second page after using Jeditable (edit in place) plugin for some element in the tablesorterPager used table.
I have tried editing the data bind function in Jeditable as follows
original code
$(this).bind(settings.event, function(e) {
here settings.event equals to the event parameter which we are defining with options eg: click
modified code
$(this).live(settings.event, function(e) {
But.. I found the error with tablesorterPager within pages other than the first page is not because of the binding of element event.
when we are calling tablesorterPager to any table with many rows, only the first page rows of
the table is affected on the page load. so only the first page rows are called with Jeditable plugin. other rows in the other pages are not assigned with the plugin. because of this reason, the events in other pages than first page will not work.
to prevent above situation, we can add Jeditable plugin calling inside updatePageDisplay function.
eg:
function updatePageDisplay(c) {
$(".tablerowdata").each(function(){
$(this).editable("ajax/save.php", {
tooltip : "click to edit...",
data : {"selectid1":"selectval1","selectid2":"selectval2","selectid3":"selectval3"},
type : "select",
submit : "ok",
event : "click",
select : "true",
});
});
Creating a new element won't duplicate the event created with the click method wheras the live method does it.

parse dojoAttachEvent in content returned from xhr in a custom widget?

Instead of the typical custom widget that mixes in _Templated for it's markup, I want a widget that just mixes in _Widget then does an xhrGet to fetch the markup. In addition, and this is the part that I need help with, I want dojo to parse the xhr result text for dojoAttachPoint and dojoAttachEvent in the context of the widget, hookup up nodes and events.
The core of what I've tried for the widget is below:
dojo.provide("com.example.widget.DynamicAttachedTemplate");
dojo.require("dijit._Widget");
dojo.require("dojo.html");
dojo.declare("com.example.widget.DynamicAttachedTemplate", [dijit._Widget], {
postCreate: function() {
dojo.xhrGet({
url: "/product/ajax/editTemplate",
content: { id: 1 },
handleAs: "text",
preventCache: true,
load: dojo.hitch(this, function(markup) {
// this only parses markup for dojoType it seems :(
dojo.html.set(this.srcNodeRef, markup, { parseContent: true });
},
error: function(error) {
alert(error);
}
});
},
submitHandler: function(event) {
dojo.stopEvent(event);
// handle validation, form submit, etc.
}
});
And the page that uses it could look something like this:
...
<div id="productEditContainer">
loading...
</div>
...
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.require("com.example.widget.DynamicAttachedTemplate");
new com.example.widget.DynamicAttachedTemplate({}, dojo.byId("productEditContainer"));
});
</script>
And let's say the markup returned from /product/ajax/editTemplate?id=1 was something like:
<form dojoAttachEvent="onsubmit: submitHandler">
...
</form>
In the end I want the dojoAttachEvent="onsubmit: submitHandler" in the xhr returned template markup to result in an event connect from the form submit to the widget submit handler method. I'm open to better approaches as well but the widget markup needs to be generated on the server and I'd really like to leverage dojoAttach* instead of using DOM IDs and manually hooking things up via dojo.byId in the widget setup code.
consider using inline template: http://www.sitepen.com/blog/2008/06/24/creating-dojo-widgets-with-inline-templates/.
However it requires _Templated.