Atk4 and popup from examples - atk4

im trying to get to work simple pop-up, form the examples, but none is working..
Using 4.3.0.dev.
Tried from here:
http://book.agiletoolkit.org/views/popover.html
$i = $this->add('Icon')->set('window');
$pop = $this->add('View_Popover');
$pop->add('HelloWorld');
$i->js('click', $pop->showJS());
Or from here:
http://www4.agiletoolkit.org/css/popover
//The view to click (can be any element)
$view = $this->add('View')->set('Some text');
//Popover view
$pop = $this->owner->add('View_Popover');
$pop->add('View')->set('Content to show in tooltip');
$this->on('click','#'.$view->name,$pop->showJS($this->js(null, '$(this)'),array(
'width'=>'250px',//You can specify the width of tooltip
'my'=>'left bottom',//Specify the position of the tooltip
'at'=>'left+5 bottom-25',//Specify the margins
'class' => 'atk-popover atk-popover-bottom-left',//Specify where to show
)));
On both examples i get js error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' jquery-2.0.3.min.js:4

I don't know what happened yesterday, maybe i was too tired, but it's working now..

Related

Froala 3 and AngularJS does not work when using multiple editors on the same page

I have a page with several Froala editors that are displayed as the user clicks a reply button, similar to the way Gmail displays its reply boxes.
If I display the editor below without setting a custom option, no error occurs.
<textarea id="editor-{{mail.id}}" froala ng-model="mail.message"></textarea>
But if used with a generic option set in $scope the following error is displayed, and the editor is only displayed in one item.
<textarea id="editor-{{mail.id}}" froala="customOptions" ng-model="mail.message"></textarea>
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '$$parentForm' -> object with constructor 'Object'
| property '$$controls' -> object with constructor 'Array'
--- index 0 closes the circle
at Object.stringify (<anonymous>)
at new E.Bootstrap (froala_editor.pkgd.min.js:7)
at new $e (froala_editor.pkgd.min.js:7)
at Object.ctrl.createEditor (angular-froala.js:119)
at Object.ctrl.init (angular-froala.js:60)
at Object.link (angular-froala.js:222)
at angular.js:1390
at angular.js:11263
at invokeLinkFn (angular.js:11269)
at nodeLinkFn (angular.js:10588)
This happens if I set a simple option, like setting only my key.
$scope.customOptions = {
key: 'MY-KEY'
};
How can I fix this?
Is there any configuration in the options that is missing?
In V3 you need to initialise the froala in this way.
var editor = new FroalaEditor('selector', options);
JQuery is deprecated externally

Element is Not clickable at point(215, 251) error

I have a non-angular app where I click a link and a new popup modal appears. I then can select to upload a picture or video. I tell protractor and/or webdriver to click on the upload photos button.
If I use:
var addPhotos = element(by.css('#px-select-photo')).click();
I can visually see the button being pressed down however the test is then failed and the error not clickable at...(215, 251)
So then I thought I could trick it into clicking x y position (which I'm assuming those two numbers in the error are) and I get nothing
Code I used for that is:
browser.actions().mouseMove({
x: 702,
y: 621
}).click().perform();
It clicks, but not on the button.
Lastly I tried this:
var addPhotos = element(by.css('#px-select-photo'));
browser.executeScript('arguments[0].scrollIntoView()', addPhotos.getWebElement());
browser.actions().mouseMove(addPhotos).click().perform();
Which also yields no results.
Also, I am receiving this warning:
WARNING - more than one element found for locator By.cssSelector("#px-select-photo") - the first result will be used
However, there is only one element in the html file, don't know what thats all about either.
Please try below code:-
browser.executeScript('arguments[0].click()', addPhotos.getWebElement());
browser.actions().mouseMove(addPhotos).click().perform();
The warning might be the key to solving the problem.
Make your selector more specific and wait for the upload button to become clickable:
var EC = protractor.ExpectedConditions;
var addPhotos = element(by.css('#pxupload3 input#px-select-photo'));
browser.wait(EC.elementToBeClickable(addPhotos), 5000);
addPhotos.click();
Alternative option would be to get all elements by px-select-photo id and filter visible:
var addPhotos = element.all(by.css("#px-select-photo")).filter(function (addButton) {
return addButton.isDisplayed();
}).first();
addPhotos.click();

Paginator Not Found when page number specified

I manually set the CakePHP Pagination values in my Usergals Controller like so, so as to Paginate a related Model (TreasuresUsergal) on the view of Usergal. Here is a simplified snippet from the UsergalController:
public function view($id = null) {
$this->loadModel('TreasuresUsergal');
$options['joins'] = array(
array('table' => 'treasures',
'alias' => 'Treasure2',
'type' => 'LEFT',
'conditions' => array(
'Treasure2.id = TreasuresUsergal.treasure_id',
)
)
);
$options['conditions']=array('TreasuresUsergal.usergal_id'=>$id);
$options['fields']=array('Treasure2.*','TreasuresUsergal.ord','TreasuresUsergal.comments');
$options['order']=array('TreasuresUsergal.ord'=>'asc');
$options['limit']=$limit;
$this->Paginator->settings = $options;
$treasures=$this->Paginator->paginate('TreasuresUsergal');
$this->set('treasures',$treasures);
}
So in the above example, $id is the value passed to the view function from the URL. There is a live example of this here:
http://collections.centerofthewest.org/usergals/view/20
As you can see, it works just fine for a single page. However, today I tested the Paginator in the view and discovered the "next" button does not work. The Counter, sorting, and Page numbers all load correctly - but anytime the actual named parameter "page:n" is passed (when n is greater than 1) I get a Not Found page with the following error:
Not Found
Error: The requested address '/usergals/view/20/page:2?url=%2Fusergals%2Fview%2F20' was not found on this server.
I must be missing something simple - I have experimented with the routes a little, but haven't been able to figure it out. Or perhaps I am missing some Paginator options? Or does it think its OutOfBounds when its not?
UPDATE / WORKAROUND
After some messing around, I have devised this workaround. Not as nice as I'd like, but here is the basic idea (error handling, etc can be added)
First, I added a check in beforeFilter to see if page paramter was set. If so, I change it to 'p' parameter and redirect.
I did this here because otherwise I had problems with the Not Found exception (see notes at bottom). So, in beforeFilter:
if (isset($this->params['named']['page'])){
$newurl=$this->params['named'];
$pg=$newurl['page'];
unset($newurl['page']);
$newurl['p']=$pg;
$this->redirect(array('action' => 'view/'.$this->params['pass'][0])+$newurl);
}
Then, in the 'view' function of the same controller, I added this along with the other Paginator options:
if (isset($this->params['named']['p'])) $options['page']=$this->params['named']['p'];
With this, the standard Paginator behavior seems to work fine in the view. Prev, next, etc.
If anyone has a better suggestion, I would love to hear it. I don't like the idea of having to redirect, but it works for now.
It's worth noting that adding this code (even just to experiment) - caused all of my pagination counts to stop working. The query in debug was correct, but the displayed counts were wrong:
try {
$this->Paginator->paginate();
} catch (NotFoundException $e) {
}

How to add items to extjs panel after clearing it from previous items?

Hello I use this code to add label items to panel dynamically, but when clearing the items and trying to add new items again nothing happen:
var mText = new Ext.form.Label({});
mText.draggable="constrain: true; constrainTo: mSurface";
mSurface.add(mText);
mSurface.doLayout();
mText.on('move',function(t,x,y,eOpts){
MainForm.lbx.setText(x,false);
MainForm.lby.setText(y,false);
obj.set('o_x',parseInt(x));
obj.set('o_y',parseInt(y));
});
mText.getEl().on('render', function(t,eOpts) {cur_obj=mText;});
mText.getEl().on('click', function(e,t,eOpts) {cur_obj=mText;Tree_Select(mText.id);});
mText.getEl().on('contextmenu', function(e,t,eOpts) {e.stopEvent();cur_obj=mText;mnutxtContext.showAt(e.getXY());});
The mSurface.removeAll() do nothing !! so I use this to clear the panel:
Ext.each(mSurface.items.items, function(cmp)
{
cmp.destroy();
//mSurface.remove(cmp); //doesn't work also
});
I have read almost every thing in extjs 4.2 api and tried to google it but nothing, I think that removeAll should work, maybe the way I add the labels to the panel is wrong or there is something that I am missing...
Thank you for advice..:-)
I found the solution after struggling..:-(((((
I just change the config to:
var mText = new Ext.form.Label({id:obj.get('o_id')});
When I pass the 'id' in the config the 'removeAll' works fine!!! but when I set the 'id' after creating and adding the component to the panel the 'removeAll' doesn't work...
I really don't know why but I'll be happy to have an explanation for this behavior !

Telerik MVC ComboBox in Grid not posting the right value

I have set up a ComboBox in grid. It shows everything fine but when I select anything in the ComboBox it is not posting the right value to the server, I debugged it and found out that it always posts value 0.
Any idea why is that and how to fix it?
Here's the important code:
**Controller**
//lista za stvaratelje (ComboBox)
var stvaratelji = newStvarateljiService.GetAllStvaratelje();
//za combobox
ViewBag.stvaratelji = stvaratelji;
//za selectlist
var listaStvaratelja = new SelectList(stvaratelji, "IdStvaratelj", "Naziv");
ViewData["stvaratelji"] = listaStvaratelja;
**View**
columns.ForeignKey(b => b.StvarateljId, (SelectList)ViewData["stvaratelji"]).Title("Stvaratelji").EditorTemplateName("Stvaratelji").Width("30%");
**EditorTemplate**
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.Telerik().ComboBoxFor(m => m)
.Name("Stvaratelji")
.Filterable(filtering =>
filtering.FilterMode(AutoCompleteFilterMode.Contains)
)
.Encode(false)
.AutoFill(true)
.BindTo((SelectList)ViewData["stvaratelji"])
%>
I am using selectList with foreignKey because when the grid is not in edit mode it shows value (ID) instead of the name, but that's a completely different issue and one not so important. Nevertheless if someone knows how to set ComboBox to show the name when the grid is not in edit mode it would be also appreciated.
I figured out what is the problem.
I changed the name of EditorTemplate's ComboBoxFor in "StvarateljId" because ComboBoxFor is not bound to the Title in the Grid but the name of the property in "ForeignKey" part.
Dario,
To address the question in the comment of your answer ("not to use SelectList"):
Have you tried changing from a ForeignKey to a simple Bound column with a DisplayTemplates/StvarateljId similar to the EditorTemplates? I have had some success with this setup instead of using the ForeignKey.
Here is a link to the demos at Telerik showing this exact setup.

Resources