When using the FineUploader jQuery plugin... I have autoUpload = false and I need to know when a file is added to the ul. The submit callback is called before the li is added. (I have some other elements as part of my "fileTemplate" that I need to update when a file is added.)
What is the best way to do this?
This is likely addressed in a case already implemented in the 3.4-IP branch. 3.4 is the next scheduled release. Essentially, I have added an onSubmitted callback. In your case, it is safe to assume that this callback will be invoked only after the list item has been added to the DOM. Please let me know if this does not address your issue.
Related
I have a scenario where I'd like not check IF an element exists and is visible/clickable. If not, script processing continues.
While Laravel Dusk provides $browser->assertVisible($selector) method, this ends up in an exception if the element is not visible. Or $browser->waitFor('.selector'); but this also ends the script processing if element doesn't appear.
Here is the criteria Selenium uses to check for an element being visible is found here: How to force Selenium WebDriver to click on element which is not currently visible?
Apparently Dusk doesn't provide this kind of method. What would be the best way to implement it?
Better late than never I suppose.
isDisplayed() works pretty well (though not if it's covered up by other elements)...
if($browser->driver->findElement(WebDriverBy::cssSelector('#my-selector'))->isDisplayed()) {
// do something
}
if I have overlays covering my elements, I use ->waitUntilMissing(), or in extreme cases I call on $browser->driver->executeScript() and run some jQuery to temporarily manipulate an element that is "in the way".
You can try to find the element and try to retrieve properties of it. If the properties are empty, the element is not visible. E.g.
$hiddenBtn = $browser->element('#show-more');
if($hiddenBtn && $hiddenBtn->getText()){
$browser->click('#show-more');
}
This worked for me.
Without a good idea of what you're trying to accomplish you can always wait until the element is visible:
https://laravel.com/docs/5.5/dusk#waiting-for-elements
I am using Sencha ExtJs grid 4.2 . I am using a Expander plugins for my grid and try to load data under expanded region from Ajax. Right now I am using this code to show data on expanding.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
' <p><b>{fname}, {lname}</b></p>',
'<br> {accordian_view}'
)
}],
Here you can see that data is pre populated, but my requirement is to load data on expanding. I am trying hard to find the event or process to do it. But still no luck. If anyone have any idea please share.
Thanks in Advance
You might check out the expandbody event on the RowExpander plugin: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody
This event passes not only the row's bound record, but also the expanded element, so you could:
Request data via Ext.Ajax.request({...})
Handle response
Add content to expanded row
One thing to keep in mind, however, is the async nature of this approach. That is, the row is going to expand immediately, regardless of how long the subsequent request takes to come back. So it would probably be a good idea to do something like this instead when handling the expandbody event:
Add "loading" text/icon/whatever into expanded row area
Make Ajax request
Handle response
Replace loading text/icon/whatever with the data returned from the Ajax request
It's likely someone has already done so, but you could also (and I would highly suggest it) wrap this process into a custom plugin of your own that extends the RowPlugin. That way you could use it elsewhere in your app for any grid. If you end up creating a custom plugin, please share it with the community!
EDIT: A quick Google revealed a number of custom plugins that do precisely this. For example: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js
I searched the Prototype docs but found nothing. Did I miss something, or is there no such thing as onshow? I want to call a function when an element (a div in my case) is made visible. Is there such functionality in the Prototype framework? If not, I need a push in the right direction so I can solve it another way.
Thanks!
If you are asking if there is an event that is fired when the .show() method is called on elements there is not.
But you can test if an element is visible by using the $('myelementid').visible() method.
Also a different way I have done it in the past is using the Script.aculo.us .appear() method which has a afterFinish callback - for example
$('myelementid').appear({'afterFinish':function(effect){
//the afterFinish callback passes the effect as the first parameter
//call other function with element
otherfunction(effect.element);
});
technically you would only need to load the effects.js file of Script.aculo.us instead of all of the library to get the core effects methods.
I have an issue about ajax.
make an example: I have a menu list (ul li) and by default the first one has class 'current'.
if I click the second item assign class 'current' to him with jquery and remove it from the previous one.
Now, I need reload the menu list with ajax, so I call the ajax function that calls a php function that return an update html list.
But in this way I lose the 'current' class from the second list, that before I assigned with jquery.
Happens to me many times to have this type of problems.. What is the correct solution to solve it?
one way of doing it is to get the index of the li with the class current and in the ajax success callback assign the current class to the appropriate index
look at this fiddle to get the index of the li http://jsfiddle.net/3nigma/zyayj/
in your success callback
success:function(data){
var i = index -1; // index is zero based and eq() is 1 based
$("ul li:eq(i)").addClass("current");
}
I think your question indicates that you don't already know that web pages are "stateless", meaning that they do not "automatically" hold or store anything that you do with them.
Please see my answer ho a privious question which summarizes the ways to deal with retaining the state of things - the principles would remain the same for your menus.
Stateless HTML
I am using a plugin called jQuery contextMenu but am having trouble making it work with elements that are loaded via ajax after the DOM has already loaded. does anyone know how i can get this working with .live?
I've made a modification of the original jquery.contextMenu.js script. I've replaced .each() with .live("mousedown", ...) and deleted appropriate mousedown binding (you can also make a diff of my code and the original to get the changes).
You can get the code from http://pastebin.com/jBcAR6g1
Works for me.
2018 update without plugin:
$(document).on('contextmenu','#object_id',function() {
//code
});
I think you must use enableContextMenuItems() method on the newly added elements. If you post your code it would be easier to help.