I have a ScriptRunner Fragment which shows a form dialog. Here is the code:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
#BaseScript CustomEndpointDelegate delegate
showCloneEazyBIAccounts() { MultivaluedMap queryParams ->
def dialog =
"""<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true">
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Clone EazyBI Accounts by Model</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
<div class="aui-dialog2-content">
<form class="aui" action="/rest/scriptrunner/latest/custom/cloneJE2Cube" method="post">
<div class="field-group">
<label for="accountNames">Account Names <span class="aui-icon icon-required"></span></label>
<input class="text medium-field" type="text"id="accountNames" name="accountNames" placeholder="Cubo 1, Cubo 2...">
</div>
<div class="field-group">
<label for="projectKeys">Project Keys <span class="aui-icon icon-required"></span></label>
<input class="text medium-field" type="text"id="projectKeys" name="projectKeys" placeholder="JESC, JEBACK....">
</div>
<div class="field-group">
<label for="model">Model <span class="aui-icon icon-required"></span></label>
<select class="select" id="model" name="model">
<option>Select</option>
<option>JESC</option>
<option>JEBACK</option>
<option>COM</option>
<option>AGILE</option>
</select>
</div>
<div class="buttons-container">
<div class="buttons">
<input class="button submit" type="submit" value="Clone" id="clone-button">
</div>
</div>
</form>
</div>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-hint"></div>
</footer>
</section>
"""
Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}
I need this form to send the data to another custom rest endpoint (that it works fine when i call it from postman), but when I submit this dialog, it appears "XSRF check failed".
Is there a way to make it work?
Best regards,
Eloi.
Finally I solved the problem sending the request with AJAX and adding headers: { 'X-Atlassian-Token': 'nocheck' }.
Hope this helps!
It's because of headers that are added by your browser, In this case I think the problem is User-Agent header, override it to something dummy if it doen't solve the problem open networking tool of your browser and make override all custom headers which are added by your browser.
In our case, there were two possible solutions.
Change User Agents Header (Not possible as far as I know in Chrome)
Whitelist/Allowlist the origin domain in Jira. When you send a request to the Jira API your browser automatically populates the "origin" header. You need to add that value to the whitelist/allowlist in Jira. -> See here:
https://confluence.atlassian.com/adminjiraserver073/configuring-the-allowlist-1014667631.html
Type "Domain" should work.
See the issue documented by Atlassian:
https://confluence.atlassian.com/jirakb/rest-api-calls-with-a-browser-user-agent-header-may-fail-csrf-checks-802591455.html
Related
I have a "GET" / "POST" split on my html page courtesy of a python flask script:
def home(name=None):
if request.method == "GET":
return render_template('home.html', name=name)
if request.method == "POST":
files = request.form["file[]"]
do things with the files
On my home.html page, I have added in some bootstrap code to make everything pretty, but the flask module is now not taking in the form data properly. Here's my html code:
<form id="uploadbanner" enctype="multipart/form-data" method="post" action="{{ url_for('home') }}">
<div class="form-group">
<div class="container">
<div class="page-header">
<br>
<h1>Title</h1>
<br>
<br>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-s-6 col-xs-12">
<h4>File Control</h4>
<div class="jumbotron">
And my form data is here:
<input type="file" name="file[]" id="inputnameid" multiple=""/>
</div>
</div>
Second Column
</div>
New Row, etc etc
Each new row has buttons and inputs that I want to match with the form data using the name field.
I know I'm not structuring this properly, but I can't seem to find any info on how to mesh bootstrap and forms.
I think in order to get the files, you should use request.files["file[]"] instead of request.form["file[]"] .
I am trying to load a htm to a div in another htm but I keep getting the error below:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Here is my scenario:
First.html (html)
<div id="selectedPage"></div>
First.html (script)
<script>
function loadHTML2Div(htmlPage){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
$("#selectedPage").html(xmlHttp.responseText);
}
};
xmlHttp.open("GET", htmlPage, true); // true for asynchronous
xmlHttp.send(null);
}
$(document).ready(function(){
loadHTML2Div("Second.htm");
});
</script>
Second.htm (html)
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class='jumbotron'>
<span>Verifique as datas disponíveis e agende seu evento.</span>
</div>
<div data-provide="calendar" id="calendar"></div>
</div>
</div>
</div>
<div class="modal fade" id="preReservaModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modaldate"></h4>
</div>
<div class="modal-body ">
<div class="form-group">
<label for="exampleInputNome">Nome Completo</label>
<input class="form-control" id="exampleInputNome" placeholder="Digite seu nome completo" type="nome">
<br/>
<label for="exampleInputEmail1">Email</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Digite seu email" type="email">
<br/>
<label for="exampleInputTelefone">Telefone para contato</label>
<input class="form-control" id="exampleInputTelefone" placeholder="Digite seu telefone para contato" type="telefone">
<br/>
<label for="exampleInputPlano">Pacote</label>
<select class="input-large form-control">
<option value="" selected="selected">Selecione um pacote</option>
<option value="DI" >Diamante</option>
<option value="ES">Esmeralda</option>
<option value="RU">Rubi</option>
</select>
</div>
</div>
<div class="modal-footer">
Fechar
Confirmar
</div>
</div>
</div>
</div>
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
</body>
I also have a navbar-nav from bootstrap on top of my First.htm for the navigation, and I also have a Third.htm and Fourth.htm that can be opened when the navbar is clicked. I use loadHTML2Div for switching between the contents of the . I don't know if this is the best approach.
As far as I searched this Synchronous XMLHttpRequest error, I would fix it by using ajax async call. I tried using xmlHttpRequest as mentioned above and I also tried using .ajax async
function loadHTML2Div(htmlPage){
$.ajax({
async: true,
type: "GET",
url: htmlPage,
success: function(data){
$("#selectedPage").html(data);
}
});
}
But I got the same error.
Please advise me how can I avoid this sync error. As you can see I tried different ways before elaborating this question.
If you need more information please let me know.
Edited
I kept testing and I fixed this error in some htmls. The problem was I was adding the Jquery and the bootstrap js in both First and Third html for example.
I removed the script declaration from the third.htm for example and left only the declaration in the 'upper' html (First.html). So somehow declaring it on both files was causing me the error.
Unfortunatelly, I still have a problem with the Second.htm which I copied to this question. This htm has a calendar and a bootstrap combobox. If I delete them from the Second.htm and write them in the First.htm, it doesn't work.
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
I also have some scripts for the clickDay and setMinDate in the Second.htm as shown below which fail if I remove the scripts declaration and move it to the upper First.htm.
$('#calendar').data('calendar').setMinDate(todayDt);
So it seems to me my lack of knowledge is leading me to this problem. It is probably very simple to solve it, if someone could help me i will appreciate.
set your the ajax attribute async to false
$.ajax({
async: false,
type: "GET",
url: htmlPage,
success: function(data){
$("#selectedPage").html(data);
}
});
I finally figured out what the problem was.
I moved the scripts declaration from Second.htm to First.htm
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
Then I changed my html from
<div data-provide="calendar" id="calendar"></div>
to
<div id="calendar"></div>
and created the calendar in the ready function
<script>
$( document ).ready(function() {
$('#calendar').calendar();
});
</script>
As I am a newbie in web development, I know this is still not the best way to structure my website navigation using navbar from bootstrap. For now I will leave this way.
My goal is to have my first htm with the navbar and the contents from each navbar item in different htms (as I have now), but I want the url to change as I click each item:
www.mywebsite.com/First.htm
www.mywebsite.com/Second.htm
www.mywebsite.com/Third.htm
And right now I only have
www.mywebsite.com/First.htm
Where all my scripts are included in the First.htm. It means I am loading the calendar.js even if I don't open the calendars page.
Well, I hope I will help someone with my question/answer in the future even though it is a little confusing. I promise next time I will have more knowledge.
some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>
Using PhoneGap...
I would like to find a way to prevent the navigation for data-role='page', if the user has no network connection. I'm having a hard time finding any resources for this, am a few hours deep on google searching, although I could be using the wrong terms.
I want the user to only be able to navigate here if there is network connection:
<div data-role="page" id="Location">
<div data-role="header" data-theme="e">
Incid..
<h1>
Location</h1>
Use Current
</div>
<!-- /header -->
<div data-role="content">
<!--<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>-->
<div id="map_canvas">
</div>
</div>
Using this jQuery for pageshow:
$('#Location').live('pageshow', function (event, ui) {
try {
display();
}
catch (e) {
log(e);
alert(e);
}
});
I know I should be able to catch the network status using if(navigator.network.connection.type == 'none'), but I'm having difficulty stopping the Location page from showing.
Use $.mobile.changePage('#pageID') to change the page depending on if the user has a network connection or not.
I have a main view that renders two partial views. The main view encompasses both of the partial views within a form. Each of the partial views also contain forms. All 3 views share the same viewmodel. What I want to do is encapsulate the data from all views with the main view, and run specific Controller action results with the partial views.
I want to know if this is even possible. When debugging I see that my content always posts to the HTTPPost of the Main views form. I have submit buttons for each of the forms accordingly. Sorry for the code post, its coming out all split up.
Main View:
#using (Html.BeginForm("Main", "Registration", FormMethod.Post,
new { #class="mainform" }))
{
<form>
<fieldset>
<div id ="option1" class="conglomerate">
#Html.Partial("_GetBusiness")
</div>
<div id ="option2" class="dealership">
#Html.Partial("_GetLocation")
</div>
<button type="submit" value="Create" class="buttonBlue" id="">
<span>Create a new dealer</span>
</button>
</fieldset>
</form>
Partial 1
#using (Html.BeginForm("CreateBusiness", "Business", FormMethod.Post,
new { #class="buisinessform" }))
{
<form>
<div class="editor-field">
#Html.DropDownListFor(m =>m.BusinessId, new SelectList(Model.Businesses,
"BusinessId", "BusinessName"), "")
</div>
<label>Your company not listed? Register yours below:</label>
<div class="editor-label">
#Html.LabelFor(model => model.BusinessName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BusinessName)
#Html.ValidationMessageFor(model => model.BusinessName)
</div>
<button type="Button" value="" class="buttonBlue"id="TestSubmit">
<span>Add Dealer</span>
</button>
<div class ="confirm">
<button type="submit" value="Create" class="buttonBlue" id="">
<span>Click here to confirm dealer addition</span>
</button>
</div>
</form>
}
As Dave mentions, It is not valid HTML to nest forms. It's not just HTML5, but any version of HTML.
It might work in some browsers, in certain circumstances, but it is never valid. And you can never depend on what will happen even if it does seem to work. Your best course of action is to use multiple non-nested forms on a page.
Can you explain why you think you need nested forms?
No, you cannot have nested forms. Sorry.
See HTML5 guidelines
"Flow content, but with no form element descendants"