Cannot get simple JQuery commands to work - javascript

I'm having a ton of problems understanding Javascript and JQuery at the moment - they're causing me major headaches. Here's what I'm trying to do:
Replace the end of long item descriptions with ellipses. I want it to work for however many item descriptions that I have.
I tried doing it myself, completely failed, then tried to use a jquery.ellipsis plugin. Linking \jquery.ellipsis-master\jquery.ellipsis-master\src\jquery.ellipsis.js seems to have stopped my code from running at all. The alert does not show.
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript">
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
Can somebody explain which file from Github I'm supposed to use? The ellipsis plugin is from https://github.com/bebraw/jquery.ellipsis

You cannot put your JS code in a <script> element that has a src attribute. It's one or the other. To do what you need you have to add your own <script /> tag, like this:
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript"></script>
<script>
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({
visible: 3,
more: '…',
moreClass: 'more',
separator: ' ',
atFront: false
});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
</script>

You need to put your script inside a <script></script> tag if it's in your html. This is basically telling the browser that anything between these tags is JS. The external link to a script is used to define a link to an external JS file. You can check out this detailed article that explains how exactly JS is embedded http://docstore.mik.ua/orelly/webprog/jscript/ch12_02.htm
It will work if you do this
<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.ellipsis.js" type="text/javascript"></script>
<script>
alert("JS works");
$(document).ready(function () {
function pTruncate() {
$('.ideaText').each(function () {
$(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false});
});
};
pTruncate();
$(window).resize(function () {
pTruncate();
});
});
</script>
Cheers and happy coding!

Related

How to call jquery function from file on pageload?

I want to my jquery function initDatePicker() into a js file. The function should require a parameter. I want the function being called on pageload.
Tried the following, but I'm probably missing some pieces here?
datepicker.js:
$(function initDatePicker(startDate) {
...
});
html:
<script type="text/javascript" src="#{/js/datepicker.js}">
$(function() {
initDatePicker('-1d');
});
</script>
Is my function definition correct in datepicker.js?
How do I correctly call the function on pageload with providing a parameter?
With the help of #deltab I could solve it as follows:
function initDatePicker(startDate) {
...
};
<script type="text/javascript" src="#{/js/datepicker.js}"></script>
<script type="text/javascript"><
$(function() {
initDatePicker('-1d');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
initDatePicker('-1d');
}
</script>

Difference between init events in js file or html template

Is there a difference between lauch js functions from same JS file where they declared after page load, or in html template? When both signed into $(document).ready(function () {...}).
I assume that no, but I ran into a problem when replace my ExampleService.init() function from template to separate JS file.
For example i have that construction:
common.js
var ExampleService= {
catalogSpinner: '',
init: function() {
this.initEvents();
},
initEvents: function() {
var self = this;
$('.example-button').on('click', function() {
//do some logic, append spinner...
self.removeSpinner();
});
},
removeSpinner: function() {
$(this.catalogSpinner).fadeOut('slow', function() {
$(this).remove().css({display: 'block'});
});
}
}
index.html
<script src="js/common.js"></script>
<script>
$(document).ready(function () {
ExampleService.catalogSpinner = '<div class="spinner"></div>'; // css3 animation
ExampleService.init();
});
</script>
That way all works perfect, my catalogSpinner overriden from template, and i can use them like DOM element.
But! if i move ExampleService.init(); to common.js file, like that:
common.js
var ExampleService= {
...
// all the same...
...
};
$(document).ready(function () {
'use strict';
ExampleService.init();
});
index.html
<script src="js/common.js"></script>
<script>
$(document).ready(function () {
ExampleService.catalogSpinner = '<div class="spinner"></div>';
});
</script>
That way it wouldn't work. And throw console error Uncaught TypeError: this.catalogSpinner.fadeOut is not a function
Why it's happens? After all in both cases init functions starts only after full page load, and no matters that i override my variable after starting base functions. What im doing wrong?
About orders in which inits will executed. How i understand its no matter. Cause in any case, second document.ready from template file, always ovverride empty catalogSpinner variable from JS file, before click event happens
It's almost certainly a timing issue. What guarantee do you have that $(document).ready in common.js will fire after the same event handler in your html file (which is what needs to happen according to your implementation)?
Or, you need to make sure that when it occurs in common.js, that code can somehow retrieve the catalogSpinner value.
Also, catalogSpinner needs to be a valid jQuery object, not a string.
It will and it does work in both the cases. To use jQuery methods over DOM elements, you must have valid jQuery selectors which will return objects binded with jQuery methods.
Try this:
case 1:
common.js
var ExampleService= {
catalogSpinner: '',
init: function() {
this.initEvents();
},
initEvents: function() {
var self = this;
$('.example-button').on('click', function() {
//do some logic, append spinner...
self.removeSpinner();
});
},
removeSpinner: function() {
this.catalogSpinner.fadeOut('slow', function() {
$(this).remove().css({display: 'block'});
});
}
};
index.html
<!doctype html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="common.js"></script>
<style>
</style>
</head>
<body>
<div class="spinner">Spinner</div>
<button type="button" class="example-button">Remove</button>
<script type="text/javascript">
$(document).ready(function () {
ExampleService.catalogSpinner = $('.spinner');
ExampleService.init();
});
</script>
</body>
</html>
case 2:
common.js
var ExampleService = {
catalogSpinner: '',
init: function () {
this.initEvents();
},
initEvents: function () {
var self = this;
$('.example-button').on('click', function () {
//do some logic, append spinner...
self.removeSpinner();
});
},
removeSpinner: function () {
this.catalogSpinner.fadeOut('slow', function () {
$(this).remove().css({display: 'block'});
});
}
};
$(document).ready(function () {
'use strict';
ExampleService.init();
});
index.html
<!doctype html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="common.js"></script>
<style>
</style>
</head>
<body>
<div class="spinner">Spinner</div>
<button type="button" class="example-button">Remove</button>
<script type="text/javascript">
$(document).ready(function () {
ExampleService.catalogSpinner = $('.spinner');
});
</script>
</body>
</html>

Dynamically loading a script changes its behaviour

I wanted paperjs to load after a button is pressed to turn on animations but it seems the paperscript doesn't work if paper is loaded after page load.
If you comment out the setTimeout and uncomment the direct $.getScript - paperjs will fire the alert('hi'). I don't get it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
$("#jq").text("jQuery is now loaded.")
var lateLoad = function() {
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
};
//setTimeout(lateLoad, 100);
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
I'm using Chrome 23.0.1271.97 m on Windows 7 x64. Anybody have an idea what's going on here?
I think I figured out a workaround as well - paper.PaperScript.load() or to elaborate:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("#jq").text("jQuery is now loaded.")
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
var lateLoad = function() {
$.getScript(paper_url, function() {
$("#pp").text("Paperjs is now loaded.");
paper.PaperScript.load(); // <-- The fix!
});
};
setTimeout(lateLoad, 1000);
//$.getScript(paperUrl, function() {
// $("#pp").text("Paperjs is now loaded.");
//});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
That causes paperscript to scan for all the paperscripts. I found it at https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270 while googling for "paperscript" in the github repo. Though it still doesn't explain why paper doesn't do the load() on its own when dynamically loaded.
EDIT - I understand what went wrong. It's related to https://github.com/jquery/jquery/blob/master/src/core.js#L768 because paperjs doesn't check if the window loaded event had already fired i.e document.readyState === "complete". I submitted a pull request to paperjs https://github.com/paperjs/paper.js/pull/156
I think it is easier to load it via require.js. All you need is a require.config object, defined in e.g. main.js:
requirejs.config({
paths : {
'jquery' : "path/to/jquery"
'paper' : "path/to/paper"
},
shim: {
'jquery' : {
exports: 'jQuery'
},
'paper' : {
exports: 'paper'
}
}
});
You will need to load require.js with the above config via the data-main attribute:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
Then you define a module (e.g. 'paperStuff') where your paper logic will be:
define(['jquery', 'paper'], function($, paper) {
// do some cool stuff
});
When you want to load your paperStuff, you just do
var paperStuff = require('paperStuff');
...
Move your paperscript code into an external file (i.e. pstest.js) and modify your lateLoad to:
var lateLoad = function() {
$.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
function() {
$("#pp").text("Paperjs is now loaded.");
$.getScript("pstest.js");
} )
}

Cant figure how to implement following jQuery plugin into my webpage

I've been looking for something that will authorize a textbox when user types something and I found this ideal plugin:
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
It seems prety straight forward, but for some reason I can't implement it on my website >.< do you guys have any ideas on how to do it? (read the post)
Thank You )))
Here is what I tried, but it doesn't work
HTML
<head>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript">
$('textarea.mainStatusTxt').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
</head>
<body>
<textarea class="mainStatusTxt" placeholder="Comment" style="display:block;"></textarea>
</body>
Either wrap your script with:
$(document).ready(function() {
//YOUR CODE
});
or move the entire <script> tag to the end of the document (or at least, after the <textarea>).

Js javascript code problem

Hi i have a problem with my js code. So, i include in 'head' in my site, script
var Engine;
jQuery
(
function($)
{
Engine =
{
utils :
{
site : function(id)
{
$('#content').html('<strong>Please wait..</strong>').load('engine.php',{'site':id},function()
{
os = {adres:'drugi'};
history.pushState(os,'s',ts);
}
);
},
topnav : function()
{
$('div li').bind('click',function()
{
Engine.utils.site($(this).attr('rel'));
unbind('click',false);
}
);
}
}
};
Engine.utils.topnav();
}
);
Now i want call included script in index.php
<script language="JavaScript" type="text/javascript">
Engine.utils.site(1);
</script>
And here is a problem above code doesn't works.
But if i click on any 'li' element Engine.utils.site work's correctly.
Please help me i try fix it a few days.
Sory for my bad english
Have you tried putting the call in a ready function?
<script language="JavaScript" type="text/javascript">
$(function() {
Engine.utils.site(1);
});
</script>
This happens because of closure. Your object Engine is not visible outside anonymous function

Categories