I tried to google it but nothing comes up. I have form builder with builds the form and generate a form structure. Then i will just copy paste that code into my textarea and save the whole html into mysql database. Now I want to modify that data and so I need to get the textarea value and filter it for input elements.
I used some thing like this.
$(document).ready(function(){
$("#btn").click(function(){
$("#ta").each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
});
});
But its not shwoing me anything. I Know i am doing it wrong as i am not getting the textarea value first and than parse it. So i did somthing like this :
$(document).ready(function(){
$("#btn").click(function(){
var a = $("#ta").val();
a.each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
});
});
But this too not working. Any suggestions.
You have to parse the textarea's value (say val1) using jquery like var a = $(val1) and saving it in a variable then you can extract out any dom element you want.
like a.find('input[type="text"]')
You're calling each on a single element called with id="ta". Ids are only meant to be used once in a document. Since you didn't provide more sourcecode i cannot see if your issue is there. If it's a single element, what are you trying with the each?
$("#ta").each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
I would suggest trying the following
$('input, select, textarea').each(function(k){
alert(k+' '+$(this).attr('name'));
});
Related
I'm writing a plug-in somewhat same like auto-complete or virtual keyboard with selected input values along with sorting and searching. This plugin is working fine to if I use it once in a page but when I apply this one to more then one then it is showing both the boxes and events are applied on the last written object. Sample code and fiddle is below:
http://jsfiddle.net/mantrig/ugmwa5b5/
my plug in code to in :
$(document).ready(function(){
var testData = ["BSL","DSK","NPNR","SAV","ET","NDLS","JPR","MAS","BCT","NZM","BR","SUJH"];
$(".stations").myAutoSuggest({
data:testData,
dataref:"stationsList",
title:"Station List",
sort:"desc"
});
var trainData = ["12345","32151","64231","56421","78542","13452"];
$(".trains").myAutoSuggest({
data:trainData,
title:"Train List",
dataref:"trainsList",
sort:"desc"
});
});
I'm very much new to writing any plug-in so code may be very dirty. A little help will be much appreciated!!
You missed '.
Change $(body).append(html); to $('body').append(html);
Jsfiddle
Problem is your "selectedTextbox" variable change here will solve your problem
$(".Help").bind("focus",function(e){
selectedTextbox=this;
showVirtualHelp(selectedTextbox);
});
and later using it here because there are multiple text boxes so you need to pass reference current focused element to show help box
function showVirtualHelp(selectedTextbox) {
$(".virtualHelp."+settings.dataref).css("top",($(selectedTextbox).offset().top+30)+"px");
$(".virtualHelp."+settings.dataref).css("left",($(selectedTextbox).offset().left+30)+"px");
$(".virtualHelp."+settings.dataref).show();
}
Working Fiddle
So here's my problem: I'm using a function and I need the function to be specific to each tr with the class "middleone". It's supposed to change the insides of a div inside of the the tr with the class "middleone". But it's not working!
I know the recursive portion of it is working, and the "navigation" should be spot on, because even when i'm using just $(this) it doesn't do anything. When using document.getElementById it works fine but of course that only targets the first div and the full version of the code has to "Go here, pull from here, put it here, go to the next area, pull from here.. etc" Here's the testing code.
$('.middleone').each(function() {
var tripleeagain = $(this).find('div')
tripleeagain.innerHTML = "$";
});
Thanks for any help
tripleeagain is a jquery object collection upon which you should use html() instead of innerHTML
Basically you could just write:
$('.middleone').find('div').html("$");
If you are doing specific stuff inside the loop then:
$('.middleone').each(function() {
//Some specific logic
var tripleeagain = $(this).find('div').html("$");
});
The problem is you are trying to access native API from a jQuery object.
var tripleeagain = $(this).find('div');// this will return a jQuery object
So you should use the jQuery API for setting the html contents
tripleeagain.html("$");
jQuery html API documentaion
I am requesting a full page using $.get in jQuery and would like to get the content of a specific element. Separately, here is how things look:
$.get( "/page.html").done(function( data ) {
// get textArea.
});
and I want to get:
document.getElementByTagName("textArea")[0].value;
but I can't do getElementByTagName on data so what is the best way to do this?
I tried using find but that did not work so I ended up using filter and that returned the value of textArea that I needed:
$.get( "/page.html").done(function( data ) {
var textArea = $(data).filter("textarea")[0].innerText;
});
It's slightly different of what you are doing but i think it can help. You can call .load instead of get and add the whole page to a div say <div id="mydiv"></div>
var value;
$('#mydiv').load('xyz.html',function(){value=$('#mydiv').find('#mytextarea').val()})
however if you do not want mydiv to show you can hide at the beginning once the main page gets loaded and if you also don't want this div on your page you can remove it after the above task is performed.
$(document).ready(function(){
$('#mydiv').hide();
var value;
$('#mydiv').load('xyz.html',function(){value=$('#mydiv').find('#mytextarea').val()});
$('#mydiv').remove();
})
//str represents page.html
var str = 'gibberish gibberish <textarea class="test">hello world</textarea>gibberish';
$.each( $.parseHTML(str), function( i, el ) {
if(el.firstChild) console.log(el.firstChild);
});
Fiddle: http://jsfiddle.net/ez666/7DKDk/
You could try jquery load() function.
It will load from remote server and insert document into selected element.
It also allow us to specify a portion of remote document to be inserted.
Assume your remote textarea's id is "remote" and you want to fetch the remote content into a textarea which id is "local"
var result="";
$("#local").load("/page.html #remote", function(response, status, xhr){
result=$(this).find("#remote").val();
});
I'm not sure if you want to get the remote textarea and insert into the element of the current document.
If you just want to get the value of the remote textarea, you could just hide the load function invoking element
Hope this is helpful for you.
Since you're using jQuery anyway… have you tried $(data).find('textarea').first().val() yet?
This is assuming that data is a fragment. If it is not you will want to wrap it in a div or something first.
I have a page, in which there are a couple of Option elements whose Value point to external pages. My aim is to use Ajax to extract the chosen Option's Value & use that to load content from external pages. E.g. When a user chooses Volleyball, I will get the 'volleyball.html' value, use Ajax to retrieve that page and load its #catalog content into the current page. Here's my code:
$("select").change(function(){
var selectedURL=$("option:selected",this).val();
if(selectedURL!=="Select One"){
$("#center").html("<p class='processing'></p>");
$.get(selectedURL,function(data){
var extractedContent=$("#catalog",data);
console.log(extractedContent); //Firebug says extractedContent is '[]'
$("#center").html(extractedContent); //Nothing is inserted inside div#content
},"html");
}
I'm not good at jQuery, and have kind of mixed and matched code from a few posts here to derive at the above. Now I'm not sure what went wrong, but nothing is loaded - the #center div block that is supposed to hold the extracted content is empty.
Can someone please help me spot just what's wrong with my code above? Many thanks in advance.
The load() method is perfect for this:
$('select').change(function () {
var selectedURL = $('option:selected', this).val();
if (selectedURL !== 'Select One') {
$('#center').html('<p class="processing"></p>').load(selectedURL + ' #catalog');
}
});
It can take only a URL, or it can take a URL followed by a selector which will only load the contents of the matched element (#catalog) into the element it is called on (#center).
You can't use $('#catalog', data) just like that. To extract content, you can create a jQuery object, and assign the HTML returned then extract from there:
var extractedContent = $('<div />').html(data).find('#catalog').html();
console.log(extractedContent);
$("#center").html(extractedContent);
$("select").change(function(){
var selectedURL=$("option:selected",this).val();
if(selectedURL!=="Select One"){
$("#center").html("<p class='processing'></p>");
$.get(selectedURL,function(data){
$("#center").html($(data).find("#catalog"));
},"html");
}
});
$("[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'));
});