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);
});
});
I have the following snippet:
<html>
<head>
</head>
<body>
<form>
<div id='mydiv'>
</div>
</form>
</body>
</html>
I want to add "recaptcha" inside #mydiv usign a javascript code given at https://developers.google.com/recaptcha/docs/display just before </body>:
I tried to use the following code:
<script>
var mydiv = document.getElementById('mydiv');
var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I-W9HOm0RQgV0';
mydiv.appendChild(script);
</script>
But it doesn't work. It only paste the script code. It doesn't run it.
Do you have any idea how to do this?
Thanks.
Here you go taken from the example code on your link see fiddle,
http://jsfiddle.net/GVwZ4/1/
in a div
http://jsfiddle.net/GVwZ4/2/
<body>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I- W9HOm0RQgV0">
</script>
<div></div>
</body>
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.
cannot run this code ... php textarea is showed but only one click and everything is disappear
Note:the page is positioning by anchors and words in "{}" are tags.
On оne page I am trying to put more than one ACEtextarea
(jQuery function is just a thought)
<div id="{id_area}" style="width:100%;height:165px; position:relative; background:#fff;" class="">
{text}
</div>
<input type="hidden" name="{name}" id="{id_area}-textarea"/>
<script src="{dir}/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/theme-crimson_editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/mode-php.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor_{id_area} = ace.edit("{id_area}");
editor_{id_area}.setTheme("ace/theme/crimson_editor");
var {id_area}_Mode = require("ace/mode/php").Mode;
editor_{id_area}.getSession().setMode(new {id_area}_Mode());
jQuery("#{id_area}-textarea").val(editor_{id_area}.getSession().getValue());
};
</script>
Only if form action is /?cms_mode=edit
<body id="home">
<form method="post" action="/?cms_mode=edit" id="main">
</form>
</body>
then a js file edit.js should be added into head, otherwise not.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="edit.js"></script>
</head>
Is it possible through jquery/javascript?
And edit.js flie should be added after all other .js file
If you have to do it on the client-side in JavaScript, you may want to try the following:
var newScript;
if (document.getElementById('main').action.indexOf('?cms_mode=edit') >= 0) {
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'edit.js';
document.getElementsByTagName("head")[0].appendChild(newScript);
}