I ma getting the error on the script $bank that must be of type string. and on my controller I have defined it as a string
<select wire:model="bank" name="bank" class="form-select">
#foreach($banks as $bank)
<option value="'{{$bank->name}}'">{{$bank->name}}</option>
#endforeach
</select>
This is the script where am getting the error when emitted htmlspecialchars(): Argument #1 ($string) must be of type string, stdClass given
<script type="text/javascript">
window.onload = function() {
Livewire.on('changeModels', () => {
// Code Here
toggleViews({{$bank}})
// $('.bank-mode').removeClass('d-none').siblings('.driver-pay-method').addClass('d-none')//
})
}
</script>
Contoller I have defined $bank variable as string.
public String $bank="";
public function updatedBank($value)
{
$this->bank =$value;
$this->emit('changeModels');
}
You're looping the $banks variable into $bank. By doing this, you're overwriting the $bank variable in your blade view, from the string that you expect to the last available bank object. If you change the variable name, then it should function:
<select wire:model="bank" name="bank" class="form-select">
#foreach($banks as $bankModel)
<option value="{{$bankModel->name}}">
{{$bankModel->name}}
</option>
#endforeach
</select>
Related
I want to get the string value from my HTML <Select> tag in ASP.NET Core using C#, but I don't know how to do it...
<select asp-for="selectcity" asp-items="Model.Options"
name="SelectCityTag" style="width:-moz-available">
</select>
Try the following:
<script type="text/javascript">
$(document).ready(function () {
var e = document.getElementById("Selection");
$("#Selection").val(e.options[e.selectedIndex].value);
});
function changefunc(val) {
$("#Selection").val($("#selectcity").val());
}
</script>
#using (Html.BeginForm("SelectionProcessing", "Home"))
{
<input id="Selection" name="Selection" type="hidden" />
<select asp-for="selectcity" asp-items="Model.Options" name="SelectCityTag"
onchange="changefunc(this.value)"
style="width:-moz-available">
</select>
<button type="submit">Process Selected value</button>
}
And in the controller:
[HttpPost]
public IActionResult SelectionProcessing(string selection)
{
// your code...
}
I am new to React TypeScript. I have a problem with the passing state. When I tried to pass the state to a child component and conosle.log(state), I can see the correct object. But, when I tried to do console.log(state.name), I have an error. How can I solve this problem?
App.tsx
export interface Information {
name: string;
age: string;
}
const App: FC = () => {
const [state, setState] = useState<Information | null>({
name: "young",
age: "10",
});
return (
<div className="App">
<div className="header">
<div className="inputContainer">
<input type="text" placeholder="Task.." name="task" />
<input type="number" placeholder="Deadline" name="deadline" />
</div>
<button>Add Task</button>
<div>
<MyForm state={state} />
</div>
</div>
</div>
);
};
Child component
type Props = {
state: ReactNode;
};
const MyForm: FC<Props> = ({ state }: Props) => {
console.log(state.name); // Error
return <div>Hello, {state}</div>;
};
export default MyForm;
Thank you!
The error because you're trying to read the state object inside JSX
return <div>Hello, {state}</div>
Read it like you would with objects instead:
return <div>Hello, {state.name}</div>
Also in your MyForm Component Props, use your Information interface as a type definition instead of ReactNode
export interface Information {
name: string
age: string
}
type Props = {
state: Information
}
I have a Livewire component where I have a select form field.
I want the field to a) be bound to the model, and b) have another HTML field show when the value changes.
I want to use a combination of Livewire for model binding and Alpine.js to react to field changes.
<div
x-data="{ isExtraData : false, display_type : '' }"
x-init="$watch('display_type', () => { isExtraData = display_type != 'text_field' })"
>
I can either have the proper value set on the HTML element, OR I can have the interactivity when I change the value in the drop down, but if I have both (as below) then the value isn't bound to the select field.
<select id="display_type" class="form-control mr-2" style="width:auto" wire:model="display_type" x-model="display_type" required>
use sample :
livewire:
class Dropdown extends Component
{
public $showDropdown = false;
public function archive()
{
...
$this->showDropdown = false;
}
public function delete()
{
...
$this->showDropdown = false;
}
}
template :
<div x-data="{ open: #entangle('showDropdown') }">
<button #click="open = true">Show More...</button>
<ul x-show="open" #click.outside="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
</ul>
</div>
more :
enter link description here
i'm newbie in react js , and i want to have a form with select options
i want that when user click on each option , each option render different elements
class Resepy extends Component {
state = {
Resepy : 'default'
}
render() {
return = (
<div className="Resepy">
<form>
<select id="id_field1" name="field1" onChange={(e) => this.state.Resepy = "Burger"}>
<option value="default">Food type not selected</option>
<option value="burger" onClick={(e) => this.setState({ Resepy: 'Burger' })}>Burger</option>
<option value="pizza" onClick={(e) => this.setState({ Resepy: 'Pizza' })}>Pizza</option>
</select>
<div className="food">
{ this.state.Resepy === "burger" ? <div className="burger"></div> //can return any html
: <div className="default">default</div>
}
<div className="pizza"></div>
<div className="food-detail"></div>
</div>
<button type="submit">Add to tray</button>
</form>
</div>
);
}
}
export default Resepy;
General ternary operator used for more readable code.
Like this:
<form>//can be any element
{ codition == true ? <div>It is true</div> //can return any html
: <div>It is false</div>
}
</form>
Tested, working. Problem was with onClick method option cannot invoke that event.
class Resepy extends React.Component {
constructor(props){
super(props);
this.state = {
selected : 'default'
};
}
setSelected = (event) => {
let select = document.getElementById("id_field1");
this.setState({selected: select.value});
//document.getElementById("test").innerHTML = select.value;
}
render() {
return (
<div className="Resepy">
<h1>Something</h1>
<form>
<select id="id_field1" name="field1" onChange={this.setSelected}>
<option value="default">Food type not selected</option>
<option value="burger">Burger</option>
<option value="pizza">Pizza</option>
</select>
<div id="test"></div>
<div className="food">{
(this.state.selected === "default") ?
<div className="default">Default</div>
: (this.state.selected === "burger") ?
<div className="burger">Burger</div>
: <div className="pizza">Pizza</div>
}</div>
<button type="submit">Add to tray</button>
</form>
</div>
);
}
}
I have a hard time understanding you, but the most likely thing you could be trying to achieve with the following code from your original question:
<div className="burger" Resepy={this.state.Resepy === 'burger'}></div>
is:
<div className="food">
<div className={this.state.Resepy} />
</div>
Working example (but I am using Hooks instead of a class component):
const App = () => {
const [selected, setSelected] = React.useState('default')
const handleChange = (event) => {
setSelected(event.target.value)
}
return (
<div>
<select value={selected} onChange={handleChange}>
<option>default</option>
<option>burger</option>
<option>pizza</option>
</select>
<div className="food">
<div className={selected}>{selected}</div>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
.default { color: gray; }
.burger { color: orange; }
.pizza { color: red; }
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
Now i want to render html elements depends on values , i tried this but it shows just [Object Object]
setSelected = (event) => {
let select = document.getElementById("id_field1");
document.getElementById("food").innerHTML =
select.value == "default" ?
<div className="default">Default</div>
: select.value == "Burger" ?
<div className="burger">Burger</div>
: <div className="pizza">Pizza</div>
}
I'm trying to build a simple login system and I have 2 different templates in it: One when the user is not logged in yet (which displays a "sign in" button), and one when the user is logged in (which displays the username)
By default, the first one is displayed. But when the user is logged in, my first template is not destroyed and my second template is not displayed.
<template is="dom-if" if="{{!logged}}" restamp="true">
<div class="box" id="notLogged">
<paper-button class="loginButton" on-tap="loginPopup"><iron-icon class="avatar" icon="account-circle"></iron-icon><span id="notLoggedMessage">Sign in</span></paper-button>
</div>
</template>
<template is="dom-if" if="{{logged}}" restamp="true">
<div class="box" id="logged">
<paper-button class="loginButton" on-tap="logoutPopup">
<img src="https://placehold.it/40x40" alt="user avatar" />
</paper-button>
</div>
</template>
and now the script. As you can see, I don't use any ajax yet because the service is not done yet. So I'm faking it with "loginOk" value
Polymer({
is: 'system-login',
properties: {
logged: {
type: Boolean,
value: false}
},
loginPopup: function (e) {
loginWindow.open();
},
logoutPopup: function (e) {
logoutWindow.open();
},
checkLogin: function () {
var loginOk = 1;
if (loginOk === 1) {
this.logged === true;
loginWindow.close();
} else if (loginOk === 2) {
errorMessage.style.display = "inline";
} else {
return;
}
}
});
The problem is this.logged === true;. === in JavaScript is a comparison operator and not an assignment operator. So what your code does is it compares the value and type of this.true with Boolean true and returns false (which you are not catching).
Changing it to this.logged = true should do the trick