I'm working with jquery.steps plugin, but when I open the page in browser, I get the message 'TypeError: $(...).steps is not a function'. Here is my example code (I'm using Laravel):
{!! HTML::script(asset("/js/wizard.js")) !!} {{-- wizard.js contains jquery.min.js and jquery.steps.min.js, generated via gulp --}}
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
var wizard = $("#wizard").steps();
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
Am I missing something basic, or this is not working as expected. Any suggestion is appreciated.
Thanks in advance
Make sure you do not import jquery twice. If you downloaded your jquery.steps library via a package manager, it might have downloaded jquery library as a dependency of jquery.steps so that causes a conflict with your already imported jquery file. You can also try to use a standalone version of jquery.steps.
Related
Good day Developers
I have this code that comes built in laravel jetstream:
input:file
<input type="file" class="hidden"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
"/>
and explorer trigger:
<x-jet-secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
{{ __('Select A New Photo') }}
</x-jet-secondary-button>
When I click on the button, it shows the explorer, the problem is that after selecting the image I want to upload, it reopens the file explorer again (Then I have to select the very same image for the second time) before it can successfully upload the image.
I tried searching the net for a solution but I'm really new to alpine and livewire I couldn't come to a solution.
If anyone can point out where the issue is, I'd appreciate it.
Thank you in advance.
I got the same problem loading livewire twice, in my case, i was importing another js file in resources/app.js which is imported by the app's webpack-mix.js. And that additional file had a copy of resources/app.js, effectively loading Alpine twice and triggering events twice. After i removed the import, events fired only once.
please provide solution for this
https://codesandbox.io/s/pass-data-routing-link-forked-g6ef2?file=/src/router/AppRouter.js
You are using React Router v6. In v6, the Link component needs the state to be passed directly as prop instead of inside to. Like this
<Link
className="btn btn-primary"
to={{
pathname: "/details"
}}
state={state}
>
Register
</Link>
Also you need to use the hook to get location in the Details component.
const location = useLocation();
See the docs for more details. https://reactrouter.com/docs/en/v6/api#link
EDIT: Here is the updated code.
https://codesandbox.io/s/pass-data-routing-link-forked-v2zctg?file=/src/components/Details.js:122-130
I am trying to integrate fine uploader into my hybrid mobile app (using Icenium). I have all the files needed and the uploader runs perfectly when I'm running the app in the simulator. When I run my app on my iphone I get the [FineUploader 3.6.0] [object File] is not a File or INPUT element! Ignoring!. I can't for the life of me figure out why I would be getting this.
This is my config...
$(document).ready(function() {
$('#fineUploader').fineUploader({
request: {
endpoint: 'uploadurl'
}
});
});
I have navigated to the demo page for the jquery wrapper which uses the previous config and the demo runs fine. Any ideas? I'm not sure how to debug this any further.
Thanks
EDIT:
View -
<div data-role="view" id="queue-view" data-title="Queue" data-show="app.queueView.show" data-transition="slide:left" style="display: none;">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-icon="menuicon" data-role="button" data-click="app.applicationLayout.onMenuClick"></a>
<span data-role="view-title"></span>
</div>
</header>
<button id="filesButton">Add Files</button>
<div id="fineUploader" class="upload-cont">
</div>
<div id="fineUploader2" class="upload-cont">
</div>
<input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera">
</div>
ViewModel (app.queueView.show) -
$('#fineUploader').fineUploader({
request: {
endpoint: 'uploadurl'
}
});
I have also tried the direct from camera code which simply gives me undefined errors. That's why there is an extra fineUPloader2 and the cameraButton. I have tried a lot of things and all seem to result in either undefined errors or the No files error.
I'm also using require.js to bring in my javascript files (which I have many since I have set my project up using MVVM).
Thanks
Your issue was caused by a bug in Fine Uploader that appeared only when File objects are created in a frame/window/context other than the frame/window/context where the uploader instance was created. There are a couple issues filed here. Yours, (#870) and another, similar issue (#866). The issue was caused by the use of instanceof to determine if an object was a File. Both cited issues have been fixed in the associated hotfix branch in the Github project. I plan on pushing out a 3.6.1 hotfix release with these fixes in the next 24 hours or so.
So I have a method that implements IHttpHandler.ProcessRequest. It accepts an HttpContext parameter. This parameter is just a form that is filled out with some XML. Here is the HTML that I am using to generate the post context:
<html>
<body>
<form name="form1" method="post" action="http://localhost:7703/api.ashx">
<textarea name="XML" id="XML" rows="25" cols="100"></textarea>
<br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
As you can see, very simple. This is just used for testing purposes. What I am doing is posting XML in that textbox, and hitting submit. However, I am not sure what to attach my visual studio project to in order to debug. I try attaching it to w3wp.exe like I do when I test the app in a browser and stuff, but that doesn't seem to be working. It still says "This breakpoint will never be hit, no symbols loaded..." blah blah blah, when I put a breakpoint next to the ProcessRequest method and attach.
How do I test this properly?
Thanks guys.
If you run this locally you should be able to "run" it from within Visual Studio and VS will automatically attach it self to the correct process.
If I attach to the development server at the same port as the post, it works! :)
im beginning with Ajax, i have problem with including Ajax files.
Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.
I haven't changed Ajax code except url for calling PHP function.
edit:
calling ajax files:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' />
Available?
<span id="result"></span>
Email address: <input type="text" name="email" />
...
I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"
myValidation.js
function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}
function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}
This example is from mentioned book
You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:
They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:
function Validate() {
// ...
}
not:
<script type='text/javascript'>
function Validate() {
// ...
}
</script>
I've seen the latter a fair bit.
They put the JavaScript file in a location that doesn't match their script tag src.
They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.
They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.
They're using a web server sensitive to permissions and the file doesn't have the right permissions.
In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.
For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.
Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?
Problem solved.
In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz