I am trying to inject iframe after image is clicked, I can make it to work without injecting so it appear at the start of the page but not when image is pressed. How do I do that?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
#section('content')
<script type="text/javascript" src="{!! asset('/js/jquery-3.1.1.min.js') !!}"></script>
<script type="text/javascript" src="{!! asset('/js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "template_class">
#foreach ($templates as $template)
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<iframe class="content-link" src="{{ asset($template->file )}}">
#show
Jquery:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.template_class').load(this.src);
});
});
Related
I have a really basic django app that displays .png images using django ImageField and ask the user to vote on different choices.
Now I need to make it interactive so that the user can also zoom and pan the images in the form.
I've downoad this github https://github.com/timmywil/jquery.panzoom and followed the instructions in my detail view: detail.html :
<div id="img">
<img src="{{question.image.url}}"/>
</div>
{% load static %}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("img").panzoom();
$("img").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
});
</script>
But nothing happens at all, the image is displayed in a fixed manner.
Previously I had some issues with 404 errors and now It seems to properly load the .js but It still doesn't work.
Thank you in advance for your help.
You have to have:
1) <script type="text/javascript" src="_path_to_your_JS_panzoom_file"></script> - to import that file
2)
<script type="text/javascript">
jQuery(document).ready(function(){
$(".panzoom-elements").panzoom();
// Pass options
$("a.panzoom-elements").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
});
</script>
OR 2-b) Add those your code to a separate .js file and import it at the same way as in paragraph 1.
OK, finally I found the problem. The documentation is probably done for people who have a bit more background in that field! But of course other imports are required to make it work:
{% load static %}
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.mousewheel.js' %}"></script>
<section>
<div class="parent">
<div class="panzoom">
<img src="{{question.image.url}}">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function() {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
Why is my js not working as it should in edit.blade.php view. My views are structured as follows:
Filename: profile_main.blade.php
#extends('layouts.main')
#section('head')
#yield('style')
#stop
<!-- Available at the footer of page before body tag closes -->
#section('scripts')
<script src="{{ URL::asset('js/jquery-ui-1.11.4.custom/jquery-ui.js') }}"></script>
<script src="{{ URL::asset('js/search.js') }}"></script>
<script src="{{ URL::asset('js/application.js') }}"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
#stop
Filename: training_main.blade.php
#extends('layouts.profile_main')
#section('style')
<link href="{{ URL::asset('css/application/index.css') }}" rel="stylesheet">
#stop
#section('body')
<div id="content-header">
<img alt="user_icon" src="{{ asset('images/general/admission_page_logo.jpg') }}" class="img-responsive"/>
<h1>#yield('page_heading')</h1>
<h3>#yield('page_desc')</h3>
</div>
<hr class="header_underline"/>
#yield('training_body')
#stop
Filename: edit.blade.php
#extends('trainings.training_main')
#section('page_heading')
Edit Training Details
#stop
#section('page_desc')
General
#stop
#section('training_body')
#stop
I have some jquery functions in application.js. I notice that these functions are not working in edit.blade.php. For example
Filename: application.js
$("document").ready(function() { alert('Great') });
It does not alert when the edit.blade.php view is loaded. But when I look at the page source, everything seems to be loaded fine like so:
<!-- Javascript -->
<script src="http://localhost:8000/js/jquery-1.11.3.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
<script src="http://localhost:8000/js/main.js"></script>
<script src="http://localhost:8000/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script src="http://localhost:8000/js/search.js"></script>
<script src="http://localhost:8000/js/application.js"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
</body>
What could be the problem here? What are my missing?
The problem was with my js. My js look like so:
$("document").ready(function() {
limitCharacters();
$("#edit_academic_form").on('submit', updateAcademic);
$("#edit_training_form").on('submit', updateTraining);
}
The function limitCharacters() had some syntax errors thus preventing the codes beneath it from ever getting called. I resolved issues with the function and now everything is working fine.
check with php artisan route:list on your terminal,
in 'edit' URI, will showed :
home/{home}/edit
its reason why your js not run, to solve the problem you can rewrite js path in your edit.blade.php.
Or if you have other solution please tell me. Thanks
I have 3 video scripts:
<!--start videoapp-->
<script type="text/javascript" src="http://test.com/vajs?vid1"></script>
<!--end videoapp-->
<!--start videoapp-->
<script type="text/javascript" src="http://test.com/vajs?vid2"></script>
<!--end videoapp-->
<!--start videoapp-->
<script type="text/javascript" src="http://test.com/vajs?vid3"></script>
<!--end videoapp-->
I want the first script/video (vid1) to trigger onload.
I want script script/video (vid2) to trigger on click (& to hide vid1):
<a id="mylink" href="#">test</a>
I want script script/video (vid3) to trigger on click (& to hide vid2):
<a id="mylink2" href="#">test</a>
I have written this so far, but not sure how to stop/hide the previous videos:
<a id="mylink" href="#">test</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://test.com/vajs?vid2";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
The problem have bugged me for couple of days and I still can't managed to solve it.
in my main jsp file [ the tab or button]
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a id="stream" href="" data-toggle="tab">Stream</a></li>
<li><a id="me" href="" data-toggle="tab">Me</a></li>
<li><a id="findout" href="" data-toggle="tab">Find Out</a></li>
</ul>
</div>
in my main jsp file [ the div to display another jsp ]
<div class="tab-content">
<div id="suggestion"></div>
<div class="tab-pane" id="function_stream"></div>
<div class="tab-pane" id="function_me"></div>
<div class="tab-pane" id="function_findout"></div>
</div>
and some javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/find_out.js"></script>
<script type="text/javascript" src="js/me.js"></script>
<script type="text/javascript" src="js/stream.js"></script>
<script type="text/javascript" src="js/suggestion.js"></script>
in my find_out.js
$(document).ready(function(){
$('#function_findout').hide();
$('#findout').click(function(){
$('#suggestion').hide();
$('#function_stream').hide();
$('#function_me').hide();
$('#function_findout').show();
$('#function_findout').load('findout.jsp');
});
});
// and some google map code here( it work perfectly fine in normal (html + js) but not now
since I do load jsp page from another page, i believe there's the problem
The error log keep showing the error in this particular line which is
google.maps.event.addDomListener(window, "load", initialize);
last but not least my findout.jsp file
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWDPCiH080dNCTYC-uprmLOn2mt2BMSUk&sensor=true"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<div class="map">
<div id="map_canvas"></div>
</div>
I have
base.html
pageA.html
pageB.html
pageA.js
pageB.js
pageA.js has code for pageA.html, pageB.js has code for pageB.html.
both pageA.js and pageB.js uses jQuery.
currently I am including all of the scripts in base.html, like so:
<html>
<body>
<div id="contents">
<!-- pageA.html / pageB.html comes here -->
</div>
<script src="js/jquery.js"></script>
<script src="js/pageA.js"></script>
<script src="js/pageB.js"></script>
</body>
</html>
I'd like to load pageA.js only for pageA.html and pageB.js for pageB.html, as the code in each file is not needed in the other page.
I've looked into requires.js library, but I'm not sure yet if it is the right solution for my problem. What are the best practices for structuring javascript files in this type of situation?
I think that the best you can do is add the <script src="js/pageX.js"></script> in the end of the pageX.html IF this page is loaded dynamically.
If the page isn't loaded dynamically, it may load before jquery.js and break you javascript.
Or you can read the current URL and load the correct script based on this info, like this:
var scriptPath;
var currentPage = window.location.pathname;
if (currentPage == "pageA.html")
{
scriptPath = "pageA.js";
}
else if (currentPage == "pageB.html")
{
scriptPath = "pageB.js";
}
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
scriptElement.setAttribute("src", scriptPath);
document.getElementsByTagName("head")[0].appendChild(scriptElement);
Do you have JavaScript to load in the contents of each html file? If so, and you have JavaScript code to run once each file is loaded you can call the required setup functions inside the load function like this:
base.html
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pageA.js"></script>
<script type="text/javascript" src="js/pageB.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html', function()
{
setupPageA(); // defined in pageA.js
});
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html', function()
{
setupPageB(); // defined in pageB.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
Or, you if you just want to run pageA.js when pageA.html is loaded in you can just include the pageA.js script element in page pageA.html itself, like this:
pageA.html:
<div id="pageAContent">Page A</div>
<script type="text/javascript src="js/pageA.js"></script>
pageB.html:
<div id="pageBContent">Page B</div>
<script type="text/javascript src="js/pageB.js"></script>
base.html:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html');
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html');
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
The dynamic script src solution:
base.html:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function loadScript(script)
{
// Modify the existing script tag
if($('#dynamicScriptTag').length != 0)
{
$('#dynamicScriptTag').attr('src', script);
}
else // Create script tag
{
$('<script>').attr('type', 'text/javascript')
.attr('src', script)
.attr('id', 'dynamicScriptTag')
.appendTo('head');
}
}
$(document).ready(function()
{
$('#loadPageA').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageA.html', function()
{
loadScript('js/scriptA.js');
testScriptB(); // test if we can still call a function in scriptB.js
});
});
$('#loadPageB').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageB.html', function()
{
loadScript('js/scriptB.js')
testScriptA(); // test if we can still call a function in scriptA.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA" href="#">Load Page A</a>
<a id="loadPageB" href="#">Load Page B</a>
</body>
</html>
pageA.html:
<div id="pageAContents">Page A</div>
pageB.html:
<div id="pageBContents">Page B</div>
js/scriptA.js:
console.log($('#pageAContents').text());
function testScriptA(){ console.log('Can still call testScriptA!'); }
js/scriptB.js:
console.log($('#pageBContents').text());
function testScriptB(){ console.log('Can still call testScriptB!'); }
I ended up using Jinja(a template engine) to place the javascript files like following:
base.html
<html>
<body>
<div id="contents">
{% block contents %}
{% endblock %}
</div>
<script src="js/jquery.js"></script>
{% block scripts %}
{% endblock %}
</body>
</html>
pageA.html
{% block contents %}
..page A contents..
{% endblock %}
{% block scripts %}
<script src="js/pageA.js"></script>
{% endblock %}
If you are using a template engine, it could be a viable solution.