I can dynamically append "select" control to DOM,after appending it to DOM,I wanna change the html content of the last "select"(the latest "select" added dynamically),but it failed...
(I cannot set options value in param_html,becuase I should set them by using ajax request later.)
<script>
$(function(){
var param_html = '<select class="params"></select>';
$("input[value='+']").click(function(){
$('#parameters').append(param_html);
$('.params :last').html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
});
});
</script>
<div id="parameters">
<input type="button" value="+">
<select class="params"><option>1</option><option>2</option></select>
</div>
any suggestion is appreciated.
take out the space between params and :last
$('.params:last').html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
your content seems to be added after the dom has been loaded.
try live http://api.jquery.com/live/
Well your CSS selector is imporper should be $('.params:last-child') or $('.params:last') i think the space bar is not allowed there.
Also no one forbis You from using the object you've created:
$(function(){
var param_html = '<select class="params"></select>';
$("input[value='+']").click(function(){
$('#parameters').append(param_html);
$(param_html).html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
});
});
If you are going to use AJAX in future then the same idea will work instead of reselecting the object use to one you've created.
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 can't manage to make jQuery add the content of #quote (which is a paragraph with a string generated via foresmatic API).The full code is here: https://codepen.io/raffaele2692/pen/GvrvxM .... Can you help me? :)
<a type="button" class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-size="small"
data-text="">
Tweet</a>
<script>
var textQuote = document.getElementByID("#quote");
$("a").attr("data-text", textQuote);
</script>
You have some issues in the js code. You do not need to add "#" to the id for getElementByID call , also to get the text of a HTML element you can use text method.
<script>
var textQuote = $("#quote").text();
$("a").attr("data-text", textQuote);
</script>
I think textQuote is a HtmlElement object, not the value you want to assign.
you should get the value in quote first.
btw, jquery has a method called data to assign value to data attributes.
Its quite wierd .
My structure is
<form name="fm">
<input type="file" name="fl">
<input type="text" name="st">
</form>
Now document.fm.st.hidden=true; works as expected hiding the text box but document.fm.fl.hidden=true; doesnt works , it doesnt hides the file upload element ! Why & how to work around ?
It sounds like this might be a case of the script running before the page is completely loaded. If you want to be absolutely sure that the page is loaded before the script runs, you can do something like this:
document.onload = function(){ // if you want it could also be window.onload
document.fm.st.hidden = true;
document.fm.fl.hidden = true;
};
Cant you just give it an id and use
document.getElementById('yourID');
other whise maybe you can make a css class for it and use Jquery
.addClass() and .removeClass()
if you want to keep the input's space than apply visibility = "hidden" otherwise display = "none".
get Element by name
var inputElements = document.getElementsByName("fl");
This will provide you a list of the elements which have name 'fl'.
Now if you want to hide all the elements, run a loop.
For now, it'll provide only an element.
var inputElement = inputElements[0];
I would suggest using jQuery if you want to keep using javascript for long.
now hide the element
inputElement.style.display = "none";
For starters, make sure your script is after your element. The javascript you provided should work as you provided it, but if it doesn't, try the following:
<form name="fm">
<input type="file" name="fl">
<input type="text" name="st">
</form>
<script>
// hides the element (it will still take up space)
document.getElementsByName("fl").style.visibility="hidden";
// hides the element (it does not take up any space)
document.getElementsByName("fl").style.display="none";
</script>
I have tried the following jQuery code to move a <select> element (that I can only see within the DOM) after a <form> element but it does not work:
<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>
I have also tried:
<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>
Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.
Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.
This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
The code, only located in the DOM, is as follows:
<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>
The select dropdown box is supposed to be moved here:
The relevant code at the area is as follows:
<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post">
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript>
<br>
<small>Powered by LocalCurrency. Rates from Yahoo! Finance</small>
</form>
Thanks for any help!
1st: Be sure you include jquery
2nd: Wrap your code in
$(document).ready(function(){
// your code here
});
3rd: Try to use .each()
$(document).ready(function(){
jQuery('select[id^=lc_currency]').each(function(){
var getformId = $(this).attr('id').replace('currency','change');
//alert(getformId);
$(this).insertAfter('form#'+ getformId);
});
});
Working Demo
I guess your id strings should be inside quote , Try this
$(function(){
jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});
Edit:
Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.
$(window).load(function(){
setTimeout(function(){
jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
},1000);
});
From the screenshots you added, it seems like you want to insert the select inside the form, not after, this is what I used:
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');
$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?
Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});
this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));
post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});