I have some input fields inside a modal dialog like so (that's jade):
.modal-body
.control-group
label.required(for="event-planner-email")= Email
.input
input#event-planner-email(name="email", type='text')
.control-group
label.required(for="event-planner-name")= Name
.input
input#event-planner-name(name="name", type='text')
And I would like to be able to fill them out in a test. I tried pressing the link that opens the modal and filling the fields using zombie.js browser object, code in coffee follows:
browser.clickLink 'a#open-planner', () ->
browser
.fill('event-planner-email', someEmail)
.fill('event-planner-name', someName)
.pressButton 'Create', () ->
do done
But I get an error saying: "No INPUT matching 'event-planner-email'". If anyone knows how to do this, help would be much appreciated. Thanks!
Maybe the modal has not come into view yet by the time your call back is firing. If there is a transition happening to show the modal, you'll have to wait for that transition to complete.
Maybe try adding a setTimeout in your call back of the clickLink:
browser.clickLink 'a#open-planner', ->
fillForm = ->
browser
.fill('event-planner-email', someEmail)
.fill('event-planner-name', someName)
.pressButton 'Create', ->
do done
setTimeout fillForm, 1000
From the Bootstrap docs
You need to run your zombie code after the modal loads, so you should use the "shown" event
$('#myModal').on('shown', function () {
// zombie
})
I'm not sure how to represent that in coffee
Thanks everyone, turns out I just didn't use the proper css selector for the input elements, so instead of
.fill('event-planner-email', someEmail)
should be
.fill('input#event-planner-email', someEmail)
Because in jade snippet above, 'event-planner-email' is the id of the input element. Wanted to delete my question, so that I don't expose my stupidity any further, but apparently it's too late.
Related
I work on a project which uses coffeescript, I have to generate a select element (combobox) dynamically, I generate it. But I want to fire an event on the last select element, but it doesn't work, I wrote like this.
$("select:last").change ->
But it fires the event only when I change the first select element.
Have you tried using the on event?
$('select:last').on 'chnage', ->
For those who have the same problem, you can do like this $(document.body).on 'change', 'select:last', ->
The code you wrote looks correct. Is the body of the method indented properly? It should be one tab further to the right than the line you posted.
I would try making some of the syntax more explicit to rule out weird issues related to tabbing:
$("select:last").change{ () -> }
Pretty straight-forward question, but I can't find this anywhere. I'm using WicketStuff's TinyMCE to make a Rich Text Editor in my application, and can't find anywhere how to get the input from the text area. For brevity's sake, the following is a simplified version of the code I'm using.
private String input;
...
TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple);
TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input"));
textArea.add(new TinyMceBehavior(settings));
form.add(textArea);
Using this, I would expect the usual manner to simply use my String 'input' since it's set as the model. This always results in null as the model isn't being updated.
I tried using the auto-save plugin in case it was expecting the save button to be clicked (which doesn't update the model either), and neither worked. The only thing I've been able to do to get the user's input is to add a HiddenField, with a new model, and make a JavaScript call like
document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent();
but this has led to other problems with trying to call the JS in the desired place and to get it to work properly. I feel this shouldn't be necessary anyways, as surely someone must have implemented a method to get the contents of the text area being used.
Any help would be greatly appreciated.
Thanks to a blog post at Nevermind Solutions, the way to get the model updated is to add the following JavaScript to the form's submitting button:
onclick="tinyMCE.triggerSave(true,true);"
My text area is inside a panel with the button outside of the panel, so it doesn't directly work for me. The trick was to add the JavaScript call to the button's onSubmit, move the logic into the onAfterSubmit, and to make the button MultiPart so that it could call the save trigger before doing the other logic associated to the model.
Hope this might help some others in the future.
You have to add a modifier to the submit button so that the model can update.
AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) {
#Override
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
doSomething();
}
};
btnSubmit.add(new TinyMceAjaxSubmitModifier());
Have a look here for more info
using Ajax I filled Country, State and city dropdownlist. On land change state is filled and on state change city is filled properly.
Then when I try to save page I face this :Invalid postback or callback argument.
Searched and found out that this is due to change in ddl.selectedvalu change from initial value that is assigned by asp.net.
Now my question is that how can I let asp.net know that the new ddl value is valid?
Thank you.
In many pages it is recommended to use EnableEventValidation="false", but I prefer not to use it.
Some say that use Render and add value to notify .Net like this:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation("ddlLanguages ", "English");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Tamil");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Hindi");
base.Render(writer);
}
but how to use it? where to put it?
for a better understanding I put here a sample code including Database script :
hesab20.com/DownLoad/Ajax.zip
in this sample Javascript is used to fill drop-down list . But when click button is executed and a post back occur, error happen.
Please help if you have experience with this.
Regards.
Please run the sample code and change the drop down lists , automatically the other is filled , meaning that list item text and value is completely changed. finally click button for a post back.
you must see that error happens:
Invalid postback or callback argument. Event validation ....
and note : EnableEventValidation="true"
Thanks
I load a "page" into the DOM using $.mobile.loadPage(). I then want to target the element created, but I haven't figured out how to do this. This is what I thought would work:
var toc = $.mobile.loadPage('toc.html');
toc.trigger('customevent');
The above does not work in part because toc is a "deferred promise object" rather than a good ol' jQuery DOM reference. Additionally, it does not work because the second line is triggered before loadPage finishes. Is there a way to fire a callback after loadPage?
Thanks!
If you know the id of the page being loaded then you can bind the 'pagecreate' event to that object with .live() like so:
$('#blah').live('pagecreate', function () {alert('created');});
This will fire after the page has been loaded into the dom.
I just was just able to figure this out, even if you don't have the id, here's an example of how i am performing an action (fadeIn) on the the inserted element....
$(document).bind('pageload',function(evt,data){
$(document).unbind('pageload');
$(data.page).fadeIn();
});
$.mobile.loadPage('mypage.html',{'pageContainer':$('#my_item')});
You can use pageshow in order to fire a callback when the page is loaded. Please refer to the jQuery Mobile Events API for more detail.
An example would be something like:
$('div').live('pageshow',function(event, ui){
...
});
This is a rephrased question from here. After some testing I isolated the problem, but have no clue on fixing it. No need to read the previous question, this is the simplified code:
THE PROBLEM -> trigger('click') executes, but the event doesn't trigger when inside looped (intervaled) function
$(document.ready(function(){
var checkForConfirmation = function(){
clearInterval(checkInterval);
$("#anchorLink").trigger('click');
}
var checkInterval = setInterval(function(){checkForConfirmation()}, 5000);
});
The function is being called in intervals. When the proper response is replied, interval stops, and simulates the click on an anchor link.
In the html file there is an anchor link <a id="anchorLink" href="#hiddenDiv">Show</a>.
It points to the hidden div which has some content. I'm using Fancybox plugin to show the hidden div when the anchor link is clicked.
If I click on Show link fancybox shows, as expected.
If I get the response from the back-end, code executes as expected, but fancybox is not shown.
If I move $("#anchorLink").trigger('click'); outside the checkForConfirmation function, fancybox shows.
When I replace $("#anchorLink").trigger('click'); with $("#anchorLink").text('Im clicked'); the string shows in the <a id="ancoredLink"> tag.
This is the summary, I have tried it in different situations.
The problem is obviously in triggering the click event while in looping function. The $("#anchorLink") selector is accessible, it is triggering it correctly from everywhere else. Obviously there is a problem in triggering the mouse event inside looping function.
Any suggestions?
Try:
$(document).ready(function(){
// ...
});
instead of:
$(document.ready(function(){
// ...
});