I'm trying to make a add to favorite system. I have a function which alerts the proper id I want to add.
I use:
<script type="text/javascript">
function addfavo(state_name)
{
alert(state_name);
}
</script>
And in my html I have a loop (with php) which shows all the images with the add to favorite links which looks like.
<div style="margin-top:40px;">
<a onclick="addfavo('<?php echo $imgid ?>')"><b>Add to favourits</b></a>
</div>
So what happens is I have a lot of links to the same function with different parameters, but I only want the link that I click to change the text (to something like added to favorites)
Can some one help me in the right direction?
I have tried adding:
$(this).innerHTML("test");
but it didn't work.
You might want to use the html method:
$(this).html('test');
While html is a jQuery method, innerHTML is a property of a DOM element. If you were using pure JavaScript, you'd probably use:
this.innerHTML = 'test';
However, as you are using the onclick attribute on your HTML tag, this will not point to your current DOM element inside your function scope. In your case, I'd add a class to your elements, like add_favorite and add your text to another attribute:
<div style="margin-top:40px;">
<b>Add to favourits</b>
</div>
And then apply a jQuery event to it:
<script type="text/javascript">
$(function() {
$('.add-favorite').click(function(e) {
var text = $(this).data('text'); // store the text in a variable
$(this).html(text); // replace your element's html with your text
e.preventDefault();
});
});
</script>
Fiddle: http://jsfiddle.net/MH6vY/
Related
I have an jQuery element $foo
it contain html with a textarea. But if I change the value of textarea and use $foo.html() after this change, the html result is not actualized...
(bad) exemple : http://jsfiddle.net/sNYYD/781/
var $foo = $('#foo'); console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.html());});
how remove or disabled jquery dom cache?
EDIT EXEMPLE ======================================================
I do a simple exemple, but the answer go on bad way, sry about that, my use case is more specefic and looks like this :
http://jsfiddle.net/sNYYD/790/
I need know how found good key to delete in $.cache for my element, to actualise html of element in my global var.
You need to access the actual textarea's value:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.find('textarea').val());});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>
See the updated fiddle: http://jsfiddle.net/sNYYD/782/
Changing the text in the text-area doesn't affect the actual html, that is why you are always getting the same value. If you need only the text you can use one of the other solutions if however you need the whole html you have to take the value and put it into the actual html like this:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function()
{
$("#textArea").html($("#textArea").val());
console.log($foo.html());
});
UPDATE
This is the solution for your new example.
JSFiddle: http://jsfiddle.net/sNYYD/792/
Because textarea only display data via val() not ah html() . You are calling the only HTML But Textarea does not support to display the typed text content via html() function call
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function() {
console.log($foo.html());
console.log($foo.find('textarea').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- By http://jquery4u.com / Sam Deering -->
<div id="foo">
<textarea>test</textarea>
</div>
Duplicate answers i would say How to get form html() via jQuery including updated value attributes?
and removing or disabling DOM cache using jQuery is not possible i feel.
$(document).ready(function(){
$("textarea").keyup(function(){
$(this).html(console.log($(this).val()))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>
I am using below function to generate dynamic HTML.
function (content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
Here I am appending content in div with id divMessage.
Here input parameter content can be any text passed to this function.
I am facing problem when I pass data containing html elements as it distorts html. I am not aable to paste it here as its get dostorted here in stack overflow editor as well.
How can I resolve this issue, TIA.
It should append what is being passed, don't want to convert html tags to html, if html tag with data is passed then html tag with data should be the ouput.
To resolve this you need to only paser the content text to HTML
Just do this
content= $.parseHTML(content);
$('#divMessage').append('<span>'+ content+ '</span>');
Hope it will help!
You can pass html value like this.
function AddContent(content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
$("#divAppendMessage").on("click", function() {
//$('#divMessage').html(''); // If you want to clear div before append
var html='';
html+='<h1>My new message</h1>';// You can add mark up like this.Be sure for closing tag.
AddContent('<h1>My new message</h1>');// Pass html without generate markup as OP say on comment.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divMessage'>
</div>
<button id='divAppendMessage'>Add Message</button>
May be
this fiddle solve your problem. Before get input from user convert it and reset it when bind.
I am trying to get onclick/onfocus/onchange in an HTML tag that is being created by Jira. The item itself is a drop down list and while I can get onfocus to work on other IDs, I cant get it to work on the drop down list
What I have:
<script type ="text/javascript" >
console.log("Testing");
var colorDropDown = document.getElementById('someID');
function changeColor()
{
//if(value)
alert("Hello World");
}
document.getElementById("someID").innerHTML ="<onfocus=\"changeColor()\"></select>"
//document.getElementById("customfield_11901").innerHTML = "<select class=\"select cf-select\" name=\"customfield_11901\" id=\"customfield_11901\" onfocus=\"changeColor()\">"
</script>
After using innerHTML, the onfocus does not appear in the page. I have also tried this by copying the entire tag and inputting it via HTML.
I have used the .onchange function after getElementById, but that does not work either.
I would use the .attr() function under jQuery:
$('#select_id').attr('onfocus', 'changeColor();');
Or you can use the addEventListener with plain JS:
object = document.getElementById('#select_id');
object.addEventListener('focus', 'changeColor();');
I have such html code:
<div>
<div id="text">text></div>
<script>$("#text").val('some value');</script>
</div>
I copy this html through .clone() and edit html inside. Result:
<div>
<div id="1-text">text></div>
<script>$("#text").val('some value');</script>
</div>
I want to change id inside tags script. $("#1-text").val('other value');
How can I do it?
You can simply add a variable to the outside that dynamically tells you what to select. so if you were to iterate through your values using a loop you can do something like this:
$("#text_"+i).val('other value');
You could also set a counter and as new divs are added the i increments. So it is flexible.
I'm not exactly sure what your end goal is but I wouldn't recommend this methodology if you're attempting to manipulate the javascript in the <script> tag. As I believe that would be cumbersome.
If you want to copy entire html block, you should bind your inline javascript code to this block as a container. Not id. So when you move or copy the block your script will be able to find any elements related to container.
<div id="containerOne" class="js-container">
<div class="js-text" data-text="some value">some value</div>
<script>
var $el = $("script").last().closest(".js-container").find(".js-text");
$el.text($el.data("text"));
</script>
</div>
Hereby you obtain access to elements by class not id. Note using "js-" prefix is just for javascript manipulation not for css styling.
Also you don't need to change script itself. You can change values via "data-" attributes.
In your external script you can encapsulate any clone logic by various methods. For example:
var myModule = {
clone: function(containerSelector) {
var $donorEl = $(containerSelector);
var $donorScript = $donorEl.find('script');
$script = $("<script />");
$script.text($donorScript.text());
$recipientEl = $donorEl.clone();
$recipientEl.attr('id', 'containerTwo');
var newValue = 'other value';
$('.js-text', $recipientEl).data('text', newValue);
$('body').append($recipientEl);
$('script', $recipientEl).replaceWith($script);
}
};
myModule.clone('#containerOne');
You can see the working example.
I have a simple question - is it even possible to get element's HTML with styles from DOM? I don't need any jQuery object, just plain HTML with all styles.
I would use it in case were I have grid with different styles across rows and I would like to get that html and styles and sent it to server where I would use it in a mail body - programatically ofcourse.
Is there an elegant way to do that?
Tnx for answers
$.html() (with no arguments) does exactly this: http://api.jquery.com/html/
From the example on the page:
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
When the function is called, the contents of htmlStr is
<b>Click</b> to change the <span id="tag">html</span>
(as a string)