I want to do something seemingly simple in livewire. I want to set the value of a hidden input field based on an attribute from a button that's clicked. I can console.log the ID I'm looking for, and it works. I can see that the value of the input is updated in the UI, however, it's updated to what appears to be the Livewire hash or ID of the element. I just want the regular id. Am I doing this wrong?
here's the link that's clicked, and I want to put the $status->id into the hidden input:
<a role="button" id="task_status_{{ $status->id }}" class="add-task-btn"><i class="mdi mdi-plus-circle h5 text-muted" data-bs-toggle="modal" data-bs-target="#createOrUpdateTask"></i></a>
The input:
<input id="status_id_input" value="" hidden>
The js:
$('.add-task-btn').on('click', function(el) {
let status = el.currentTarget.id.split('_')[2];
$("input[id=status_id_input]").val(status);
});
Maybe I'm not thinking about this in a livewire-y way, but this is something I've done countless times in the past.
If I console.log the status I get a number, like 2, for example.
But when I look at the markup, the value of the input is like this:
wTz06yjQoQErKT3p36EKP4zZwWjJgIsUOttX4URL
I was wanting to do this without a round-trip to the server since it's just a simple thing.
Change your code from this
<input id="status_id_input" value="" hidden>
To this
<input id="status_id_input" value="yourvalue" type="hidden">
Related
I need to get a value from the select component of my page and set its value as a parameter in the href.
<td class="body-item mbr-fonts-style display-7"><a th:href="#{/export(exportEntity='Person',semester='javascript:document.getElementById(\'semester\').value')}">Download</a></td>
Semeter variable has the value at my server side:
semester = javascript:document.getElementById('semester').value
and not the dropdown value.
Unfortunately, this code is not picking the value from the select component. Any guess what I have done wrong here.
Thymeleaf runs on the server, while JavaScript runs on the browser. You can't mix it like that.
It's difficult to say what to do, because your question is lacking context, specifically: What is the element with the id semester?
If it's a select element (or another form element), then it would be possible to use neither Thymeleaf nor JavaScript, but a simple form:
<form method="get" action="/export">
<input type="hidden" name="exportEntity" value="Person">
<select name="semester">
<option value="A">Semester A</option>
<option value="B">Semester B</option>
</select>
<input type="submit" value="Download">
</form>
Clicking on the button will have the browser generate an URL such as /export?exportEntity=Person&semester=A and go to it.
I'm using Jetstream blade components in my project, including x-jet-dialog-modal and x-jet-input. The modal window is used to add or edit records and works fine. The inputs are bound to a model "person" using the "wire:" syntax, and everything goes as expected.
Now I want to use the same modal window to show the record fields in a read-only manner, when pressing a "view" button. My idea is to make the inputs read only and hide the "save" button dynamically, using a public property of the Livewire controller (component).
So, in Livewire component I have a default value:
public $disableEdition = false;
And in the blade file:
<div class="mt-2">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="form-control" wire:model.defer="person.name" {{ $this->disableEdition ? 'readonly' : '' }}/>
<x-jet-input-error for="person.name" class="mt-2" />
</div>
I expected the input field to appear with attribute "readonly" (and of course non-editable and formatted with corresponding Bootstrap styles), but the browser inspector reveals that no attribute was added to the input.
Maybe you can help me with a solution or even a better approach to accomplish my goal.
Best regards.
I have a web application based on bootstrap (so, using jquery), and I'm trying to convert a classic html form-based search form to an ajax search form (to avoid page reload).
In the classic form-based, the button sends the html form as post, and the action page returns a table of results below the same form.
something like:
<form action="/search" method="post">
<input type="text" name="searchterms">
<button type="button" onclick="submit();">Search!</button>
</form>
In the ajax version, there is no form, but just a text field and the button calls a dosearch() function which makes an ajax request to a back end script which return search results, which are then used in a target DIV, showing a table of results, below the search input+button.
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
Both work fine, but the second way avoid the browser to "collect" previously used search terms - I guess because there's no "submit".
My users like this "previous search terms" suggestion, and I would like to add it back, if possible, in the search "ajax" form.
I also tried to create an html form anyway, which encloses the input and the button, adding this event to its tag:
onSubmit='dosearch();return false;'
(if I don't return false, the form is submitted and action page loaded), like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
</form>
but even this seems not to work: new search terms are not "remembered" and suggested typing in the field...
I thought maybe my dosearch() function could add (most recent) search terms into a session/cookie but then I would need to read those stored values and create, each time, a sort of "dropdown" list for the input field, just as browsers usually do automatically... it should be not complicated but probably overkill...
Is there any way to make browsers "remember" inserted values even without submit? If not, what workaround is best/easiest?
edit: I've just found this
input remembered without using a form
but maybe after 5 years something changed?
I just tried to change the "button" type, to a "submit", and in this way it seems to work... page is not reloaded, ajax fills the results div and my new terms are remembered...
like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="submit" >Search!</button>
</form>
it seems that if the "submit" is triggered through a "submit" button (even if it return false) the browsers stores input field values...
you need to do with ajax
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms" id="searchTerm">
<button type="button" onclick="dosearch();">Search!</button>
<script type="text/javascript">
function dosearch(){
val = $("#searchTerm").val();
$.ajax({
url: "LoadProduct.php?val ="+val,
type: "GET",
processData: false,
contentType: false,
}).done(function(respond){
$("#LoadProductTd"+no).html(respond);
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
});
}
</script>
so you can create LoadProduct.php file and in file you will get your search term n $_GET['val']
so you can use this for your query
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
<input type="text" ng-repeat="board in allBoards track by $index" ng-model="board">
✔
What I am trying to do is modifying board name with UpdateBoards(). But I click the button, values of the input are not passed to UpdateBoards, what should I change? Thanks
So for I understand your problem try following:
<div ng-repeat="board in allBoards track by $index">
<input type="text" ng-model="board">
✔
</div>
By wrapping ng-repeat in div and calling each input and a href tag inside div, hope it will help you.