Description:
the 2 way data binding does not work, the value of the variable doesn't update.
Exact steps to reproduce
clean laravel installtaion
livewire install
livewire:make test
Stripped-down, copy-pastable code snippets
livewire/Test.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Test extends Component
{
public $text;
public function render()
{
return view('livewire.test');
}
}
livewire/test.blade.php
<input type="text" wire:model="text">
{{$text}}
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<livewire:styles />
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
<livewire:test/>
<livewire:scripts />
</body>
</html>
Request Ppayload
{fingerprint: {id: "p2OSso56TqMjMT4XN4Oo", name: "test", locale: "en"},…}
fingerprint: {id: "p2OSso56TqMjMT4XN4Oo", name: "test", locale: "en"}
id: "p2OSso56TqMjMT4XN4Oo"
locale: "en"
name: "test"
serverMemo: {children: [], errors: [], htmlHash: "b6eb143a", data: {text: "te"}, dataMeta: [],…}
checksum: "1949b7cded0c349a39cb3f8d9d36a92bd88d5c3a1b676544851ddd229d157c4c"
children: []
data: {text: "te"}
text: "te"
dataMeta: []
errors: []
htmlHash: "b6eb143a"
updates: [{type: "syncInput", payload: {name: "text", value: "test"}}]
0: {type: "syncInput", payload: {name: "text", value: "test"}}
payload: {name: "text", value: "test"}
name: "text"
value: "test"
type: "syncInput"
Context
Livewire version: 2.2
Laravel version: 8.10
Browser: [Edge, Chrome, Opera]
As already written by Qirel your test.blade.php must only have one single root element like this
<div>
<input type="text" wire:model="text">
{{$text}}
</div>
Related
can`t render schema. got this error:
Unable to render this definition The provided definition does not
specify a valid version field.
Please indicate a valid Swagger or OpenAPI version field. Supported
version fields are swagger: "2.0" and those that match openapi: 3.0.n
(for example, openapi: 3.0.0).
Hi! i need to use my static schema, and trying to render this template(from django doc).
but it has not worked
urlpatterns = [
path('swagger/', TemplateView.as_view(
template_name='api_documentations/swagger.html',
), name='swagger'),
html template:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Swagger</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//unpkg.com/swagger-ui-dist#3/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="//unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"></script>
<script>
const ui = SwaggerUIBundle({
swagger: "2.1",
url: "{% static 'static-docs/api/openapi.schema' %}",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],[enter image description here][1]
layout: "BaseLayout",
requestInterceptor: (request) => {
request.headers['X-CSRFToken'] = "{{ csrf_token }}"
return request;
}
})
</script>
</body>
</html>
I'm using vue3 and inertiaJs with Laravel8
I want to change the (TITLE of page) if I change the page
I checked in Inertia documentation this code but it doesn't work with me and the title of the page doesn't change
I installed vue-meta
metaInfo() {
return() {
title: “Home Page”,
}
}
return() is a property, not a function. :) So you should do it like this: return
// parent
metaInfo: {
meta: [{
vmid: 'description',
name: 'description',
content: 'my standard description',
}]
}
// child
metaInfo() {
return {
meta: [{
vmid: 'description',
name: 'description',
content: this.description,
}]
}
},
Learn more at this Vue doc
In "inertia-vue3", how do we know that "description" has changed?
import { Head } from '#inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
In the view-source, nothing can be understood !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>test</title>
<body>
</body>
</html>
As per v0.4.0 of Inertia, they now bundle their own inertia-head component you can use to add meta tags and update the title. There is no longer a need for vue-meta.
Simply add the following directly to your page components:
<inertia-head>
<title>Your page title</title>
<meta name="description" content="Your page description">
</inertia-head>
You can find more information in the change logs of v0.4.0.
How to export excel of grid from dialog or window(popup) in kendo jquery(not use MVC or partial view)
You can do that by using the built-in method saveAsExcel.
See the code snippet taken from the Kendo documentation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<button id="export">Export to Excel</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
});
$("#export").click(function(e) {
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
});
</script>
</body>
</html>
I'm using free jqgrid 4-15-3 with guiStyle set to bootstrap. The problem is that the Add dialog launched from navGrid "+" button is a Model dialog by default. I have set the "model: fasle" in addParms but has no effect. Also failed in making changes in afterShowForm by setting jquery ui dialog "option" with "model", false. Below is the code snippet. What are the possible solutions?
$("#mygrid").jqGrid("navGrid", "#mygrid_nav", {add:true,...},{},
{ model:false,
afterShowForm: function(form){
$(form).closest(".ui-jqdialog").dialog("option", "model", false);
}
}
Update: Created a simple test as below, same result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/jquery-ui.min.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.jqgrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
</head>
<body>
<div>
<div>
<div>
<table id="tbl_test"></table>
<div id="div_test_pager"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tbl_test").jqGrid({
datatype: "local",
colNames: ['Col 1', 'Col 2'],
colModel: [
{ name: 'col1', index: 'col1', editable: true, width: 200 },
{ name: 'col2', editable: true, width: 100 }
],
pager: "#div_test_pager",
height: 200,
caption: "Test"
});
$("#tbl_test").jqGrid("navGrid", "#div_test_pager",
{ edit: false, add: true, del: false, search: false, refresh: false }
/*no difference*/
//,{}, {modal: false}
);
});
</script>
</body>
</html>
Appreciate any help!
(Can Oleg or someone knows give a hint? Thanks a lot.)
The word model you use is not correct - replace it with the word modal in the settings and in the calling of the dialog function
I've got a HTML file that I want to run some tests on:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Karma Test</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/normalize/3.0.3/normalize.css" />
</head>
<body>
<!-- Basic Buttons -->
<rui-button id="test1">Test</rui-button>
<!-- Disabled Buttons -->
<rui-button id="test2" disabled>Test</rui-button>
<rui-button id="test3" disabled="disabled">Test</rui-button>
<rui-button id="test4" disabled="{ true }">Test</rui-button>
<script src="http://cdn.jsdelivr.net/riot/2.6.2/riot.js"></script>
<script src="rui-full.js"></script>
<script>
riot.mount('*');
</script>
</body>
</html>
I've setup my karma.conf, I think correctly:
module.exports = function(config) {
config.set({
browsers: ['PhantomJS'],
frameworks: ['jasmine'],
plugins: [
'karma-jasmine',
'karma-jasmine-html-reporter',
'karma-html2js-preprocessor',
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-riot'
],
preprocessors: {
'**/*.html': ['html2js']
},
files: [
{ pattern: '../../build/demo/rui-full.js', included: true, watched: false, served: true },
'./**/*.html',
'./**/*.spec.js'
],
reporters: ['progress', 'kjhtml'],
singleRun: true,
html2JsPreprocessor: {
processPath: function(filePath) {
return filePath.split('/')[1];
}
}
});
};
And I've written a simple simple test:
describe('rui-button tests', function() {
beforeEach(function (done) {
document.body.innerHTML = __html__['ui-button.html'];
});
it('Create basic button', function() {
var el = document.querySelector('#test1');
expect(el).toBeTruthy();
console.log(el.innerHTML)
});
});
Now the beforEach works, and the html is set. But its not working as expected. I'm not sure if the rui-full.js script is loading or not. I don't think it is as el.innerHTML is just "Test", it's not been replaced with the riot.js tag.
Do I have things setup correctly? Is there a way to log out any errors?
I'm running my test with the cli:
karma start tests/karma.config.js
You have to mount the tags in your code like this
before(function() {
var html = document.createElement('rui-button')
document.body.appendChild(html)
tag = riot.mount('hello')[0]
});
it('mounts a rui-button tag', function() {
expect(tag).to.exist
expect(tag.isMounted).to.be.true
})
Here is a tutorial for testing Riot with mocha+chai+karma https://github.com/vitogit/tdd-mocha-chai-riot
Or if you don´t want to use karma : https://github.com/vitogit/minimalistic-riotjs-testing online version: http://plnkr.co/edit/BFOijJ?p=preview