I have a Module call ftp_data. Also I have a js file inside my Module Assets folder bonfire/modules/ftp_data/assets/js/ftp_data.js.
Now I want to load this file to my view
Inside View
<!-- Edit by Yesh -->
<div class="container-fluid">
<form method="POST" id="url_finder" name="url_finder">
<div class="span4">
<h3>Search URL : <input type="search" id="search_url" name="search_url" placeholder="www.example.com"></h3>
</div>
<div class="span3">
<button id="url_btn" name="url_btn" class="btn" type="submit">Search</button>
</div>
</form>
</div>
<!-- Edit by Yesh -->
inside ftp_data.js
$(function(){
$('#search_url').keyup(function(){
var s = new RegExp(this.value.toLowerCase());
$('.result_table .result_row').each(function() {
if(s.test(this.innerHTML.toLowerCase())){
$(this).show();
}else{
$(this).hide();
}
});
});
});
To load js/css file in you View module you should use constructor method. You can simply copy my code i have added below.
code like :
public function __construct()
{
parent::__construct();
Assets::add_module_js('ftp_data', 'ftp_data.js');
}
add_module_js() : first parameter defines the name of the module to be use and second parameter define the files to be load.
Put this code on your view file
<script src="assets/js/ftp_data.js"></script>
Finally I found the solution. This is what I found. I hope it will help you too.
public function index()
{
//---functions will goes here
//--Add this code before closing public function index
Assets::add_module_js('ftp_data', 'ftp_data.js');
//--ftp_data is the Module name.
//--ftp_data.js is the name of the js file that is inside the module/assets/js/
}
Related
I'm learning laravel, and now i trying to delete object without form.
i want to use js to detect when user click delete's button and return notify to controller. Then controller with delete object with id has returned from JS file.
This is blade file
#extends ('layouts.master')
#section ('head.title')
Blog
#stop
#section ('body.content')
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
</div>
</div>
<form class="form-show">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2> {{ $article->title}} </h2>
<p> {{ $article->content}} </p>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Update
<button id="delete-button" type="submit" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</form>
</div>
<script src="{{ asset('/js/jshow.js') }}"></script>
#stop
And this is controller file
class ArticlesController extends Controller
{
protected $articleModel;
public function __construct(Article $article){
$this->articleModel = $article;
}
public function index(){
$articles = $this->articleModel->getListArticles();
// $articles = Article::paginate(10);
return view('articles.index',compact('articles'));
}
public function show($id){
// $article = Article::find($id);
$article = $this->articleModel->getArticleWithID($id);
return view('articles.show',compact('article'));
}
public function delete($id){
$this->articleModel->deleteArticle($id);
return redirect()->route('articles.index');
}
}
And here is JS file
var deleteButton = document.getElementById("delete-button");
var idPost = document.getElementById("")
deleteButton.onclick = function() {
alert('Click to delete');
return false;
}
You need to use $.ajax from the jQuery JS library.
Try to understand and to do something, then come back if you any have difficulties.
Like Jerodev said, AJAX calls can be done without jQuery, but I find the jQuery method more understandable. Check here to read more about AJAX using plain JavaScript.
AJAX Request in Jquery is that for you ...
first learn how AJAX Work to request server .
use jquery to easy that for you .
remake delete function to make it more able with AJAX Request to just delete the object and response data .
public function delete(Request $req)
{
$this->articleModel->deleteArticle($id);
return response()->json(['msg' => 'some Msg help]);
}
make route for this function .
then make the ajax request to get this route and delete the object and return the msg you make .
but you must first Learn AJAX .
I am totally new to ember so please be nice :)
I have an Ember app where i want to redirect to a specific slug taken from an textfield input. In my .hbs i have the following code:
<div class="liquid-container">
<div class="liquid-child">
<div class="desktop-layout-scroll-container">
<div class="overlay-info-layout">
<div class="overlay-info-layout-content">
<h1 class="expired-overlay-status">{{t 'code.title'}}</h1>
<h2 class="expired-overlay-explanation">
{{t 'code.description'}}<br>
</h2>
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<input name="txtSlug" type="text" id="txtSlug" class="field" />
<input type="submit" name="btnGo" value="" id="btnGo" class="btn" onclick="javascript:SubmitForm()" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function SubmitForm(){
var Slugtxt = document.getElementById("txtSlug").value;
window.location = "http://www.google.com/" + Slugtxt;
}
</script>
You should never embed JavaScript in an Ember .hbs file. This code should really go in your controller for this class. First, generate your controller:
ember g controller <name_of_route>
Then inside your controller, you want to define two things. The slugtxt variable, and the redirecting as an action. That would look something like this:
import Ember from 'ember';
export default Ember.Controller.extend({
slugtxt: '',
actions: {
redirect() {
window.location = "http://www.google.com/" + this.get('slugtxt');
}
}
}
Then, back in your template, you would want to change your input to be mapped to the slugtxt variable from your controller, and set the action of the button to the redirect action that you defined in your controller. That would look something like this:
{{input value=slugtxt}}
<button {{action "redirect"}}>Submit</button>
No need to worry about using the <input> tag, you generally wont be using form data with ember.
I created a two panel one for the user's options and the second panel is the transition of the panel. As you can see below I have a group of buttons every-time the user click the buttons the left panel will changed it's content every-time it clicks. But it won't work if I click on the buttons.
I used empty() so it will be empty first the panel-body on my left container after that I will append in the panel-body section
Master page below.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{{ URL::asset('css/bootstrap.min.css') }}">
<script type = "text/javascript" src = "{{ URL::asset('js/jquery.js') }}"></script>
<script>
$(document).on("click", "#curriculum", function ()
{
$.get("curriculumOption.blade.php", function (data)
{
$("#rightContainer").empty();
$("#rightContainer").append(data);
alert("This is curriculum");
});
});
$(document).on("click", "#subjects", function ()
{
$.get("subjectsOption.blade.php", function (data)
{
$("#rightContainer").empty();
$("#rightContainer").append(data);
alert("This is subjects");
});
});
</script>
</head>
<body>
#include ('layouts.navigation.user')
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class = "panel panel-default">
<div class = "panel-body" style = "height: 300px">
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "curriculum"> Curriculum
</label><br>
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "subjects"> Subjects
</label><br>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class = "panel panel-default">
<div class = "panel-body" id = "rightContainer" style = "height: 300px; overflow-y: scroll;">
//RIGHT CONTAINER
</div>
</div>
</div>
</div>
</div>
OPTIONS:
subjectsOption
curriculumOption
subjectsOption.blade.php
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "subjectList"> Subject List
</label><br>
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "createSubjects"> Create Subjects
</label><br>
<div>
curriculumOption.blade.php
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "curriculumList"> Curriculum List
</label><br>
<label class = "btn btn-primary btn-lg">
<input type = "checkbox" id = "createCurriculum"> Create Curriculum
</label><br>
</div>
I don't understand why you out checkbox in label. I have just remove the checkbox and add id to labels.
Add insert php file data using html()function.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{{ URL::asset('css/bootstrap.min.css') }}">
<script type = "text/javascript" src = "{{ URL::asset('js/jquery.js') }}"></script>
<script>
$(document).on("click", "#curriculum", function ()
{
$.get("curriculumOption.blade.php", function (data)
{
//$("#rightContainer").empty();
$("#rightContainer").html(data);
alert("This is curriculum");
});
});
$(document).on("click", "#subjects", function ()
{
$.get("subjectsOption.blade.php", function (data)
{
//$("#rightContainer").empty();
$("#rightContainer").html(data);
alert("This is subjects");
});
});
</script>
</head>
<body>
#include ('layouts.navigation.user')
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class = "panel panel-default">
<div class = "panel-body" style = "height: 300px">
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary btn-lg" id = "curriculum">
Curriculum
</label><br>
<label class = "btn btn-primary btn-lg" id = "subjects">
Subjects
</label><br>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class = "panel panel-default">
<div class = "panel-body" id = "rightContainer" style = "height: 300px; overflow-y: scroll;">
//RIGHT CONTAINER
</div>
</div>
</div>
</div>
</div>
Laravel Blade Template, or PHP file inside the /resources/views inside Laravel framework is not accessible using URL directly, to be precise, everything under /resources folder and even all other folders except /public, are not accessible. Only public folder can be accessed directly by using URL in laravel framework. You must notice that the view inside resources folder can only be returned after come from route -> controller -> view to be simple.
Thus, this part of your code
$(document).on("click", "#curriculum", function ()
{
$.get("curriculumOption.blade.php", function (data)
{
$("#rightContainer").empty();
$("#rightContainer").append(data);
alert("This is curriculum");
});
});
$(document).on("click", "#subjects", function ()
{
$.get("subjectsOption.blade.php", function (data)
{
$("#rightContainer").empty();
$("#rightContainer").append(data);
alert("This is subjects");
});
});
is trying to access your server in certain URL. lets take example your domain is test.laravel.dev and you are in root of your domain (in your browser you can see http://test.laravel.dev), and you run these script there. It means that you are trying to do AJAX request to url http://test.laravel.dev/curriculumOption.blade.php and http://test.laravel.dev/subjectOption.blade.php. What will happens? this will try to find route in your routes.php file, looking for "/curriculumOption.blade.php" or "/subjectOption.blade.php" which i am sure it's not exists there. what you can do is, if you still need the blade template to be processed before returning as AJAX response, you can make it like this:
routes.php
Route::get("/curriculumOption","CurriculumOptionController#show");
CurriculumOptionController.php
public function show()
{
//do your things here
return view("curriculumOption");
}
with the curriculumOption.blade.php is under /resources/views folder, and change your ajax request to:
$(document).on("click", "#curriculum", function ()
{
$.get("/curriculumOption", function (data)
{
$("#rightContainer").empty();
$("#rightContainer").append(data);
alert("This is curriculum");
});
});
This will work, please try and ask if have any other problem.
Explanation #1
Due to some security reason and also as a feature for laravel, most of the folders except public cannot be accessed without PHP preprocessor. When you are making a request in browser, the HTTP request is being sent to your browser to the server. in this case, if you make get request, you dont pass any other additional form parameters to server. Server read the request URL from your browser and then there are some server configuration in how are they going to pass the parameter to PHP preprocessor. These configuration is set in .htaccess file for apache HTTP server, nginx configuration for NGINX, and web.config for IIS server. You can notice that the .htaccess file is included in your /public folder of laravel project and the /public folder is the default for your domain, lets say your domain is test.laravel.dev, then test.laravel.dev is equal to /public and test.laravel.dev/index.php is refering to /public/index.php file. The rest that can be put in /public usually are css, javascript, and image files. Templates, Controller, Routes, etc are not accessible from URL. They are being managed by the framework. /resource folder is not accessible for security reason also. The only way is to access it from route or controller. If you dont define what to do with a certain URI, laravel framework will not give a proper response which is most likely erorr. Your /management/curriculumOption.blade.php can't be accessed simply because you dont have a route with
Route::get("/management/curriculumOption.blade.php"/, .....)
even though i dont think you can put .blade.php in the parameters also, but worth to try. There are only 2 options(need citation) to access certain URL to be responded in Laravel:
Define it in routes.php
put it in public folder
I have a basic Angular.js app which is using ocLazyLoad for loading the application files. I am using the skeleton of the sbAdminApp template.
My problem is that when I use a template with an ng-click event, the click event is not being fired. It is not a scope problem because when I print the function's content to the view it is shown.
Here is some of my code:
For loading the files using ocLazyLoad:
$stateProvider.state('dashboard.importLotteries', {
templateUrl: '/Scripts/app/views/importLotteries.html',
url: '/importLotteries',
controller: 'LotteriesCtrl',
resolve: {
loadMyFiles: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'sbAdminApp',
files: [
'/Scripts/app/scripts/services/lotteriesService.js',
'/Scripts/app/scripts/controllers/lotteries.js'
]
})
}
}
}
This is the importLotteries.html template file:
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Import Lotteries
</div>
{{importLotteries.toString()}}
<div class="panel-body">
<input type="button" ng-click="importLotteries()" value="Import"/>
<span ng-model="importStatus">
</span>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
and this is the controller's code:
'use strict';
angular.module('sbAdminApp')
.controller('LotteriesCtrl', function ($scope, lotteriesService) {
$scope.importLotteries = function () {
alert("importing");
$scope.importStatus = "Loading...";
};
});
The result view looks like this:
So as you can see, the function exists on the scope but the click event is not firing and I don't get any errors.
I tried to search for a solution online for sometime now and couldn't find one, so any help will be greatly appreciated!
After further investigating the issue, I see that the event function (importLotteries) is undefined in the scope, but when I change the value to a string instead of a function the scope value is correct.
Try attaching a ng-href or href to the link and it'll be fired.
<input type="button" ng-click="importLotteries()" ng-href='#' value="Import"/>
Source:
[1] Angular ng-click with call to a controller function not working
I have the following markup inside my .cshtml Partial View and it is placed in the Views/Shared folder:
_Modal.cshtml
<div class="loadingOverlay">
<button class="btn loading-button" disabled><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button>
</div>
And also the External JavaScript (different file from the Partial View .cshtml):
Modal.js
var Modal;
Modal = Modal || (function () {
var loadingDiv = $('.loadingOverlay');
return {
Loading: function () {
loadingDiv.css('display', 'block');
$('body').prepend(loadingDiv);
},
LoadingDismiss: function () {
loadingDiv.fadeOut('500');
},
};
})();
And I call from my page like below:
Index.cshtml
<!DOCTYPE html>
<html>
<head>
#Styles.Render("~/Content/font-awesome", "~/Content/css")
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<button id="showOverlay" class="btn btn-default"></button>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
$('#showOverlay').click(function () {
Modal.Loading();
});
})
</script>
</body>
</html>
My problem is: whenever I clicked the button, nothing happens. But it works when I put the html element not inside _Modal.cshtml (Refer to the below code).
My question is: how can I get the class name in the _Modal.cshtml using JavaScript or JQuery?
I can do this in the Modal.js (Note that it is same as I put that into _Modal.cshtml) but that would be hard to maintain and I would like to put all of the content in the Partial View, and call it when needed by class name, instead of write string that will converted to JavaScript Object:
var loadingDiv = $('<div class="loadingOverlay"><button class="btn loading-button" disabled>'
+ '<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button></div>');
Your answer much appreciated.
Edit:
Question on 31st of May 2016:
What's the difference between #Html.Partial("_Modal") with #Html.Partial("~/Views/Shared/_Modal.cshtml"). is it just to better understand for where the compiler get the partial views from?
Answered on 1st of June 2016 by #Guruprasad Rao:
There is nothing difference between two except the mentioning of partialview name. The one I suggested was providing fully qualified path which helps compiler from where to fetch the partialview. To one you use will search in all the directories under the View folder. So the one I mentioned will be good in the aspect of performance.
Thanks for the #Guruprasad Rao for the answer and the explanation.
Cheers~
You should import the partialview first from server to client browser first and then you can manipulate it with jquery. Otherwise there would be no element with the selector you are trying to find. User, #Html.Partial or #Html.RenderPartial to import it, hide it at initial state and show it on click. Take a below example:
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<button id="showOverlay" class="btn btn-default"></button>
</div>
</div>
</div>
#Html.Partial("~/Views/Shared/_Modal.cshtml")
<!--I assume that the content inside this will be initially in hidden state-->
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function() {
$('#showOverlay').click(function() {
Modal.Loading();
});
})
</script>
</body>
Modal.js changes
var Modal;
Modal = Modal || (function () {
var loadingDiv = $('.loadingOverlay');
return {
Loading: function () {
loadingDiv.css('display', 'block');
//$('body').prepend(loadingDiv);
//No need to prepend here since we are importing it through partial method
},
LoadingDismiss: function () {
loadingDiv.fadeOut('500');
},
};
})();