PDA

View Full Version : jQuery noob question



RipzCurlz
01-10-2010, 04:07 AM
Hey everyone,

Ive been trying to figure out the syntax for appending text + variables.

Here is what i have so far


$(document).ready(function(){

$('.editBtn').click(function() {
var pname = $("input#pname").val();
var plink = $("input#plink").val();

$('#editEdited-textarea').append('<div class="navbtn"><a href="' + plink + '">' + pname + '</a></div>');
$('#editEdited-textarea').append().text('<div class="navline">.</div>');
});


});

The focus being on this line:


$('#editEdited-textarea').append('<div class="navbtn"><a href="' + plink + '">' + pname + '</a></div>');

As you can see i have 2 vars:

pname = page name
plink = page link

which are values taken by text inputs.

What i am wanting to achieve, is to append the vars with the html code wrapped around it, into a div called #editEdited-textarea

So it would look something like: <div class="navbtn"><a href=" + plink + "> + pname + </a></div>

Cheers

Nile
01-10-2010, 03:27 PM
Try getting rid of this line and see what happens:


$('#editEdited-textarea').append().text('<div class="navline">.</div>');

jscheuer1
01-10-2010, 04:51 PM
If:



$('#editEdited-textarea')

is a textarea, you cannot append() to it, you also probably shouldn't text() or html() to it either, though those may work in some browsers. You can add to or change its value (val()).

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

RipzCurlz
01-10-2010, 10:22 PM
Thanks for the replies


$('#editEdited-textarea')

Yes this element is a textarea,
i tried to find the addTo controller, couldnt see it but i did find the add one.
Which controller would you recommend to use?

Here is a link : http://enzed.site90.net/nav/

At the moment im just focusing on getting the new page name and new page link values added into that textarea with the html code wrapped around them.
But it has to be displayed in text as its for a client, so that they are able to adjust their left navigation without having to get me to do it.
So it needs to output the markup needed so that the client is able to copy and paste it into the html view of the navigations content editor on their site.

Please ask any questions if your are unsure about something.

jscheuer1
01-11-2010, 02:02 AM
Your page that you linked to is currently unavailable. In the meantime, what do you mean by "controller"?

Anyways, it sounds like you want to change the value of a textarea to give cut and paste HTML code to the user based upon a URL and link text the user supplies. Do I have that much right?

If so, a starting point could be (though jQuery is hardly required for something this simple):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#linkForm').bind('submit', function(e){
e.preventDefault();
$('#code').val('<a href="' + $('#linkURL').val() + '">' + $('#linkText').val() + '<\/a>');
});
});
</script>
</head>
<body>
<form id="linkForm" action="#">
<div>
<label>Text: <input type="text" id="linkText"></label><br>
<label>URL: <input type="text" id="linkURL"></label><br>
<textarea id="code" cols="50" rows="5">
</textarea><br>
<input type="submit" value="Go">
</div>
</form>
</body>
</html>

Added Later:

As I was playing around with this, here's another example that's a little more complex and shows one way to to concatenate the value in the textarea:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#linkForm').bind('submit', function(e){
e.preventDefault();
var c = $('#code').val(), ca = c? c + '<br>\n' : '';
$('#code').val([ca, '<a href="', $('#linkURL').val(), '">', $('#linkText').val(), '<\/a>'].join(''));
});
});
</script>
</head>
<body>
<form id="linkForm" action="#">
<div>
<label>Text: <input type="text" id="linkText" value="Google"></label><br>
<label>URL: <input type="text" id="linkURL" value="http://www.google.com/"></label><br>
<textarea id="code" cols="50" rows="5">
</textarea><br>
<input type="submit" value="Add Link">
</div>
</form>
</body>
</html>

RipzCurlz
01-11-2010, 05:35 AM
Your page that you linked to is currently unavailable. In the meantime, what do you mean by "controller"?


I'm not sure what their name is, i was referring to: add(); append(); html(); text(); etc etc

Please try the link again, as it will give you more of an idea of what i am trying to achieve.

http://enzed.site90.net/nav/

if that doesnt work again heres another:

http://zentech.net16.net/nav/

Here is also a picture of the page:

http://img707.imageshack.us/img707/1885/leftnav.png

And here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Left Nav Editor</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">

body {background-color:#B0E2FF;}

h1{font-family:Verdana;font-size:20px;margin:0;}
p {font-family:Verdana;font-size:14px;}
.pbold {font-weight:bold;}
fieldset {border:0;}
:focus{border:none;}

#container {background-color:#5CACEE;width:870px;height:750px;border:solid 3px #006699;margin:20px;}
#column1 {background-color:#B0E2FF;width:500px;height:100%;border:solid 2px #006699;margin:20px 0 20px 20px;float:left;display:inline;}
#column2 {background-color:#B0E2FF;width:300px;height:100%;border:solid 2px #006699;margin:20px 0 20px 20px;float:left;}

#editEdited {background-color:white;border:solid 2px #5CACEE;width:420px;height:280px;margin:18px;padding:20px;}
#editEdited-textarea {margin:0 20px;overflow:auto;}
#editInsert {background-color:white;border:solid 2px #5CACEE;width:420px;height:280px;margin:18px;padding:20px;}
#editInsert-textarea {margin:0 20px;overflow:auto;}

#controls {margin:10px;}

.editBtn {background:#5CACEE;border:solid 2px #5CACEE;;margin:30px 0 10px 0;padding:5px;color:white;}
.editBtn:hover {border:solid 2px #006699;}
.editBtn:active {background:#006699;border:solid 2px #004466;}

#plink {width:260px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#editEdited-textarea').empty();
$('.editBtn').click(function() {
var pname = $("input#pname").val();
var plink = $("input#plink").val();
var porder = $("select#porder").val();

$('#editEdited-textarea').append().text('<div class="navbtn"><a href='+plink+'>'+pname+'</a></div><div class="navline">.</div>');

/*$('#editEdited-textarea').add('<div class="navbtn"><a href='+plink+'>'+pname+'</a></div><div class="navline">.</div>');*/

});

});
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="column1">
<div id="editInsert">
<h1>Html to be edited.</h1>
<p>please paste the current html code for the left navigation. This code can be found in the concrete 5 content editor (html view).</p>
<textarea id="editInsert-textarea" cols="45" rows="10"></textarea>
</div>
<div id="editEdited">
<h1>Html that has been edited.</h1>
<p>Copy this code and paste it into the voffice concrete5 content editor (html view). So it completely replaces the previous code.</p>
<textarea id="editEdited-textarea" cols="45" rows="10"></textarea>
</div>
</div>
<div id="column2">
<div id="controls">
<h1>Controls</h1>

<p>Please enter the details for the new page.</p>
<p class="pbold">New Page Name:</p><input id="pname" type="text" name="pname"/>
<p class="pbold">New Page Link:</p><p>eg: http://www.google.com</p><input id="plink" type="text" name="plink"/>
<p>Please select the page title that will display above the new page, once this edit has been complete.</p>
<p class="pbold">New Page Order:</p>
<select id="porder" name="porder">
<option>Home</option>
<option>What is vOffice</option>
<option>Why Choose Us</option>
<option>What We Offer</option>
<option>FAQ & Support</option>
<option>About Us</option>
<option>Contact Us</option>
</select>
<br />
<input class="editBtn" type="submit" value="Complete Edit" />

</div>
</div>
</div>
<div id="footer"></div>

</div>
</body>
</html>

What i actually intend to achieve is:

The client can copy there current code from the content editor:

http://img190.imageshack.us/img190/4258/leftnavhtml.png


And paste it into the top textarea in the picture 1 of the page above.
Then enter the details on the right for the new page.
Then when the client clicks the "Complete Edit" the script will take the code from the top textarea.
Get the values from the inputs to the right.
Then add the values (with the correct html code wrapped around them) to the code taken from from the top teaxtarea.
Then display the resulting code in the bottom textarea so that the client is able to copy the new code with the newly added page details in it and paste it into the content html editor in picture 2, replacing the previous code.


I gave your code a go, and it works great, thats the basic functionality i am wanting to achieve.
Is it possible to make it so the code will only be inserted once per page load, so that the user wont make the mistake of added the code twice which could cause problems for users who aren't familiar with HTML.


Anyways, it sounds like you want to change the value of a textarea to give cut and paste HTML code to the user based upon a URL and link text the user supplies. Do I have that much right?

That is correct.

If you can advise me of a better way of achieving this function.
I am trying to create a user friendly tool for the client so that they are able to edit the html code of their left navigation on their own.

Thank you heaps jscheuer1 your efforts are much appreciated

jscheuer1
01-11-2010, 07:02 AM
OK, may need a bit of tweaking yet, see what you think of this (if we are on the right track):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function addCode(e){
e.preventDefault();
var cin = $('#incode').val().replace(/((\n)|(\x0d\x0a)|(\x0d)|(\x0a))<\/li>/, ''),
lb = '<div class="navline">.<\/div>\n<div class="navbtn"><a href="',
lm = '">', le = '<\/a><\/div>\n<\/li>';
$('#outcode').val([cin, lb, $('#linkURL').val(), lm, $('#linkText').val(), le].join(''));
addCode = function(e){e.preventDefault();};
}
$('#linkForm').bind('submit', addCode);
});
</script>
</head>
<body>
<form id="linkForm" action="#">
<div>
<textarea id="incode" cols="50" rows="5" wrap="off">
<li id="navbox">
whatever was there
</li>
</textarea><br>
<label>Text: <input type="text" id="linkText" value="Google"></label><br>
<label>URL: <input type="text" id="linkURL" value="http://www.google.com/"></label><br>
<textarea id="outcode" cols="50" rows="5" wrap="off">
</textarea><br>
<input type="submit" value="Add Link">
</div>
</form>
</body>
</html>

Notes: The wrap="off" attribute is invalid, but if you want to disable wrap in a textarea, there is no better way to do it, at least not yet that I'm aware of. The li tag in the first textarea is also technically invalid. But this would be a blank textarea in your form.

The function can only be run once per page load. Browsers will often save what's in the inputs and textareas on reload though. This can be changed with a bit more code if you are interested. A way to reset the form and re-enable the function might be good as well. That shouldn't be too hard to do.

Definitely requires javascript, though a PHP method shouldn't be too hard to whip up.

RipzCurlz
01-11-2010, 07:46 AM
Amazing! :) works great :D

I am working on adapting it to the blue layout in the screenshot above.
It does exactly what i needed, Thank you very much for your time.


Notes: The wrap="off" attribute is invalid, but if you want to disable wrap in a textarea, there is no better way to do it, at least not yet that I'm aware of.
o ok good to know i will be keeping the wrap="off"


The function can only be run once per page load. Browsers will often save what's in the inputs and textareas on reload though. This can be changed with a bit more code if you are interested.
Very interested in the code that disables browsers saving textarea content.


A way to reset the form and re-enable the function might be good as well. That shouldn't be too hard to do.
A reset button is definitely a good idea, didnt think of that one.
How would we go about achieving this


Definitely requires javascript, though a PHP method shouldn't be too hard to whip up.
O ok, ive actually just starting learning php too but i only know the very very basics.
Are you saying it needs to be javascript and php or just php?

Also i wanted to ask if there was an easy way of choosing where the html gets insert into the text from the 1st textarea based on the value of the dropdown menu or some other input.

Cheers

Added later: new updated layout with your last code adapted to it. http://enzed.site90.net/nav/

jscheuer1
01-11-2010, 05:11 PM
Here's a new version to try out. It incorporates a lot of the improvements I was talking about. Rather than use a select to determine the insertion point though, it uses the cursor position in the input textarea. There is a section, commented out (highlighted) at the end of the script, that if uncommented will make it so that the hard coded values for textareas and text inputs will go blank onfocus if they haven't been altered, and return onblur if they are blank. Handy if setting instructions/examples as those element's hard coded values. Notice also that the configuration of the various things that might change has all been moved to the top and documented.

Anyways, give this one a shot (try it by itself first to get an idea what's happening):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
//set id's of form and various form components:
var form = 'linkForm', codeIn = 'incode', codeOut = 'outcode',
linkURL = 'linkURL', linkText = 'linkText',

//Set text templates:
lb = '\n<div class="navline">.<\/div>\n<div class="navbtn"><a href="', //text before URL
lm = '">', //text after URL and before Link Text
le = '<\/a><\/div>', //text after Link Text

/////////////////// Stop Editing ///////////////////

editText = {
/* editText 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
modified and truncated here for specific purpose
*/
saveCurRng: (function(){return document.selection?
function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}:
function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'?
el.value.substring(el.selectionEnd, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection?
function(btag, etag){
this.curRng.collapse(false);
this.el.focus();
if(!window.opera){
document.selection.empty();
}
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
}:function(btag, etag){
if (typeof this.el.selectionStart === 'number'){
var el = this.el, startPos = el.selectionEnd, endPos = el.selectionEnd,
l = [btag, this.curRng, etag].join('').length; el.focus();
el.value = [el.value.substring(0, startPos), btag, this.curRng, etag,
el.value.substring(endPos, el.value.length)].join('');
el.selectionStart = el.selectionEnd = startPos + l;
}
};
})()
}; // End editText Object
form = $('#' + form), codeIn = $('#' + codeIn), codeOut = $('#' + codeOut),
linkURL = $('#' + linkURL), linkText = $('#' + linkText);
function dummy(e){e.preventDefault();}
function addCode(e){
e.preventDefault();
var cin = codeIn.val();
editText.saveCurRng(codeIn.get(0));
editText.insert('', [lb, linkURL.val(), lm, linkText.val(), le].join(''));
codeOut.val(codeIn.val());
codeIn.val(cin);
form.unbind('submit', addCode).bind('submit', dummy);
}
form.bind('submit', addCode).get(0).reset();
form.bind('reset', function(){form.unbind('submit').bind('submit', addCode)})
/*.find('textarea, :text').bind('focus blur', function(e){
var v = $.trim(this.value);
if(e.type === 'blur' && v === ''){this.value = this.defaultValue;}
else if(v === $.trim(this.defaultValue)){this.value = '';}
});*/
});
</script>
</head>
<body>
<form id="linkForm" action="#">
<div>
<textarea id="incode" cols="50" rows="5" wrap="off">
<li id="navbox">
whatever was there
</li>
</textarea><br>
<label>Text: <input type="text" id="linkText" value="Google"></label><br>
<label>URL: <input type="text" id="linkURL" value="http://www.google.com/"></label><br>
<textarea id="outcode" cols="50" rows="5" wrap="off">
</textarea><br>
<input type="submit" value="Add Link"> <input type="reset" value="Reset">
</div>
</form>
</body>
</html>

Note: It is possible to use only one textarea for both the input and output code. It's up to you to decide if that would be more convenient or more confusing for your users. It would require a little modification.