I'm working on a website that has a “Sign up” page which should be callable from anywhere in the site.
I have the following dummy interface and implementation for the “user” product:
Interface:
##
## located in bahmanm/sampleapp/interfaces.py
##
class ISampleAppUser(Interface):
"""
"""
Implementation:
##
## located in bahmanm/sampleapp/implementation/SampleAppUser.py
##
class SampleAppUser:
"""
"""
implements(ISampleAppUser)
# Note that this method is outside of the implementation class.
#
def manage_addSampleAppUser(self, id, title):
# ...
Now, for the moment, let's assume there's a link on the index page which leads to the following template (Sign up template):
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns="http://xml.zope.org/namespaces/tal">
<head><title>Add a new User</title></head>
<body>
<h2>Add a user instance</h2>
<form action="#" method="POST"
tal:attributes="action python:'manage_addSampleAppUser'">
<p>Id: <input type="text" name="id"/></p>
<p>Title: <input type="text" name="title"/></p>
<input type="submit" value="Add"/>
</form>
</body>
</html>
However I haven't been able to find the right value for action property of the form; all I get is a “resource not found”.
Honestly, I believe it's a problem of understanding Zope's mechanisms on my side. I'd really appreciate any hints/clues on where should I go digging for the solution, configure.zcml or the implementation or the template itself. TIA,
You really want to create a view for that; you can call a Product factory like that from a URL too, but it is not recommended.
With a view, you can combine the form and the code to create the new user in one place:
from zope.publisher.browser import BrowserPage
from sampleapp.implementation.SampleAppUser import manage_addSampleAppUser
class NewUserSignup(BrowserPage):
def __call__(self):
# called when the view is being rendered
if 'submit' in self.request:
# form was submitted, handle
self.addUser()
return self.index() # render the template
def addUser(self):
# extract form fields from self.request.form
# validation, error handling, etc.
if someerror:
self.error = 'Error message!'
return
user = manage_addSampleAppUser(self.context, id, title)
# add things to this new user if needed
# all done, redirect to the default view on the new user object
self.request.response.redirect(user.absolute_url())
then register this view with something like:
<browser:page
for="*"
name="signup"
class=".signup.NewUserSignup"
template="signup.pt"
permission="zope.public"
/>
When your new page is registered, the named template is added as a index attribute on your NewUserSignup class, so the __call__ method can invoke it (self.index()) and return the results.
Because you combined the signup handling and the template together, you can now easily incorporate error handling. When someone loads the page for the first time self.request.form will be empty, but as soon as someone hits the submit button, you can detect this and call the addUser method.
That method can either create the user and then redirect away from this page, or set an error message and return, at which point the form is re-rendered.
This makes the action easy to set; you could just leave it empty, or you can set it to the current context URL plus the name of the view. Together, the template then becomes:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns="http://xml.zope.org/namespaces/tal">
<head><title>Add a new User</title></head>
<body>
<h2>Add a user instance</h2>
<div class="errormessage" tal:condition="view/error|nothing" tal:content="view/error">
Conditional error message appears here
</div>
<form action="#" method="POST"
tal:attributes="action string:${context/absolute_url}/##${view/__name__}">
<p>Id: <input type="text" name="id"
tal:attributes="value request/form/id|nothing" /></p>
<p>Title: <input type="text" name="title"
tal:attributes="value request/form/title|nothing" /></p>
<input type="submit" value="Add" name="submit"/>
</form>
</body>
</html>
Note how the form inputs are pre-filled with existing data from the request as well, making it easier for your visitor to correct any errors they may have made.
Related
Page source (only iFrame part which contains to form i need to fill)
<iframe title="Form 0" id="hs-form-iframe-0" >
#document
<html>
<body>
<form id="hsForm_405e4c3f-98da-4eb1-bd27-c1886a1f811e">
<div>
<label placeholder="Enter your Vorname">Vorname</span>
<div class="input">
<input name="firstname">
</input>
</div>
</div>
</form>
</body>
</html>
</iframe>
Code i tried:
cy.get('#hs-form-iframe-0').its('0.contentDocument').should('exist')
cy.get('input[name="firstname"]').type( 'Smith') //failes as never found. Is the iFrame the cause of it? Of the form?
TLDR The correct way would be to use .find() on the iframe contentWindow.
cy.get('#hs-form-iframe-0').its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
.find('input[name="firstname"]').type( 'Smith')
Example from Working with iframes in Cypress
const getIframeWindow = () => {
return cy.get('iframe[data-cy="the-frame"]')
.its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
}
cy.getIframeBody().find('#run-button').should('have.text', 'Try it').click()
There are other potential problems, such as delayed loading of the iframe source. The .should('exist') check on the iframe window does not cover all situations, nor does performing visibility checks on the input.
The cypress-iframe package has a lot more checks built in, so it's a safer way to handle iframes.
You have found the iframe and access its contents but then you search for the input at the root of your DOM instead of the iframe. You can continue the chain of commands by removing the second cy.
cy.get('#hs-form-iframe-0')
.its('0.contentDocument')
.should('exist')
.get('input[name="firstname"]')
.should('be.visible') // always good to check before action
.type( 'Smith')
With the power and elegance of HTMXJS and its companion _hyperscriptJS is a matter of few lines to write a code that selects, uploads (POST) multiple files shows a progress bar and then display them:
<form hx-encoding="multipart/form-data"
_="on htmx:xhr:progress(loaded, total) set #bar.value to (loaded/total)*100">
<input type="file" name="fileToUpload[]" multiple
hx-post="upload.php"
hx-target="#image-src"
hx-swap="innerHTML">
<button type="button">Select</button>
<progress id="bar" value="0" max="100"></progress>
</form>
<div id="image-src"></div>
and upload.php:
$countfiles = count($_FILES['fileToUpload']['name']);
for($i=0;$i<$countfiles;$i++){
$filename = $_FILES['fileToUpload']['name'][$i];
move_uploaded_file($_FILES['fileToUpload']['tmp_name'][$i], $filename);
echo '
<div>
<img src="'.$filename.'">
</div>
';
}
but now I would like to add network error handling. I know that HTMX fires
htmx:sendError, but I don't understand how to add it into my code above so that if there's a network error it pops-up a Alert (or swaps/shows the error into a <div>)
You are on the right track, the way to handle this is to hook into the htmx:sendError event.
If you wanted to do this with hyperscript, you could add the following code to your body tag (or any enclosing element of the element issuing the request):
<body _="on htmx:sendError call alert('A network error occured')">
...
</body>
I have an input that's in form. I enter the URL adress into this input, click sumbit, and below it shows if this address is available or not. This is done.
Now I want to make this information show up automatically (without clicking submit), after making a change in the input? I would also like the value in the input to not disappear after checking. How can I do that?
I would like it to look more or less like this, but instead of email correctness, URL availability - https://youtu.be/HzJngc-Se9Q
<form action="" method="GET" name="form1" id="form1">
<div id="custom-search-input">
<div class="adress-div">
<input type="text" id="ok" name="domain" maxlenght="30" class="adress" pattern="(.{1,})?([.]{1})?.+[.]{1}.+" placeholder="np. www.page.com" title="Enter URL adress." autocomplete="off" required/>
<br>
<input type="submit" class="button2" value="Check!">
</div>
</div>
</form>
<?php
error_reporting(0);
if(isset($_GET['domain'])){
$domain = $_GET['domain'];
$godaddycheck = 'https://in.godaddy.com/domains/searchresults.aspx?checkAvail=1&tmskey=&domainToCheck='.$domain.'';
$namecomcheck = 'https://www.name.com/domain/search/'.$domain.'';
$registercomcheck = 'http://www.register.co, m/domain/search/wizard.rcmx?searchDomainName='.$domain.'&searchPath=Default&searchTlds=';
if ( gethostbyname($domain) != $domain ) {
echo "<br><br><h1 style='color: #e30000;'><b>$domain</b> not available.</h1>";
}
else {
echo "<br><br><h1 style='color: #00e339;'><b>$domain</b> available.</h1><h2>
</h2>";
}
}
?>
This is not possible doing only with PHP.
You will need to do that with JavaScript. Therefore you need to
listen on an input change for your <input>field
Send the value of the input field with AJAX (https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started) to a PHP script, which then validates the domain
Fetch the response and display it to the user
But there are a lot of tutorials out there, how to do that. For example: https://www.w3schools.com/php/php_ajax_php.asp
[See updates at bottom]
I have a Razor page with a form on it. I want to have two buttons on that form, that perform a slightly different action - both using the same posted form data.
I tried using the asp-page-handler helper on the second button, but it doesn't seem to add anything to the HTML (I would expect it to add a formaction attribute to the <button> element, but it doesn't add anything at all).
Here's an example page:
#page "{id?}"
#model IndexModel
#tagHelperPrefix x:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<p>Current value is #Model.Foo</p>
<x:form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</x:form>
... and here's the corresponding page model:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApplication.Pages
{
public class IndexModel : PageModel
{
[BindProperty]
public string Foo { get; set; }
public void OnGet(int? id)
{
}
public void OnPostAsync(string foo)
{
Foo = foo;
}
public void OnPostAlternativeAsync(string foo)
{
Foo = foo.ToUpper();
}
}
}
This is rendered as:
...where the generated HTML for the form is:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</form>
The fact that the x:asp-page-handler attribute is still in the generated HTML makes me think that the Razor engine hasn't recognized it. I've tried taking off the x: prefix, but that didn't help.
What am I doing wrong?
UPDATE
OK, I tried removing the tag prefix and removing the #tagHelperPrefix line, and that made a difference. A formaction is added to the second <button> element as expected.
However:
that's really annoying - the #tagHelperPrefix is not something I want to lose, and
now both buttons are triggering the "Alternative" action, even though only one of them has the formaction!
Here's the new generated HTML:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" formaction="/?handler=Alternative">Alternative</button>
</form>
SECOND UPDATE
OK, so If I put asp-page-handler="" on the "default" button, then each button goes to the correct handler, which is fine.
The last question that remains, then, is: how can I make this work with the tag helper prefix?
[Answering my own question in case this helps others.]
It turns out that:
The tag-helper-prefix only applies to elements, not attributes, so it should be asp-page-handler="..." rather than x:asp-page-handler="..." even if the tag-helper-prefix is x:.
Those asp- attributes are only recognized within a tag that is tag-helper-enabled - which is all elements when no tag-helper-prefix is specified, or only elements with the tag-helper-prefix where one is specified. In my case, I had to change <button ...> to <x:button ...>.
If you specify asp-page-handler for one button, you need to specify it on all the buttons, even if you specify it as "" to get the default action.
I am programming a server side script on an Apache machine with cgi. I am using C for the cgi programming. I am a total noob and learning from online examples(I must say except the basics I didn't come across more web sources for detailed learning!).
I am having a simple HTML page where the username(input) is added to a list which is a file I have in my system and then the updated list should be displayed in the SAME PAGE.
I am not able to "print" the results of both the script and http link on the same page so therefore in the code below, you will only see buttons. Please help.
Here is what I have:
Html:
<html>
<head><title>Home</title></head>
<body>
<h1>REGISTER</h1>
<form action= "/cgi-bin/mycgi.cgi" name ="create user" method ="get">
Enter name:<input type="text" name="user">
<br>
<input type="submit" value="add">
</form>
<FORM action="http://localhost:8000/getusers/" method="get">
<P>
<input value="Display Users" type="submit">
</P>
</FORM>
</body>
Here is the cgi Code:
#include<stdio.h>
#include<string.h>
int main(){
char *tmpStr;
char *user;
printf("Content-Type:text/html\n\n");
printf("<html><head><title></title></head><body>");
tmpStr = getenv("QUERY_STRING");
while(tmpStr && *tmpStr != '='){
tmpStr++;
}
user = tmpStr+1,
printf("Adding %s to User Database",user);
//system("wget http://localhost:8000/newuser/");//call script to add user?
printf("</body></html>");
return 0;//return user?
}
Could you please tell me how I can realize these? How can I display the user list without opening a new html site? Also in the above C code, I have to call the link "http://localhost:8000/newuser/" which returns a success or failure value. How can I return it to the parent form?
Thanks.
You could add an iframe to your html:
<iframe id="theiframe" name="theiframe"></iframe>
And then setting the target of your form to the iframe:
<form action= "/cgi-bin/mycgi.cgi" name ="create user" method ="get" target="theiframe">
Anyway, it is not clear to me if the updated list should be displayed when you click on the first or second button.