Kod ze starej książki o jQuery nie działa. Edytor WYSIWYG

0

Uczę się/przypominam sobie jQuery. Mam starą książkę w której zdążyłem zauważyć, że kod dotyczy wersji jQuery jakoś przed 1.7 i pełno przestarzałych względem 2+ funkcji. Wie ktoś dlaczego ten kod nie działa? Po prostu jest sam html i brak reakcji na kilkanie w buttony. Możliwe, że wkleiłem fragmenty js w nieodpowiednie miejsca, bo w książce są pocięte. Z góry dzięki za pomoc.

<html>
<head>
<title>Manipulowanie tekstem zaznaczonym przez użytkownika</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
p { color:red;font-size:17px;width:670px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

function getPositions()
{
var startPosition = endPosition = 0;
var element = document.getElementById('selectable');
if (document.selection)
{
//dla Internet Explorera
var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText(element);
drange.setEndPoint("EndToEnd", range);
startPosition = drange.text.length - range.text.length;
endPosition = startPosition + range.text.length;
}
else if (window.getSelection)
{
//dla Firefoksa, Chrome, Safari etc.
startPosition = element.selectionStart;
endPosition = element.selectionEnd;
}
return {'start': startPosition, 'end': endPosition};
}

$('#apply').click(function()
{
var html = $('#container').html($('#selectable').val());
});

$('.button').click(function()
{
var positions = getPositions();
if(positions.start == positions.end)
{
return false;
}
var tag = $(this).val();
var textOnPage = $('#selectable').val();
var startString = textOnPage.substr(0, positions.start);
var targetString = textOnPage.substr(positions.start, positions.end - positions.start);
var formattedString = "<" + tag +">" + targetString +"</" + tag +">";
var endString = textOnPage.substr(positions.end);
$('#selectable').text(startString + formattedString + endString);
});

</script>
</head>
<body>
<input type="button" value="b" id="bold" class="button">
<input type="button" value="i" id="italics" class="button">
<input type="button" value="u" id="underline" class="button">
<input type="button" id="apply" value="Nałóż HTML">
<div>
<textarea id="selectable" rows="20" cols="80">Szlachetne zdrowie,
nikt się nie dowie, jako smakujesz, aż się zepsujesz.</textarea>
</div>
<p id="container"></p>
</body>
</html>

dodanie znaczników <code class="html"> i <code class="javascript"> - @furious programming

0

jak nie działa, jak działa http://jsfiddle.net/reurburn/
?
(przekleiłem ten kod na jsFiddle.net w odpowiednie okienka i zaznaczyłem jQuery 2.1.0)
Jeśli zaś sam kod jest w porządku, to być może jQuery nie dołączasz jak trzeba?

<script type="text/javascript" src="jquery.js"></script>

na pewno wgrałeś plik jquery.js do odpowiedniego katalogu?

EDIT: chociaż to raczej nie to. widzę już, że zapomniałeś opakować kod w jakieś $(document).ready() czy coś w podobie, przez co skrypt JS się musiał odpalać, zanim zostały stworzone elementy HTMLa.

spróbuj wszystko opakować w:

$(document).ready(function () {
 ///........
});
0
LukeJL napisał(a):

zapomniałeś opakować kod w jakieś $(document).ready() czy coś w podobie, przez co skrypt JS się musiał odpalać, zanim zostały stworzone elementy HTMLa.

spróbuj wszystko opakować w:

$(document).ready(function () {
 ///........
});

Dzięki, o to chodziło. Tylko troche dalej opakowałem

$(function() {
$('#apply').click(function()
...
//i do końca
1

btw czemu nie robisz wcięć w kodzie? Okropnie się to czyta. (no chyba, że te wcięcia były tylko zniknęly przy wklejaniu, bo i tak czasem bywa).

0

Kod jest przeklejony z pdfa i wcięcia się nie skopiowały

1 użytkowników online, w tym zalogowanych: 0, gości: 1