I'm trying to validate a modal, and right now I can't make it open using Thymeleaf.
I have a table, and for each row I have a different modal, the modal ID takes its name myModal + the id of the object from the table
<div class="modal" th:id="*{'myModal'+{object.ID}}" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
If there are errors for the object I'm updating in the modal (if I receive the param err) I want to make the modal open. I can validate the object and everything, but I don't know how to use Thymeleaf to take the ID of that object that I validated
I can make the modal open when there are errors only if I hard-code the ID - for example the ID 20
<script th:inline="javascript" th:if="${param.err}">$("#myModal20").modal("show");</script>
In the Controller when I verify if it has errors or not, I can send a model attribute "id-modal" and I think I can put it in the place of the hard-coded '20' using Thymeleaf, but I don't know how, can someone help? I keep receiving the error in the browser conole when I'm trying to do it "Uncaught Error: Syntax error, unrecognized expression: 'myModal'+${id-modal}"
You shouldn't use a dash - in your model attributes. The expression ${id-modal} means to subtract the value of modal from id -- literally the math expressions id - modal. Once you've changed that (I will use modalId in this example), your JavaScript could look something like this. (Also, see the documentation on JavaScript inlining.)
<script th:inline="javascript" th:if="${param.err}">
let id = /*[[${modalId}]]*/ 0;
$("#myModal" + id).modal("show");
</script>
(I'd probably also surround it with the jQuery document ready, but you might not want/need that.)
Related
So i'm trying to create a "search box" using a "ModelessDialog", the main idea is as follow
1) User runs a macro that pops a ModelessDialog with the following fields: autocomplete, search button, and table (empty, only with headers)
2) The "Autocomplete" field is where the user can type an "ID" , (this part is already done)
3) The idea is, When the ID is selected, press the "Search" button to run some other macros in the background, then returns the data needed to populate the table and refresh the current "ModelessDialog"
The idea of doing it this way is that i dont want to open / render a whole page, as i want to be as fast and without having to "jump" between windows
Any advice? (im not adding any code since i don't have any trouble with the rest of the code /html, as the autocomplete auto populates, and the button runs the macro and returns some data)
Also im kind of new in javascript and html (I followed tutorials to make the other parts work :D )
The client-side JS code that resides in your modeless dialog can call server-side functions via google.script.run. The server functions can fetch the data required for filling the table, perform string interpolation and return an HTML string to the client.
Just set the callback function for google.script.run to modify the contents of your table received from the server.
Modeless dialog HTML
<div id="myTable">
<table>
<!-- table contents -->
</table>
</div>
JS script for the dialog:
google.script.run.withSuccessHandler(function(html){
var tableContainer = document.getElementById("myTable");
tableContainer.innerHTML = html;
}).getTableData();
More on client-client server communication here
More on templated html here
Knockout has the default behavior of updating the associated model if you change your focus (e.g. by clicking outside the input control) after editing the value inside an input control, populated by a binding of type Value.
Here is the link to the official documentation page explanation, section Parameters:
http://knockoutjs.com/documentation/value-binding.html
Do you know a way to disable this default behavior ?
The reason behind this : Im using Models that can tell if their last update requires persistent backup by comparing the previous value to the new one.
I would like to listen to the key up event on my form inputs but if I do that, knockout triggers twice event (the default one + the key up) to update the Model and the second one is basically telling my Model to replace the value by the same value because it is already updated, which it translates to "there is no need to do persistent backup since the value didnt change".
I would gladly appreciate any help or suggestion, since Im stuck and can't find a way around :)
EDIT
Couldnt reproduce the error with bare backbone code. It seems as "super cool" said that valueUpdate should override the default Blur event that triggers when you use form controls with binding Value.
It may be a bug introduced by the library Knockback that I use to create the ViewModel.
Despite all this, just replacing the binding Value by the binding textInput did the trick. Thank you all.
Don't listen to the event, subscribe to updates, which won't fire unless the value is changed. Using the textInput binding will register every change to the value, even those done using menu items like cut and paste, when they happen.
Equivalently, you can use the value binding along with valueUpdate: 'input'
vm = {
myvar: ko.observable(),
updates: ko.observableArray()
};
vm.myvar.subscribe(function(newValue) {
vm.updates.push(newValue);
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myvar" />
<div data-bind="foreach: updates">
<div data-bind="text: $data"></div>
</div>
I have a wizard style page that I want to validate a page at a time. So before the user can move off the (partial) page I submit the inputs from the div for validation. Client side validation works OK but on some pages there are one or more fields I need to validate on the server. Yes I know about remote validation.
I can get the server side validation done without a problem. The issue I have is how do I display the errors on the correct fields? I can locate the fields in the div and find the span where the error message is suppose to go. But I just can't get the message to display.
I must be missing something when updating the field span. I would have thouht that there is a jQuery routine to add error information to a field. I need something similar to the controllers AddModuleError. So when I get return from my $.Post I can set error text on the appropriate fields.
Any suggestions?
A potential solution to your problem might be in this article "Client side validation after Ajax Partial View result in ASP.NET MVC 3"
Basically, once you get your html from the post you can invoke validation using jQuery.validator.unobtrusive.parse()
As per the example in the article;
$.post("YourAction", { data: <your form data> },
function(htmlContent){
$('#container').html(htmlContent);
jQuery.validator.unobtrusive.parse('#content')
}
Worth looking into
If you are using the included RemoteAttribute, or the version I linked to in my answer to your other remote validation question, then you should not have to worry about displaying the error, as both work with the ValidationMessage helpers to automatically display errors.
Have you added Html.ValidationMessage(...) or Html.ValidationMessageFor(...) for each field to be validated?
Using watir-webdriver, I am trying to set the value for a text field.
browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")
When I run that command, I can see that watir found the field because the cursor is set on that field however no text is entered. I have also tried the send_keys and append commands but nothing seemed to work. No exception is thrown from these methods.
The only difference I could find between this field and the other fields on the page(which all work fine) is that it has this JQuery mask on it.
$(selector).mask("(999) 999-9999");
Any ideas on how to set the text field?
Edit:
Some more of the Javascript:
selector = '#' + id(field.id) + '_input';
if (field.format == 'phone') {
$(selector).mask("(999) 999-9999");
}
HTML of the field:
<div id="phoneNumbers_value_form_item" class="form_item validated no_focus">
<label for="phoneNumbers_value" class="form_label">phone</label>
<input type="text" value="" name="phoneNumbers[][value]" id="phoneNumbers_value_input" class="text">
<div class="tip"> </div>
<div class="tip_validating">
</div>
<div class="tip_error">
</div>
</div>
I don't see any element in the HTML you provided that would match the text input field being addressed in the ruby code at the top of your posting. e.g. there is nothing there with an ID of 'phone'
Based on the HTML in your question, I would expect the following to work
browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")
Looking at the sample page you linked in the comments, when I use google chrome and the "Inspect Element" function on the input field with the ID of 'phone' I see that there are a number of event listeners associated with the field (blur, focus, input, keydown, keypress, unmask)
The 'focus' one gets my attention in particular, and seeing it there on that field makes me think that you might then need to first fire an event against the same element, such as the onfocus event, in order to activate the field, then try to set the value.
You'll notice that when you manipulate things manually, the field starts out blank, but as soon as it gets focus it displays the format for the input mask to the user, it may well be that this needs to happen first, before it see's any kind of input.
EDIT: In this case, based on feedback from the questioner, the answer turned out to be that they needed to first fire the 'unmask' event against the text field, and THEN .set the value they wanted, in order for things to work correctly when automating the testing. This doesn't exercise the field masking functionality, but then again I doubt the test mandate in this instance is to extensively test a 3rd party (JQuery) addin, and they are more concerned with the business logic etc in the back end, thus simply being able to set the value without the masking code getting in the way is what is needed.
The problem has to do with focusing on the text field. Even with a .click() somehow webdriver ends up with the cursor at the end if the input field (see issue 2377). Pressing the HOME key moves the cursor to the beginning and allows you to type in the input field, and still have the mask functionality.
In Java:
WebElement txtPhone = getDriver().findElement(By.id("phoneNumbers_value_input"));
txtPhone.sendKeys(org.openqa.selenium.Keys.HOME);
txtPhone.sendKeys(phoneNumber);
I have simple form with 2 fields: Name, Photo.
class MyForm(ModelForm):
class Meta:
model = My
class My(models.Model):
Name = models.models.CharField(max_length=512)
Photo = models.models.ImageField(upload_to=uploader)
I'am trying to validate and save this model. User chooses photo and doesn't enter name. Form does not pass validation. And user has error message. Then he enters name, but doesn't choose photo. And form doesn't validate again. But user has already chose photo.
I found article, where author explained this. But he wrote, that information out of date.
Tnx for help.
Docs covering validation: http://docs.djangoproject.com/en/dev/ref/forms/validation/
But it think it would be enough to set blank and null to false according to docs: http://docs.djangoproject.com/en/1.3/ref/models/fields/
UPDATE: blank and null diff coverage: http://www.b-list.org/weblog/2006/jun/28/django-tips-difference-between-blank-and-null/
But they come as default False... snap...
It means that all the validation has to be done as shown in http://docs.djangoproject.com/en/dev/ref/forms/validation/#using-validation-in-practice or in templates.
There is many ways to validate forms. You can use even javascript witch would allow post only when fields are valid.
Best probably would be do the validation according to this: http://docs.djangoproject.com/en/1.3/topics/forms/
UPDATE: It seems that its in some sort near duplicate of Resubmitting Image in ImageField after Validation Error in Django
You'll need to include enctype="multipart/form-data" in order to bind imagefield and filefield data to the form. Without that, those fields won't validate.
{% block page_content_body %}
<div class="row">
<div class="span12">
**<form enctype="multipart/form-data"** action="{% url 'deal_manager:deals_create' %}?place={{ place.id }}" method="post">
...