I got a view with Layout defined. In the layout, there is a section:
#RenderSection("JavaScript", required: false)
In the view, based on a condition, I want to either render certain JavaScript to the section or not.
#if (condition)
{
#section JavaScript
{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
}
The above syntax is wrong. What's the correct syntax?
Edit
Basically, I got a partial view which needs to be rendered based on a condition. If the condition is true, then I need to render the partial view together with some JavaScript for the partial view, which I want to go to the "JavaScript" section. How can I do that?
#section blocks can only appear in markup contexts.
You can write
#if (condition)
{
<text>
#section JavaScript
{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
</text>
}
#if(condition) RenderSection(..)
#Section Javascript{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
or in your layout:
#RenderSection(..)
and in your view:
#section Javascript{
if(condition)
{
<script type="text/javascript">
$(document).ready(function () {
//bla...
});
</script>
}
}
also see:
Is there a way to make a #section optional with the asp.net mvc Razor ViewEngine?
Related
how to pass automatticly the value of the input into the v-model ?
Thank you :)
Code :
<input value="{{$in->id}}" v-model="upload.id" >
i tried to do in my script :
upload: {
bank:'',
id:{{$in->id}},
cash:''
},
and in my view :
<a value="" v-model="upload.id" ></a>
You can't do it that way as v-model overrides the value attribute on the input element. So probably the best option would be to add this straight to your script tag.
<script type="text/javascript>
new Vue({
data: {
upload {
id: {{$in->id}}
}
}
});
</script>
Or, if you are initiating VueJS within it's own javascript file, instead of inline you could set it as a property on the window. For example, in your <head> you can do the following:
<head>
...
<script type="text/javascript">
window.sharedData = window.sharedData || {};
window.sharedData.uploadId = {{$in->id}};
</script>
...
</head>
This means in your javascript file you could then do the following:
data: {
upload: {
in: window.sharedData.uploadId
}
}
This fiddle has the starter kit recreated, with and extra button that alters the model.
http://jsfiddle.net/UjacC/1/
However, when clicking change, the array changes, but the view is not being updated. Why?
<title>Ember Starter Kit</title>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
<button id="btnChange">change model</button>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script>
$(document).ready(function(){
console.log(stuff);
$("#btnChange").click(function(){
stuff.push("d");
console.log("change",stuff);
});
});
</script>
</body>
App = Ember.Application.create();
var stuff = ["a","7","b","c"];
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return stuff;
}
});
Instead of stuff.push you need to use Embers pushObject which will notify listeners of an object that there was a change to it.
EDIT:
Here's the updated jsfiddle: http://jsfiddle.net/UjacC/2/
for quick reference I have attached the image of what I want.
I would like to update (change the content) without updating the whole page (without refreshing the page). Clicking on the links or buttons on the whitebox should fetch the data from the database and that is to be displayed in the redbox. Of course first thing you would write as an answer will be "Ajax!!!", but as I'm new to laravel framework, I want to know what is the best way to achieve this, should I write the javascript directly in the view or in the controller, and how to do it through controller? If you need any more info please let me know.
Revised question, is there any other better way other then the ones answered
First we need to set up some routes. You can also do this with controllers.
Route::get('home', function()
{
return View::make('home');
});
Route::get('someRoute', function()
{
return View::make('someView');
});
For the home view, I'd add a scripts section:
//home.php
<html>
<head>
<script>
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
</script>
</head>
<body>
<div class="wrapper">
Click Here
<div id="ajaxContent"></div>
</div>
</body>
</html>
In case you're using blade templating, here's an implementation
//main.blade.php
<html>
<head>
#yield('styles')
</head>
<body>
<div class="wrapper">
#yield('content')
</div>
#section('scripts')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
#show
</body>
</html>
//home.blade.php
#extends('main')
#section('content')
Click Here
<div id="ajaxContent"></div>
#stop
#section('scripts')
#parent
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
#stop
it would be better for you if you use jQuery to do this update using ajax functionality.
and a simple code can be like this
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#divID-to-be-updated').load(pageURL);
});
more about ajax functionality inside jQuery can be read from http://jqapi.com/#p=load
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html
<index>
<div>
string selectedvalue="";
// Coding Part
</div>
<script type="text/javascript">
function onchangeFT(e)
{
'#selectedvalue'= e.value; //e.value come form combobox and it is should be assigned to "selectedvalue"
alert('#selectedvalue');
}
</script>
<script type="text/javascript">
var selectedvalue="";
function onchangeFT(e)
{
selectedvalue = e.value; //e.value come form combobox and it is should be assigned to
alert(selectedvalue);
}
</script>