I have an input of file type, and i want to allow the user to select an image on his computer or just give an url, and our server gonna download the image on himself.
I have a problem because I need to use only one input to upload local images and linked images.
You can use JQuery for that,
Just keep the type of the input TextType, and on your view file
...
<button id="uploadButton">Upload Image</button>
{{ form_widget(form.image , { 'id': 'image-field' }) }}
...
<script>
..
$('#uploadButton').click(function () {
var button = $(this);
if(button.text === 'Upload Image') {
button.text('Set URL');
$('#image-field').prop('type', 'file');
} else {
button.text('Upload Image');
$('#image-field').prop('type', 'url');
}
});
..
</script>
Don't forget after submitting the form in your controller to check if the input with the name image is a file or an URL by using if ($request->files->has('imageField') ....
Related
I have a js file located in assets folder (not View). can i pass a varible from a controller?
In view file:
The Js is called like this
<canvas id="chart1" class="chart-canvas"></canvas>
</div>
It is not possible (in my point of view) to put a variable to external JS file. You can use data-... attributes and get values from html elements.
For example you can pass your PHP variable as a json encoded string variable in your controller.
$data['chart_info'] = json_encode($chart_info);
return view('your_view', $data);
Then put it in data-info like this.
<canvas id="chart1" class="chart-canvas" data-info="{{ $chart_info }}"></canvas>
And finally in JS, you can get the variable and decode (parse) it as following.
let canvas = document.getElementById('chart1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
You can put that part of the Javascript in the view and send the variable to the same view. For example, add a section in view:
#section('footer')
<script type="text/javascript">
</script>
#endsection
Do not forget that you should add #yield('footer') to the end of your layout view.
I don't like to mix javascript and PHP/Blade, it might be hard to read the code in the future... You could use a different approach, loading the chart with a async ajax request.
You will have to create a end-point that returns the data you need for your chart:
Your router:
Route::get('/chart/get-data', [ ControllerName::class, 'getChartData' ]);
Your controller method:
public function getChartData() {
$chartData = [];
// Your logic goes here
return $chardData;
}
In your javascript (using jquery) file there will be something like that:
function loadChartData() {
$.ajax({
'url': '/chart/get-data',
'method': 'GET'
})
.done((data) => {
// Load your chart here!!!
})
.fail(() => {
console.log("Could not load chart data");
});
}
Hope I helped ;)
I don't know how can't I find any examples on this, like no one used it before..
I want to open file manager in iframe and on images click to insert image url to input. Their example opens new window...
I am using laravel file manager standalone button to change avatar image but by their docs I can do it like this:
<div class="input-group">
<span class="input-group-btn">
<a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
<i class="fa fa-picture-o"></i> Choose
</a>
</span>
<input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">
And calling $('#lfm').filemanager('image');
Which works but it opens new window because this is .filemanager()
(function( $ ){
$.fn.filemanager = function(type, options) {
type = type || 'file';
this.on('click', function(e) {
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
localStorage.setItem('target_input', $(this).data('input'));
localStorage.setItem('target_preview', $(this).data('preview'));
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
window.SetUrl = function (url, file_path) {
//set the value of the desired input to image url
var target_input = $('#' + localStorage.getItem('target_input'));
target_input.val(file_path).trigger('change');
//set or change the preview image src
var target_preview = $('#' + localStorage.getItem('target_preview'));
target_preview.attr('src', url).trigger('change');
};
return false;
});
}
})(jQuery);
Now changing:
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
To:
$('iframe').attr('src', route_prefix + '?type=' + type);
Will append filemanager to iframe as I want but when I click on image inside iframe it opens image in new tab as it is setting new url but skipping the script?
I think that I could get image url if it was opening in iframe but it is not...
Do you maybe know how to do this?
Thanks
I found out answer for my needs, not finished one tho but it works as needed:
Open up script.js from vendor/..../js folder and change useFIle function if/else statement where it looks up are you using any editor (cke,mce,etc..) and if not it just opens image in new window.
I remove that option and added this:
// parent.document.getElementById(field_name).value = url;
var target_input = parent.document.getElementById(localStorage.getItem('target_input'));
target_input.value = url;
//set or change the preview image src
var target_preview = parent.document.getElementById(localStorage.getItem('target_preview'));
target_preview.src = url;
From my question you can see jquery-plugin for opening laravel-filemanager into iframe and adding elements to localstorage.
I used that elements from localstorage in iframe to append url in input and display image in holder.
Now I will change this a little bit, since I wan't to leave this script as it is for full manager page on that url. I will just add another field as uri to be able to say this url is opened by iframe and use someOtherFUnction instead of useFile function by default.
class ProductComponent extends Component {
render() {
var url = 'http://via.placeholder.com/150x150';
return (
<div>
<figure><img src={url} alt=""/></figure>
<div className="prod-dtl">
<span><img src={canada_logo} alt=""/> Williamsburg tote bag iPhone America…</span>
<h3>$15.00 <em>$ 25.00</em></h3>
<button className="add-btn">+</button>
</div>
</div>
);
}}
Above is my code let's say i'm getting images from APIs.
I have used create-react-app for creating app, now problem is when i'm opening my project in web view it is showing properly.
But from chrome console when i choose device like nexus 6 or iphone 6 whatever any device. image url will converted from
http://via.placeholder.com/150x150 => http://via#2x.placeholder.com/150x150
Automatically please help with these i need image to be fix nothing to append.
I havn't find any solution so i came across pure jQuery string replace, Once page fully loaded will remove #2x and #3x from image src.
$(document).ready(function () {
setTimeout(function () {
$('body img').prop('src', function (_, src) {
src = src.replace(/#2x\./, '.'); // strip if it's already there
src = src.replace(/#3x\./, '.'); // strip if it's already there
return src.replace(/(\.\w+$)/, '$1');
});
}, 0);
});
Hope this will help someone needed. Peace out:)
Can anyone help me with, I am trying to create a download counter to my website.
I have a ajax script that counts up by 1 when the users clicks the download link, the issue I am having is on some browsers it goes to the download link before completing the ajax count script.
Is there a way that I can redirect to the download file once the script has completed. At the moment I have as follows
This is the link :-
<a href='downloads/".$downfile."' onclick=\"Counter('$referid');\"'>Download File</a>
This is the counter script:-
<script type="text/javascript">
function Counter(id)
{
$.get("clickcounter.php?id="+id);
{
return false;
}
}
</script>
This is the php script (clickcounter.php)
<?php
include('dbutils.php');
$referid = $_GET['id'];
$q = "SELECT * FROM downloads WHERE downid =".$referid;
$r = mysql_query($q);
while ($row = mysql_fetch_array($r))
{
$click = stripslashes(trim($row['downcount']));
$download = $row['downfile'];
}
$countup = $click + 1;
$qUpdate = "UPDATE downloads
SET downcount=$countup
WHERE downid=$referid";
$rUpdate = mysql_query($qUpdate);
?>
A few relatively small modifications should solve the problem. First, change the onclick to the following:
onclick=\"Counter('$referid', this); return false;\"
What we have done is to send in this as the second argument to the Counter function so we have a reference to the clicked link. Secondly, we have added return false, which blocks the browser from navigating to the url specified in the href.
The modified counter function looks like this:
function Counter(id, link) {
$.get("clickcounter.php?id=" + id, function() {
location.href = $(link).attr("href");
});
}
We now have a reference to the clicked link. A function has now been specified as the second argument to $.get(). This is the success-function, which is called when the ajax call has been successfully called. Inside that function we now redirect to the url specified in the href attribute on the clicked link.
I feel I should point out that the recommended way is to bind the onclick using jQuery separate from the html. The referid can be stored in a data attribute (which I chose to call data-rid):
<a href='downloads/".$downfile."' class='dl' data-rid='$referid'>Download File</a>
Then you bind the onclick for all download links (a elements with a "dl" class):
$(function() {
$("a.dl").click(function() {
var id = $(this).attr("data-rid");
var href = $(this).attr("href");
$.get("clickcounter.php?id=" + id, function() {
location.href = href;
});
return false;
});
});
(I feel I should point out that the code has not been tested, so it's possible that a typo has snuck in somewhere)
I am learning AJAX in zend framework step by step. I use this question as first step and accepted answer in this question is working for me. Now I want to load more than one DIVs using JSON. Here is my plan.
IndexController.php:
class IndexController extends Zend_Controller_Action {
public function indexAction() { }
public function carAction() { }
public function bikeAction() { }
}
index.phtml:
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<a href='http://practice.dev/index/car' class='ajax'>Car Image</a>
<a href='http://practice.dev/index/bike' class='ajax'>Bike Image</a>
<div id="title">Title comes here</div>
<div id="image">Image comes here</div>
car.phtml:
<?php
$jsonArray['title'] = "Car";
$jsonArray['image'] = "<img src='images/car.jpeg'>";
echo Zend_Json::encode($jsonArray);
?>
bike.phtml:
<?php
$jsonArray['title'] = "Bike";
$jsonArray['image'] = "<img src='images/bike.jpeg'>";
echo Zend_Json::encode($jsonArray);
?>
ajax.js:
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event){
event.preventDefault();
// I just need a js code here that:
// load "Car" in title div and car2.jped in image div when "Car Image" link clicked
// load "Bike" in title div and bike2.jped in image div when "Bike Image" link clicked
});
});
I think you have got this. When any link with class='ajax' is clicked then it means its AJAX call. index of array(title, image) in phtml files(car.phtml, bike.phtml) show that in which DIV this content should be loaded.
My Question:
Now how to implement ajax.js to do this job if it gets data in json form?
Thanks
Encode JSON using the Zend Framework as
echo Zend_Json::encode($jsonArray);
If you are already using JSON for serialization, then don't send the images in HTML tags. The disadvantage of doing that is basically the JavaScript code cannot do much with the images other than sticking it into the page somewhere. Instead, just send the path to the images in your JSON.
$jsonArray = array();
$jsonArray['title'] = "Hello";
$jsonArray['image'] = "<img src='images/bike.jpg' />";
On the client side, the received JSON will look like:
{
"title": "Hello",
"image": "<img src='images/bike.jpg' />"
}
So the jQuery code needs to loop through key each, and inject a new image into the div with matching key - "image1" or "image2".
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
YOu could encode your json to have two values for example {value1:"data",value2:"data2"}
Then when your ajax returns you can...
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event){
event.preventDefault();
$.ajax({
url: '<Link to script returning json data>',
data:json, //says we are receiving json encoded data
success: function(json) {
$('#div1).html('<img src="'+json.value1+'"/>');
$('#div2).html('<img src="'+json.value2+'"/>');
}
});
});
});