Now my template displays a table having a link on each row to display more details. Each row passes unique column_name, db_name, schema_name, tablenm combination to get more details.
<td>
<a href="{% url 'moreDetails' column_name=row.colname db_name=row.dbname schema_name=row.schemaname table_name=row.tablenm %} " target="_blank">
Values
</a>
</td>
The above code works , but open a new window for the result set. But, I would like to route it through a javascript(Jquery-django) and capture the result back in Javascript and display the result as a javascript message without refreshing the complete page.
How Can I pass there values (column_name, db_name, schema_name, tablenm) to the java script on the click event
I tried replacing href with button and set a value to it
<td>
<input type="button" value={% row.colname |","| row.dbname |","| row.schemaname |","| row.tablenm %} class="apireq" />
<td>
But seems not working. I welcome any help on this . Thanks In advance
Why not set them as data attributes?
<input type="button" class="apireq"
data-colname="{{row.colname}}"
data-dbname="{{row.dbname}}"
data-schemaname="{{row.schemaname}}"
data-tablenm="{{row.tablenm}}"
/>
Then in your click event handler you will have a reference to the button that generated the event, all you need to to is read the attributes off of it. And they are already parsed out so no worries there too.
Related
I am trying to use the Click to Edit example with HTMX, by using a table.
Each row (<tr>) is a database record that looks like this:
<tr hx-target="this" hx-swap="outerHTML">
<form>
<td><input type="text" name="name" value="{{row.name}}"></td>
<td><input type="text" name="email" value="{{row.email}}"></td>
<td>
<button class="btn" hx-put="/edit/{{row.id}}">Update<buttun>
<button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
</td>
</form>
</tr>
Unfortunately, when I print the request body with request.form.keys on my flask server, I see that that the request is empty ([])
It seems like the button click did not trigger the form submission with all the input fields.
How can I make the button click trigger the form submission with all the fields populated ?
Ah, just remembered: you are working with tables here. Unfortunately tables are super picky about the elements inside them, and I bet form doesn't work where you put it. If you inspect the DOM I bet you'll find that there isn't really a form element in there, so htmx isn't finding it to include the inputs.
You'll need to rework this to include the values in a different way, for example using hx-include.
Something like this:
<tr hx-target="this" hx-swap="outerHTML">
<td><input type="text" name="name" value="{{row.name}}"></td>
<td><input type="text" name="email" value="{{row.email}}"></td>
<td>
<button class="btn" hx-put="/edit/{{row.id}}"
hx-include="closest tr">
Update
<button>
<button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
</td>
</tr>
If you are willing to switch from table rows to divs, the original code you had should work fine.
This is an unfortunate situation where tables are not very flexible.
update: #guettli reminded me that you can include any element and it will include all inputs below it, so you can just use closest tr in your hx-include attribute. Thanks!
Can you post what the request looks like from the chrome or firefox console?
This looks correct, in general.
I've got a really weird error, and I don't know whether it's the django template error or something weird happening in the DOM.
I have a list of dictionaries called data_table, which I pass as part of the context to the template engine. I'm trying to create rows in a table, and one of the cells is this:
{% for row in data_table %}
<tr>
<!-- a few cells ... followed by the final cell which contains a form -->
<td>
<form action="/remove-survey-question/" method="POST">
<a href="#" onclick="removeSurveyQuestion(this)">
<image class="trash-svg" src="{% static "trash.svg" %}">
</a>
<input type="hidden" name="question_type" value="{{ row.question_type }}" />
<!-- some more hidden inputs... -->
</form>
</td>
</tr>
{% endfor %}
This works perfectly except for the first row. The javascript function throws an error because, when I use the browser's DOM inspector, the parent <form> node is missing! All the child nodes of the missing <form> are present though.
How could this happen? I'm using django 1.9.2.
I just compared the source vs the DOM, and the <form> tag is present in the source, but not the DOM. The reason was that I had inadvertently created a nested form (which is not allowed).
How can i create a html form that action attribute have 2 destination.I want when user click on submit bottom , check if user entered wrong data the page goes to another pages with window.location and if user insert the correct input goes to main page with the same instruction.
First of all, what do you mean by correct input?
Main form data validation occurs in server side, not client side. you'd better use client side just for simple verification, like for typos.
There is no need for 2 destination pages (as you call it so).
You may use the standard action attribute which is the page on the server to which you are sending your form data.
there, You have the option to decide which condition needs what action and send the data (and then the user) to the desired page / action.
Sample code for the form
<form id='myform' action='action.php' method='POST' target='formresponse'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' maxlength="50" /><br/>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' maxlength="50" /><br/>
<input type='button' name='Submit' value='Submit' />
</form>
<iframe name='formresponse' width='300' height='200'></frame>
Multiple action
function SubmitForm()
{
document.forms['contactus'].action='action1.php';
document.forms['contactus'].target='frame_result1';
document.forms['contactus'].submit();
document.forms['contactus'].action='action2.php';
document.forms['contactus'].target='frame_result2';
document.forms['contactus'].submit();
return true;
}
I am outputting data from a query to an html table for representation. On the Right corner of the table I have an "Update" button and a "Delete" button.
What I am trying to do is:
When I press on the update button a modal opens. Inside that modal I have a form which I want to have predefined the values from the current row and be able to edit the specific row
When I press the delete button on a row I want that row to be deleted and reload the page
This is my html table, the last two columns on the right are the buttons
**Survey Name** **Category** **Weight** **Update** **Delete**
Consultation Ambiance 20 Update Delete
Consultation Consultation 40 Update Delete
Consultation Follow Up 40 Update Delete
This is my first query which generates the table
<cfquery name="categories" datasource="#dsn#">
select s.name, s.id as surveyid, rc.categoryname, rc.id as categoryid, sc.cweight
from survey_categories sc
join surveys s on s.id = sc.surveyidfk
join rating_categories rc on rc.id = sc.categoryidfk
where sc.surveyidfk='#form.survey#'
</cfquery>
This is the form I am accessing when I press "Update"
This form has an extra cfloop around the select tag to get the rest of the categories that I have in the database in case the user needs to change the category.
So, for example if I pressed the update button on the second row on my table this form should have Consultation in the drop down menu and the number 40 on the bottom textbox
A small note that may help, the first query that outputs the table also output a unique id with the pair (id, surveyName, Category, Weight). So the update query in the end would be something like
update categories set category='Example', weight='30'
where id='345'
I don't know how much this can help.
<cfoutput>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Update</h3>
</div>
<div class="modal-body">
<form name="update" action="updateSCpair.cfm" method="post">
<input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />
<select name="categories">
<cfloop query="ratingCat">
<option value="#ratingCat.id#" >#ratingCat.categoryName#</option>
</cfloop>
</select>
<br />
<input class="span3" type="number" placeholder="Enter Category Weight" required >
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</form>
</div>
</cfoutput>
UPDATE
TO make it more clear because I think I wrote too much. I need to call a modal on form submittion. I will need to replace my current buttons with a form and then pass all the data through hidden variables. The problem is that this is not working for me. I found another example here but it doesn't seem to work. EXAMPLE
I think the simplest way is to have two forms at the end of each row. You already have the buttons. The rest can be hidden fields.
Your update form would have a target attribute to launch your popup. Since you already have the values from your query, you just submit them to the popup as hidden fields.
Your delete form would submit to the current coldfusion page. At the start of the page, you would have something like this:
<cfif StructKeyExists(form, "DeleteMeOrSomethingLikeThat")>
code to delete record
</cfif>
This will get you started. If you want to improve it later on, you can.
Finally, do one thing at a time.
I am using Coldfusion MX7 and have a basic form which can have several elements that are dynamically added to the form. They are given the same name and are all checkboxes. An example of the form is as follows:
<form action="index.cfm?action=index.report" method="post" id="reportForm">
<div class="report my">
<ul class="connectWith ui-sortable" id="fieldListSelect" aria-disabled="false">
<li class="field" id="field_profileFn" style="">
<a class="action" id="action_profileFn" href="index.cfm?action=index.filter.profileFn" style="display: block; ">filter</a>
<label for="profileFn">First Name</label>
<input type="checkbox" name="reportItem" id="profileFn" value="profileFn">
</li>
<li class="field" id="field_profileSn" style="">
<a class="action" id="action_profileSn" href="index.cfm?action=index.filter.profileSn" style="display: block; ">filter</a>
<label for="profileSn">Surname</label>
<input type="checkbox" name="reportItem" id="profileSn" value="profileSn">
</li>
<li class="field" id="field_contactDate" style="">
<a class="action" id="action_contactDate" href="index.cfm?action=index.filter.contactDate" style="display: block; ">filter</a>
<label for="contactDate">Contact date</label>
<input type="checkbox" name="reportItem" id="contactDate" value="contactDate">
</li>
</ul>
</div>
</form>
Once the form is posted I get the following through cfdump:
<table class="cfdump_struct">
<tr><th class="struct" colspan="2" onClick="cfdump_toggleTable(this);" style="cursor:hand;" title="click to collapse">struct</th></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">CONTACTDATE_FROM</td>
<td> Thu May 19 2011 00:00:00 GMT+0100 (GMT Daylight Time) </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">CONTACTDATE_TO</td>
<td> Thu May 19 2011 00:00:00 GMT+0100 (GMT Daylight Time) </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">FIELDNAMES</td>
<td> REPORTITEM[],CONTACTDATE_FROM,CONTACTDATE_TO </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">REPORTITEM[]</td>
<td> profileFn,profileSn,contactDate </td></tr>
</table>
The element REPORTITEM[] is reported and in trying to access this as a variable I get:
<cfset testing = form.reportItem[]>
Invalid CFML construct found on line 6 at column 50.
In trying to access the variable in the way I would expect I get the following:
<cfset testing = form.reportItem>
Element REPORTITEM is undefined in FORM.
I have inherited this code and it MUST have worked previously. Coldfusion has not been upgraded (obviously being CF 7 still) and nothing else has changed server side that I can think of.
My questions:
Is this just a limitation of CF7?
This should work right or is this totally wrong?
I am going to have to re-write quite a bit of this code if this just doesn't work, handling this after the data has been posted would be easier to code. Modifying the form will be more effort, so is it possible?
Try doing
<cfset testing = form["reportItem[]"]>
This will fetch the form struct by the key "reportItem[]".
As far as I know, CF7 has no problem with this. In fact, I'm pretty sure that the value of your checkboxes is constructed by the browser, not the webserver or CF.
Here's what I see:
form.variableNamve[]
will not work, because the value is coming back as a comma-delimited list.
You will run into the not defined error if no checkboxes are checked, because if no checkboxes with that name are checked then that variable will not be submitted by the browser, and therefore will not exist in the form scope. You should default this, and there are a couple of ways to do it.
You can create a new struct with the checkbox name as a key, the empty string as the value, then structAppend the form scope on top of it.
You can use the traditional cfparam tag.
You can add a hidden form field with the same name and the empty string as a value to the form. This forces the browser to return the form field, even if no checkboxes are checked.
HTH.
Are you posting through jQuery ajax or using normal submit button. I think jQuery add variablename[] while posting it but there is way to disable it. But in case of submit button I will get checkbox only in form structure only if atleast one checkbox is checked.
In this case always cfparam checkbox name with your default value.