I am working on livewire in my project and I encounter a problem.
I have livewire model and blade file as below:
LivewireCounter.php
class LivewireCounter extends Component
{
public $count;
public function render()
{
return view(Constant::LIVEWIRE_COUNTER_BLADE);
}
public function mount($count = 0)
{
$this->count = $count + 1;
}
public function increment()
{
if($this->count >= Constant::LIVEWIRE_COUNTER_MAX)
{
$this->count = Constant::LIVEWIRE_COUNTER_MAX;
} else {
$this->count++;
}
}
public function decrement()
{
if($this->count <= Constant::LIVEWIRE_COUNTER_MIN)
{
$this->count = Constant::LIVEWIRE_COUNTER_MIN;
} else {
$this->count--;
}
}
}
livewire-counter.blade.php
<div>
<div class="flex inline-block relative w-64">
<button class="px-1" wire:click="decrement">-</button>
<h1>{{ $count }}</h1>
<button class="px-1" wire:click="increment">+</button>
</div>
</div>
I have a coupon blade file which uses livewire to track the coupon ordered by user.
coupon-show.blade.php
#extends(Constant::LAYOUTS_APP)
#section(Constant::LAYOUTS_CONTENT)
<div class="container">
<div>
<p class="text-4xl text-extrabold text-gray-900">{{ $CouponSetting->name }}</p>
#livewire('livewire-counter', ['count' => 9])
</div>
{{$count}}
</div>
</div>
#endsection
The problem I am having is I am unable to retrieve the $count value in the coupon-show.blade.php file. I thought the public property of the livewire component should be able to be accessed by blade view?
ErrorException
Undefined variable: count (View: /Applications/MAMP/htdocs/XXX/resources/views/layouts/coupons/coupon-show.blade.php)
Any idea why?
Related
Component A (Search)
component class:
namespace App\Http\Livewire\Admin\Shared;
use Livewire\Component;
class Search extends Component
{
public $searchString = '';
public function updated()
{
$this->emitUp('searchForm', $this->searchString);
}
public function searchData()
{
$this->emitUp('searchForm', $this->searchString);
}
public function render()
{
return view('livewire.admin.shared.search');
}
}
component view:
<form wire:submit.prevent='searchData' class="d-none d-sm-inline-block">
<div class="input-group">
<input wire:model.lazy='searchString' id="textSearch" name="textSearch" type="text"
class="form-control bg-white border border-primary small" placeholder="Tìm kiếm...">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
Component B (List)
component class:
public $searchString = '';
protected $listeners = ['searchForm'];
public function searchForm($searchStringEmit)
{
$this->searchString = $searchStringEmit;
}
public function getListSupplier()
{
$data = Supplier::where('active', true)
->where('name', 'like', '%' . $this->searchString . '%')
->orderByDesc('id')
->paginate(2);
return $data;
}
public function render()
{
return view('livewire.admin.supplier.list', [
'ListSupplier' => $this->getListSupplier()
]);
}
I have problem with blade front-end. After I click button-search, component-search auto change component view show text wire:id<####>, instead of component-search view.
Example image:
enter image description here
It should have been <div wire:id="xxx"> that's how Livewire marks it's components. Make sure you don't have javascript doing some DOM manipulation. Check your template for more 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 got stuck at this javascript code,why it is not working ,I used a static backdrop bootstrap model for login,after successful login ,i want to hide the model in success callback function but the model is not hiding,the Page is still there,don't know what i am doing wrong
enter image description here
Myjs File
$(document).ready(function () {
$('#myModal').modal({
backdrop: 'static',
});
});
function Login() {
var dataobject = { Social_Security_Number: $('#Social_Security_Number').val(), Lumik_Id: $('#Lumik_Id').val() };
// var dataobject = { Social_Security_Number:"123456789", Lumik_Id: "sgupta8" };
$.ajax({
url: '/User/Login',
type: "POST",
data: dataobject,
dataType: "json",
success: function (result) {
if (result.toString == "Success") {
$('#myModal').modal('hide');
//redirecttoPage()
}
},
error: function (result) {
alert('Error');
}
})
}
UserController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using login.Models;
namespace login.Controllers
{
public class UserController : Controller
{
UserBusinessLogic obj = new UserBusinessLogic();
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(User user)
{
string message = "";
if (ModelState.IsValid)
{
if (obj.checkuserlogin(user) > 0)
{
message = "Success";
}
else
{
message = "Username or Password is wrong";
}
}
else {
message = "ALL FIELDS ARE REQUIRED";
}
if (Request.IsAjaxRequest())
{
return Json(message, JsonRequestBehavior.AllowGet);
// return RedirectToAction("Profile", "User", new { #name = result });
}
else
{
return RedirectToAction("Index", "Home");
}
}
public ActionResult Profile(string name)
{
return View();
}
}
}
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
</head>
#*<script src="../../Scripts/jquery-1.9.1.js"></script>*#
<script src="../../Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/Myfile.js"></script>
<link href="../../Scripts/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/bootstrap.min.js"></script>
<body>
#RenderBody()
</body>
Login.cshtml
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
</div>
<br />
<div class="form-group">
<label for ="Social_Security_Number" class="col-lg-3 control-label"></label>
<input class="form-control" id="Social_Security_Number" placeholder="Social Security Number" type="text" />
</div>
<div class="form-group">
<label for="Lumik_Id" class="col-lg-3 control-label"></label>
<input class="form-control" id="Lumik_Id" placeholder="Lumik Id" type="text" />
</div>
<div class="modal-footer">
<input type="button" value="Login" class="btn btn-primary" onclick="Login()" />
</div>
</form>
</div>
</div>
</div>
<style>
.modal-dialog {
max-width:480px;
}
.modal-dialog {
transform:translate(0,58%) !important;
-as-transform:translate(0,58%) !important;
-webkit-transform:translate(0,58%) !important;
}
.RbtnMargin {
margin-left:90px;
}
</style>
Could you try : $(document).find('#myModal').modal('hide'); instead of $('#myModal').modal('hide');
Reason is : your data added dynamically.
Let me know.
I'm doing an employees list that is loaded from SQLite database. I don't know why my list is empty, but I can see via JSON.stringify that data is comming.
I'm using AngularJS and Cordova Framework. Debugging with Ripple.
listEmployees.html
<div data-role="page" apply-jq-mobile>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
</div>
<div class="ui-block-b">
<a data-role="button" href="#/new" data-icon="plus" data-iconpos="left">
New
</a>
</div>
</div>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Employees
</li>
<li data-theme="c" ng-repeat="employee in employees">
{{employee.name}}
</li>
</ul>
</div>
</div>
EmployeeCtrl
function EmployeeCtrl($scope, Employee){
$scope.employees = Employee.getAllEmployees();
$scope.saveEmployee = function(id) {
if(id){
//TODO
} else {
Employee.addEmployee($scope.employee);
}
}
}
Employee
app.factory('Employee', function() {
var data = {};
data.addEmployee = function(_employee, callback) {
var employee = new Employee();
employee = _employee;
DbService.db.employees.add(employee);
DbService.db.saveChanges(callback);
}
data.getAllEmployees = function() {
DbService.db.employees.toArray(function(employees) {
console.log(JSON.stringify(employees));
return employees;
});
};
return data;
});
I think you need to use promises. Your call to db is asynchronous and therefore view is getting rendered before your data arrives.
data.getAllEmployees = function() {
var $d = $q.defer();
DbService.db.employees.toArray(function(employees) {
console.log(JSON.stringify(employees));
$d.resolve(employees);
});
return $d.promise;
};
Angular templating system wait for all the promises to get resolved before rendering. So I think this will solve your problem.
So, I solved it.
function EmployeeCtrl($scope, Employee){
Employee.getAllEmployees(function(employees){
$scope.employees = employees;
$scope.$apply();
});
}
.
app.factory('Employee', function() {
var data = {};
data.getAllEmployees = function(callback) {
DbService.db.employees.toArray(function(employees) {
callback(employees);
});
};
return data;
});
Thank you all!