Use link to add text to inout box - javascript

I have a table of Codes and Prices.
The "codes" are set as a link -
CODENUMBER
I have a form with the text box
When the link in the table us added I want the code to be added to the input field.
This actually works great:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});
});//]]>
</script>
But the site I am using a wordpress templated site that includes jquery 1.10.2 and the 1.7.1 is causing some of the "bits" of the site not to work so need the "onClick" action to work with 1.10.2 - or any other solution.....
Any help appreciated
Thanks

Try this one use on event
$('a').on('click',function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});

There are no issues with the version of jQuery you are using. Check out the code in the fiddle. Try and change the version of jQuery to see the results. More code and examples of your problem might help...
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val() + $(this).html() + ', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});
http://jsfiddle.net/c6Q88/1/

Related

Really Live Preview with TinyMCE (value of TinyMCE)

I'm using a short Jquery Script to make a live preview of a few input fields. Now with TinyMCE i can't get the value of tinyMCE to insert it into a div. I found another thread Get value of tinymce textarea with jquery selector, but i not really can figure out how to use this tipps on my code. I'm a beginner with jQuery and very thankful vor every help.
JS Fiddle
$(document).ready(function() {
updatePreview();
$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});
function updatePreview(){
var tinymce = $('#lp-message');
tinymce.html($('#message').val());
}
Sorry, but there are lot of mistakes in Your code. :/
This is the only code that you need under javascript section.
tinymce.init({
selector: "textarea",
setup : function(ed) {
ed.on("keyup", function(){
$('#lp-message').html(tinymce.activeEditor.getContent());
});
}
});
And here is your html code:
<div id="live-preview-form">
<textarea id="message">Easy! You should check out MoxifvdfvdfvfdveManager!</textarea></div>
<div id="lp-message"></div>
As u can see you have to use tinymce API to get content from editors. And "keyup" events should be used on editor not on the "textarea".
I hope that I helped You. :)

Changing a div's opacity when the user scrolls

I'm making a website and I want the header (named floatHeader in my code) to be invisible at the start and then becomes visible once you start to scroll. I have tried my best to do it with JQuery but I'm not very experienced, so any advice would be much appreciated.
Here is the current code that I have.
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.floatHeader').css("opacity", 1);
}
else{
$('.floatHeader').css("opacity", 0);
}
});
Your code is working fine. You just need to include jQuery to your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Here is your fiddle.
You missed to load any version of jquery
Working Demo
I will suggest you to use the jquery plugin.
here is the link: http://stickyjs.com/
You have missed adding jquery in your fiddle code. So add jquery file in your code in tag like this.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Also If you want the header to be invisible at start then set the "style:display:none;" in your header. This will hide your header at start.
<div class="header" style="display:none"></div>
Here is the updated fiddle.

How to disable all the links and input buttons on a page using jquery

I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/
It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.
Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});
I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

Adding an anchor to generated URLs

I have tried finding a simialr example and using that to answer my problem, but I can't seem to get it to work, so apologies if this sounds similar to other problems.
Basically, I am using Terminal Four's Site Manager CMS system to build my websites. This tool allows you to generate navigation elements to use through out your site.
I need to add a custom bit of JS to append to these links an anchor.
The links generated are similar to this:
<ul id="tab-menu">
<li>test link, can i rewrite and add an anchor!!!</li>
</ul>
I can edit the css properties of the link, but I can't figure out how to add an anchor.
The JQuery I am using is as follows:
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").each(function() {
$(this).children("a").css({color:"red"});
});
});
</script>
Thanks in advance for any help.
Paddy
sort of duplicate of this:
How to change the href for a hyperlink using jQuery
just copy the old href and add anchor to it and paste that back
var link = $(this).children("a").attr("href");
$(this).children("a").attr("href", link+ "your own stuff");
A nice jQuery-based method is to use the .get(index) method to access the raw DOM element within your each() function. This then gives you access to the JavaScript link object, which has a property called 'hash' that represents the anchor part of a url. So amending your code slightly:
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").children("a").each(function() {
$(this).css({color:"red"}).get(0).hash = "boom";
});
});
Would change all the links in "#tab_menu li" to red, and attach "#boom" to the end.
Hope this helps!
I can now target the html by using the following:
$(this).children("a").html("it works");
I assumed that:
$(this).children("a").href("something");
would edit the href but I am wrong.
Paddy
I am not sure for the answer, I dint try
$("#tab-menu").children("li").children("a").each(function() {
// $(this).css({color:"red"}).get(0).hash = "boom";
var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href');
$(this).attr('href', temp_url);
});

Categories

Resources