I am new to Joomla and have been able to do all I wanted until the point I needed to add some Javascript to a module.
The code below only produces "Test1" and "Test2", but no alert pops up.
What am I missing?
<div>
TEST1
<script type="text/javascript">
alert 'alert';
</script>
TEST2
</div>
<div>
TEST1
<script type="text/javascript">
alert("alert");
</script>
TEST2
</div>
You can use the sourcer plugin from nonumber.nl
Related
I have a div tag in my webpage
<div id="editor1" name="editor1" contenteditable="true">
{!! $post->post !!}
</div>
When I click on the content of this div, a CKEditor Toolbar appears automatically. I tried to disable this Toolbar. I tried the following but could not be able to.
Try 1 :
<script>
$(document).ready(function() {
CKEDITOR.disableAutoInline = true;
});
</script>
Try 2: In the CKEditor config file
config.disableAutoInline = true;
What is my wrong? I am searching at Google, Stakeoverflow for several hours but not finding any solution. May I be helped by anybody?
Note that:
In the Page Header I added
<link rel="stylesheet" href="http://localhost/ewt/resources\assets
\ckeditor\plugins\codesnippet\lib\highlight\styles\magula.css">
and in the Footer I added
<script src="http://localhost/ewt/resources/assets/ckeditor/ckeditor.js"> </script>
<script src="http://localhost/ewt/resources/assets/ckeditor/adapters
/jquery.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
I had the same problem, for me it started working when I set the disableAutoInline outside of document.ready:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
$(document).ready(function () {
...
}
</script>
So basically I have this code where I click on the image, it gets html file and should display it on the same page. It does display it but on another page, my guess is that it's not actually loading js file for some reason. Anyone can help?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#section('content')
#endsection
#section('template')
<!-- #foreach ($templates as $template)
{{$template->image}}
{{$template->file}}
#endforeach
-->
<div class= "template_class">
<a class="content-link" href="templates/template1.html">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
</div>
#show
JavaScript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.content').load(this.href)
.fail(function()( alert('Oops...something went wrong')));
});
});
alert("hello");
It doesn't even show alert so that's why I think it is not loading it.
The <script> tags are out of the #section sections.
Try changing it like this:
#section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#endsection
If it doesn't work, check if the JS files are really included in your browser. (Open the Chrome Dev Tools and check the DOM)
I am trying to request a service via iron-ajax using the following in my index.html:
<body class="fullbleed">
<template is="dom-bind" id="mainTemplate">
<paper-material class="todo" elevation="1">
<span>Mohammed</span>
</paper-material>
<br/>
<iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
<span>{{data.geonames.0.countryName}}</span>
<br/>
<span>{{data.geonames.0.name}}</span>
</template>
<p id="geolocation">Finding geolocation...</p>
</body>
In my JS code, I would like to read {{data}} but could not do it. I tried to do it using the following:
<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>
The code gives me undefined when I log {{data}}.
This should work:
<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>
As Dogs pointed out, the data property doesn't belong to requestGeoname-element, it belongs to the "template" item that is binded with dom-bind. Dogs solution should also work, but if you have other variables to use in your application, this is probably the better solution since they are now accesible through the template-object. For example:
...
template.myOthervariable = "derpherp";
...
You have to wait until the request is finished. It's better to use the event response (More info: https://elements.polymer-project.org/elements/iron-ajax#response).
<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
console.log(event.detail.response)
});
</script>
or declaratively:
<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
console.log(event.detail.response);
};
</script>
<iron-ajax … on-response="onPlacesResponse"
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 can't see where I'm going wrong. I've tried everything I could think of, reCAPTCHA is just not working with the Ajax API. Here's what my code looks like:
<!-- this is in <head> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("my key here", "recaptcha_widget", {
"theme": "custom",
"lang": "en",
"callback": function() { console.log("callback"); } // this doesn't get called
});
});
</script>
<!-- ... this is in <body> -->
<div id="recaptcha_widget" style="display: none">
<div id="recaptcha_image"></div>
<div id="recaptcha_links">
get another •
<a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">switch to audio</a>
<a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">switch to image</a> •
help
</div>
<dt>Type the words</dt>
<dd><input type="text" id="recaptcha_response_field" name="recaptcha_response_field"></dd>
</div>
Works for me? What is happening? What are you trying to do?
When I substitute and alert for the console.log it alters everytime the page loads or a new reCaptcha gets generated. Exactly like it is supposed to.
The callback is not where you submit it for validation, if that is what you are trying to do then look here: http://recaptcha.net/apidocs/captcha/
Sorry for answering my question again. Found the problem, apparently you can't use reCAPTCHA in locally stored files (accessed via file:///), they have to be on a http:// site. As soon as I put this on localhost it worked.
+1 durilai for letting me know it works with him/her, this way I was able to look at the problem from a different perspective.