i have some problem with jquery, i dont know what to do
i have following the instruction in https://summernote.org/getting-started/
i have insert this code in head tag
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
then set the textarea id to summernote
<div class="form-group col-md-8">
<label>Content</label>
<textarea id="summernote" style="height: 200px;" name="isi_informasi"><?= $konten ?></textarea>
</div>
and insert this function code in end of body tag
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
i got this error massage in console
jQuery.Deferred exception: $(...).summernote is not a function TypeError: $(...).summernote is not a function
at HTMLDocument.<anonymous> (http://localhost/okifftuh/admin/createInformation/2:533:30)
at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js:3583:29)
at process (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js:3651:12) undefined
jQuery.Deferred.exceptionHook # jquery.js:3860
process # jquery.js:3655
setTimeout (async)
(anonymous) # jquery.js:3689
fire # jquery.js:3317
fireWith # jquery.js:3447
fire # jquery.js:3455
fire # jquery.js:3317
fireWith # jquery.js:3447
ready # jquery.js:3920
completed # jquery.js:3930
=======================================================================
Uncaught TypeError: $(...).summernote is not a function
at HTMLDocument.<anonymous> (2:533)
at mightThrow (jquery.js:3583)
at process (jquery.js:3651)
(anonymous) # 2:533
mightThrow # jquery.js:3583
process # jquery.js:3651
setTimeout (async)
jQuery.readyException # jquery.js:3868
(anonymous) # jquery.js:3888
mightThrow # jquery.js:3583
process # jquery.js:3651
setTimeout (async)
(anonymous) # jquery.js:3689
fire # jquery.js:3317
fireWith # jquery.js:3447
fire # jquery.js:3455
fire # jquery.js:3317
fireWith # jquery.js:3447
process # jquery.js:3671
setTimeout (async)
(anonymous) # jquery.js:3689
fire # jquery.js:3317
fireWith # jquery.js:3447
fire # jquery.js:3455
fire # jquery.js:3317
fireWith # jquery.js:3447
ready # jquery.js:3920
completed # jquery.js:3930
I believe this is a summernote versioning compatibility issue with jquery, try using JQuery 3.2.0 and Summernote 0.8.2 version respectively :
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js" defer></script>
More detailed compatibility issue list is here.
Related
I can successfully send image data to an API endpoint with pyscript (1). I can also set up a form and pickup the binary data from a file. I want to put these together so that I pick up the image data and send it to the API in one call. They both use asyncio.ensure_future but I'm not sure how to combine these two processes (getting file data and posting file data to an API). Is there a way to combine these two processes with a single call to asyncio.ensure_future?
(1) send image data to API endpoint
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>GET, POST, PUT, DELETE example</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
[[fetch]]
files = ["/request.py"]
</py-config>
</head>
<body><p>
Hello world request example! <br>
Here is the output of your request:
</p>
<py-script>
import asyncio
import json
from request import request # import our request function.
async def main():
baseurl = "https://jsonplaceholder.typicode.com"
# CLD
file = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
body = json.dumps({"upload_preset":"<preset>","file":file})
cldheaders={"Content-type": "application/json"}
cldurl = "https://api.cloudinary.com/v1_1/<cloudname>/upload"
new_post = await request(cldurl, body=body, method="POST", headers=cldheaders)
print(f"CLD request=> status:{new_post.status}, json:{await new_post.json()}")
asyncio.ensure_future(main())
</py-script>
<div>
<p>
You can also use other methods. See fetch documentation: <br>
https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
</p>
</div>
<div>
<p>
See pyodide documentation for what to do with a FetchResponse object: <br>
https://pyodide.org/en/stable/usage/api/python-api.html#pyodide.http.FetchResponse
</p>
</div>
</body>
</html>
(2) process file from a form file input
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>File Example</title>
<py-config>
[[fetch]]
files = ["/request.py"]
</py-config>
</head>
<body>
<p>This example shows how to read a file from the local file system and display its contents</p>
<br />
<p>Warning: Not every file type will display. PyScript removes content with tags such as XML, HTML, PHP, etc. Normal
text files will work.</p>
<br />
<p>No content type checking is performed to detect images, executables, etc.</p>
<br />
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br />
<br />
<div id="print_output"></div>
<br />
<p>File Content:</p>
<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:600px; resize:both">
<div id="content">
</div>
</div>
<py-script output="print_output">
import asyncio
from request import request # import our request function.
import json
from js import document, FileReader, console
from pyodide import create_proxy
from pyodide.http import pyfetch, FetchResponse
from typing import Optional, Any
async def process_file(event):
#print(event.target.files[0].name)
fileList = event.target.files.to_py()
for f in fileList:
#console.log(json.dumps(json.loads(f),indent=2))
#console.log(type(f))
data = await f.text()
console.log("name",f.name)
document.getElementById("content").innerHTML = data
async def main():
# Create a Python proxy for the callback function
# process_file() is your function to process events from FileReader
file_event = create_proxy(process_file)
# Set the listener to the callback
e = document.getElementById("myfile")
#console.log("value of e",e.name)
e.addEventListener("change", file_event, False)
asyncio.ensure_future(main())
</py-script>
</body>
sharing two scripts that show what I've done
Why does Laravel blade strip out scripts? I have been trying to show a map like in their embed examples...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div id="map"></div>
<script>
mapboxgl.accessToken ....
I can only see a link and a div, but no script and no style tag.
Although it is in the view-file, Blade removes it from the rendered page.
I get some console warnings about it not being "proper" way to include. Can this be the issue?
Have you tried adding this code between the scripts?
#stack ('before-scripts')
<script>
...
</script>
#stack ('after-scripts')
I'm trying to setup Vue in Laravel 6.
I've ran:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
Then inside of welcome.blade.php, i've deleted the body of the welcome page and added a div with the id of root.
I can get the example component to show in the browser but I can't create any new components and get them to show without getting the error. I've even tried just renaming the example-component and even that won't work. I renamed the file to App.vue, and then renamed everthing else - see below:
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('app', require('./components/App.vue').default);
const app = new Vue({
el: '#app',
});
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{csrf_token()}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Journey To Dev</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
The App.vue is unchanged from ExampleComponent.vue, i just renamed the file:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
}
</script>
Thanks!
You need to run
npm run dev
Again everytime you change Javascript assets or Vue components so that Webpack recompile them to public/js/app.js
Or even better, boot up a watcher and let it recompile when you change code
npm run watch
And make sure to hard refresh or leave the devtools console open so cache would be disabled
You can also automatically register components like so
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
instead of
Vue.component('app', require('./components/App.vue').default);
Hope this helps
I am trying to request a service via iron-ajax using the following in my index.html:
<body class="fullbleed">
<template is="dom-bind" id="mainTemplate">
<paper-material class="todo" elevation="1">
<span>Mohammed</span>
</paper-material>
<br/>
<iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
<span>{{data.geonames.0.countryName}}</span>
<br/>
<span>{{data.geonames.0.name}}</span>
</template>
<p id="geolocation">Finding geolocation...</p>
</body>
In my JS code, I would like to read {{data}} but could not do it. I tried to do it using the following:
<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>
The code gives me undefined when I log {{data}}.
This should work:
<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>
As Dogs pointed out, the data property doesn't belong to requestGeoname-element, it belongs to the "template" item that is binded with dom-bind. Dogs solution should also work, but if you have other variables to use in your application, this is probably the better solution since they are now accesible through the template-object. For example:
...
template.myOthervariable = "derpherp";
...
You have to wait until the request is finished. It's better to use the event response (More info: https://elements.polymer-project.org/elements/iron-ajax#response).
<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
console.log(event.detail.response)
});
</script>
or declaratively:
<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
console.log(event.detail.response);
};
</script>
<iron-ajax … on-response="onPlacesResponse"
I'm trying to click on a button to authorise access, but it doesn't seem to work. Could it be a JavaScript and Mechanize issue? The HTML code of the page states that JavaScript needs to be enabled to "utilize the functionality of this website".
Here's what I've tried:
require 'mechanize'
m = Mechanize.new
auth_page = m.get('http://www.narek.nl/ecommerce/admin/oauth_authorize?oauth_callback=http%3A%2F%2Fwww.narek.nl%2Fecommerce&oauth_token=3bda9a0a5ed8debd87c926b8cb2f31f6')
# # =>
# #<Mechanize::Page
# {url
# #<URI::HTTP:0x007ff594791990 URL:http://www.narek.nl/ecommerce/admin/oauth_authorize?oauth_callback=http%3A%2F%2Fwww.narek.nl%2Fecommerce&oauth_token=3bda9a0a5ed8debd87c926b8cb2f31f6>}
# {meta_refresh}
# {title "Magento Administrator"}
# {iframes}
# {frames}
# {links}
# {forms
# #<Mechanize::Form
# {name nil}
# {method "POST"}
# {action "http://www.narek.nl/ecommerce/admin/oauth_authorize/index/"}
# {fields
# [hidden:0x3ffaca3a0ee4 type: hidden name: form_key value: lNSCf22s2HVdBuXz]
# [text:0x3ffaca3a0d68 type: text name: login[username] value: ]
# [field:0x3ffaca3a0b9c type: password name: login[password] value: ]
# [hidden:0x3ffaca3a09d0 type: hidden name: oauth_token value: dcff49ccbd34ad5e8ce5f8ca4d67dc26]}
# {radiobuttons}
# {checkboxes}
# {file_uploads}
# {buttons [button:0x3ffaca39dcd0 type: submit name: value: ] [button:0x3ffaca39dbf4 type: name: value: ]}>}>
form = auth_page.form_with(:action => 'http://www.narek.nl/ecommerce/index.php/admin/oauth_authorize/index/')
authorisation_button = form.buttons[0]
# => [button:0x3ffaca15089c type: submit name: value: ]
authorise = m.submit(form, authorisation_button)
# # => #<Mechanize::Page
# {url
# #<URI::HTTP:0x007ff593028600 URL:http://www.narek.nl/ecommerce/admin/oauth_authorize?oauth_callback=http%3A%2F%2Fwww.narek.nl%2Fecommerce&oauth_token=3bda9a0a5ed8debd87c926b8cb2f31f6>}
# {meta_refresh}
# {title "Magento Administrator"}
# {iframes}
# {frames}
# {links}
# {forms
# #<Mechanize::Form
# {name nil}
# {method "POST"}
# {action "http://178.62.173.99/index.php/admin/oauth_authorize/index/"}
# {fields
# [hidden:0x3ffacb001774 type: hidden name: form_key value: pvWnuhmmADOfmvbk]
# [text:0x3ffacb001620 type: text name: login[username] value: ]
# [field:0x3ffacb0014cc type: password name: login[password] value: ]
# [hidden:0x3ffacb001350 type: hidden name: oauth_token value: dcff49ccbd34ad5e8ce5f8ca4d67dc26]}
# {radiobuttons}
# {checkboxes}
# {file_uploads}
# {buttons [button:0x3ffacb000a7c type: submit name: value: ] [button:0x3ffacb0009b4 type: name: value: ]}>}>
When I try to submit the authorisation_button it simply refreshes the current page. When I visit the authorisation url it still shows the authorise button. If it was successfully authorised, the button should not be showing.
This is what the HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Magento Admin</title>
<link rel="icon" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/favicon.ico" type="image/x-icon"/>
<script type="text/javascript">
var BLANK_URL = 'http://www.narek.nl/ecommerce/js/blank.html';
var BLANK_IMG = 'http://www.narek.nl/ecommerce/js/spacer.gif';
var BASE_URL = 'http://www.narek.nl/ecommerce/index.php/admin/index/index/key/491c19cb98a4e669b0f21b52089840a7/';
var SKIN_URL = 'http://www.narek.nl/ecommerce/skin/adminhtml/default/default/';
var FORM_KEY = 'GGvnhfOGCuVG25a2';
</script>
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/custom.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/xmlconnect/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/print.css" media="print" />
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/mage/adminhtml/form.js"></script>
<script type="text/javascript" src="http://www.narek.nl/ecommerce/js/mage/adminhtml/tools.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/iestyles.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/below_ie7.css" media="all" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/ie7.css" media="all" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.narek.nl/ecommerce/skin/adminhtml/default/default/xmlconnect/iestyles.css" media="all" />
<![endif]-->
<script type="text/javascript">
Fieldset.addToPrefix(1);
</script>
<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script></head>
<body class="page-popup adminhtml-oauth-authorize-index">
<div>
<noscript>
<div class="noscript">
<div class="noscript-inner">
<p><strong>JavaScript seems to be disabled in your browser.</strong></p>
<p>You must have JavaScript enabled in your browser to utilize the functionality of this website.</p>
</div>
</div>
</noscript>
<div class="login-container auth-confirm">
<div class="login-box">
<div class="login-form auth-confirm">
<div class="page-title">
<h1>Authorize application</h1>
</div>
<h2><strong>Admin</strong> requests access to your account</h2>
<p>After authorization application will have access to you account.</p>
<form id="oauth_authorize_confirm" action="http://www.narek.nl/ecommerce/index.php/admin/oauth_authorize/confirm/" method="get">
<input type="hidden" name="oauth_token" value="3bda9a0a5ed8debd87c926b8cb2f31f6">
<button type="submit" class="button" title="Authorize"><span><span>Authorize</span></span></button>
</form>
<form id="oauth_authorize_reject" action="http://www.narek.nl/ecommerce/index.php/admin/oauth_authorize/reject/" method="get">
<input type="hidden" name="oauth_token" value="3bda9a0a5ed8debd87c926b8cb2f31f6">
<button type="submit" class="button" title="Reject"><span><span>Reject</span></span></button>
</form>
</div>
<p class="legal">Magento is a trademark of Magento Inc. Copyright © 2014 Magento Inc.</p>
<div class="bottom"></div>
</div>
</div>
</div>
</body>
</html>
This is what the page looks like in the browser:
How can I click on the Authorize button?
Sometimes <button> elements have JavaScript events submit the form. Try telling the form to submit itself:
form.submit
I could't click on the "Authorize" button because there was none present on the page. I first needed to login with my admin credentials before the Authorize application page was visible.
Here's the code I used to successfully click the "Authorize" button on Magento's Authorize Application page.
require 'oauth'
require 'mechanize'
#m = Mechanize.new
#callback_url = "http://www.yourwebsite.nl/"
#consumer = OAuth::Consumer.new(
"key",
"secret",
:request_token_path => "/oauth/initiate",
:authorize_path=>"/admin/oauth_authorize",
:access_token_path=>"/oauth/token",
:site => "http://www.yourwebsite.nl"
)
#session = {}
#request_token = #consumer.get_request_token(:oauth_callback => #callback_url)
#session[:request_token] = #request_token
#session[:authorize_url] = #request_token.authorize_url(:oauth_callback => #callback_url)
#m.get(#session[:authorize_url]) do |login_page|
auth_page = login_page.form_with(:action => 'http://www.yourwebsite.nl/index.php/admin/oauth_authorize/index/') do |form|
form.elements[1].value = 'insert_admin_username_here'
form.elements[2].value = 'insert_admin_password_here'
end.submit
authorize_form = auth_page.forms[0]
authorize_form.submit
end
A big thanks to pguardiario.