I have been stumped on this for a couple hours and can not figure a way around it.
Larvel 8 with Livewire
I have a very basic form.
<form action="/dashboard/payment" method="POST">
#csrf
<button type="submit" class="btn btn-primary my-3 w-100" id="checkout-button">
<span wire:loading>Please Wait</span>
<span wire:loading.remove>Pay - $
<span>100</span>
<br>
<small>Description of payment</small>
</span>
</button>
</form>
But the form tag itself it is not rendering the html. It is only rendering the button inside.
When incrementing a value with another button, the form tag is then rendered into html and the button can be used as expected.
The incrementing button only ++ to a value and updates the database with the new value.
This is the only thing holding me back, I have searched everywhere but cant find any information about form tags not rendering.
Note: Neither the opening tag or the closing tag is rendered until the other button is pressed.
Any ideas or information would be fantastic and greatly appreciated.
Related
I'm confused. I've thought it's possible to pass SpringBoot/Thymeleaf objects from the html page to the Modal form. I've come across many examples using ajax to pull data from the REST endpoint instead.
Is using ajax to pull in objects into Modals, the only method?
Thymeleaf is a server side templating language... the concept of a modal form usually means showing/hiding a window opens and closes on the client side (meaning JavaScript that runs when a user clicks a link or a button ). If you don't want to use an API to pull that data (which I think makes the most sense), then you have to create a hidden modal for every row on your page. For example:
<div th:each="item, i: ${items}">
<a href="#"
onClick="openModal(this.getAttribute('data-modal'))"
th:data-modal="|#modal${i.index}|">
Edit modal #<span th:text="${i.index}" />
</a>
<div th:id="|modal${i.index}|" style="display: none;">
<p>I am a modal form for element <span th:text="${i.index}" />!</p>
<input type="text" th:value="${item.value}" />
</div>
</div>
You can see how this works... creating a hidden div/modal form for every row (so you don't have to call an API to get the form values), but it comes with a lot of extra HTML.
Hi there I am submitting a equation from ckeditor and geting MethodNotAllowedException though my form has method type post and route also post.
Here is my view.
<form class="form-horizontal" action="{{route('set-question')}}" id="submit_form" method="post">
{{csrf_field()}}
<div class="col-md126 col-md-9 col-md-offset-1">
<label class="control-label">Question</label>
<p class="help-block" style="font-size:12px;">Question is required</p>
<textarea name="question" class="ckeditor"></textarea>
<input type="submit" class="btn btn-success" value="Submit">
</div>
</form>
If I type this or some other equation only then other problem arise. I have saved by typing other format even with bengali language that was good. Bellow is my route and then the typography I was able to save in db via this route and view.
Route::post('add-question','Admins\ExamController#addQuestion')->name('set-question');
The successful tries.
But after the highlighted equation or format i got MethodNotAllowedHttpException.
Please suggest me what I'm missing.
Thank you in advance.
You can clean your cache. Because i faced sometime this type of problem and after clean my cache it will be fine.
One thing you can try with name route like: name('set.question)
I just updated Firefox to 48.0.1 from 48.0 and now I'm seeing an issue with the Bootstrap tooltip. Looking at the HTML in Firebug, it appears that Firefox is adding a new <div> at the bottom of the page that is not in the .jsp:
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow" style="left: 50%;"></div>
<div class="tooltip-inner">Delete</div>
</div>
This only happens if the tooltip is attached to a button - links are not affected. The links and buttons are column elements in a jQuery DataTables table. The tooltip portion of the code for link vs. button is identical.
Link:
<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>
Button:
<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id},
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>
This DataTables-specific setting is in a .js file included on the page:
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
Removing the above gets rid of the extra <div> but then the tooltip no longer appears with Bootstrap formatting. Adding data-container="body" to the button itself didn't work either.
Any ideas?
EDIT:
Although I just recently noticed the issue I downgraded to 47.0.1 and still see the problem. I will keep downgrading to find out which version this starting appearing in. I don't think it's my code because the production version has the same problem as my dev version. Also, this does not happen in Chrome but it does in Edge.
I found the problem. I have a function that's applied to all pages that sets the input focus for form pages to the first form control. This is because the menu contains a search input and button, which would otherwise get the focus instead of the first form input.
function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}
For some reason that I don't remember now I moved the code to toggle the tooltip (see question) above this focus code. That meant that the first button in the first row of the datatable ended up getting the focus, hence the tooltip being visible when the page was displayed. Moving the tooltip toggle after this focus code fixed the problem.
Obviously, I should be more careful about site-wide code that is specific to a particular issue but ends up being applied to all pages...
Im making a Post form with inputs along with a dropzone Div to upload Photos,
My issue is the following: As Im pushing all the photos to a session until the moment I persist the relation with the post, I dont know exactly how to proceed when some field is Not being filled.
I need to go back and present the form again.
The problem is that all my dropzone photos are being emptied from the form but not from the session. so if I correctly fill the form again and submit the data I will have more photos persisted than they should.
So I was thinking in making an event about some Request has failed(not filled all inputs) then flush the session Photo field.
But I dont know how is represented the fact that this Request has failed, or should I Repopulate the dropzone Div with eg.Input:old.
Can anybody address me or making a suggestion please.
Flushing the session is not a good idea in my opinion. A user who uploaded images will have to do it again when form validation fails. It is better to repopulate them.
The solution
You can add images below your dropzone input in your form and they will be populated as uploaded images. You only need a HTML structure.
In order get HTML structure, you can upload one image (drag n drop in your dropzone), inspect the uploaded image with developer tools and copy the generated code.
The only thing you will have to do, is to add all photos to an array on the server side.
My HTML code:
<div id="photos" class="dropzone">
<input name="file" type="file">
#foreach ($uploadedPhotos as $uploadedPhoto)
<div class="dz-preview dz-processing dz-image-preview dz-success">
<div class="dz-details">
<img data-dz-thumbnail=""
src="{{ $uploadedPhoto['src'] }}"
class="#if ($uploadedPhoto['vertical']) vertical #endif">
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
</div>
<div class="dz-success-mark"><span>?</span></div>
<a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove image</a>
</div>
#endforeach
</div>
You might need to play a little with css or js to style it and make other things functional e.g. remove button.
I have following html code. And I want to using Ruby Mechanize select dropdown element wit specific text (I want to click on it). Example Chinese. My question is how to do this? I am new in Mechanize.
<form class="form-inline search search-large" action="/translate" method="get">
<input id="q" name="q" type="text" placeholder="Search" class="input-large" value="" autofocus="autofocus" data-pons-redirect-input="true" data-pons-autofocus="true" autocomplete="off">
<div class="btn-group source open" data-pons-lang="de">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">
<span class="text">Chinese</span>
<i class="icon-angle-down"></i>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" class="language">
<span class="text">Chinese</span>
<span class="flag flag_zh"></span>
</a>
</li>
<li>
<a href="#" class="language">
<span class="text">Elvish</span>
<span class="flag flag_lb"></span>
</a>
</li>
</ul>
</div>
</form>
Bad News
As far as I see, your example page is too involved to let mechanize interface it with e.g. a .click method. Actually it will be able to follow the links (""), but I guess this will not help you much, because it seems there is some javascript or other black magic involved.
You can try first to see if the page will work nicely (not guaranteed) with mechanize by disabling JavaScript in your browser.
Good News
Anyway, at the end you will want mechanize to do certain kinds of HTTP requests - triggered by JS or not does not matter. That you will be able to do with mechanize (although it might not necessarily be the best choice for all scenarios).
Tips
I encourage you to use your browsers developer thing (often fired up by pressing F12) and see what is really happening, e.g. which form gets submitted with which values. And don't forget to check if its the same when used with and without javascript (mechanize will not execute JavaScript as far as i know).
Also, when developing your mechanize code, use irb or another repl like pry to try your code live. Your mechanize agent or page will have a method save or save_as or similar with which you can always save the current page and review it in your browser or favorite text editor. And remember _ in irb gives you your last return value.