Inserting input elements - javascript

I am trying to insert/move some insert elements on a form on an internal site.
I am using jquery and the .insertafter function but although the labels will move the inputs wont
This works to move the labels
$("label[for='rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1']").insertAfter("label[for='rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0']")
but the inputs wont
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').insertAfter('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0');
I have also tried to hide them this also fails
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').hide()
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0').hide()
I have a fiddle here if anyone can help
http://jsfiddle.net/kxLsp4ne/

in the end the solution was simple
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').insertAfter('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0');
Thanks for the help

Related

How to get text from selected value in a dropdownlist which is js based

Hello i have trouble getting the value out of a dropdownlist created with the plugin FacetWP. I have searched A LOT and tried a lot of different methods to get the text value out of that list but with no success. my latest try was:
var messagepop = $(".facetwp-filter .facetwp-facet-perioxeskalipsis > .fs-label-wrap > .fs-label").text();
alert (messagepop);
I have no idea what else to try.. i tried siblings() find() and everything other but i was getting a blank box in the alert..any help would be appreciated!
UPDATED: problem was due to an ajax request taking place at the time. Had to place the code a few lines further down!
Try this out
$('.facetwp-filter').find('div[data-name="perioxeskalipsis"]').find('div.fs-label-wrap').find('div.fs-label').text();
Hope this will help you.

Displaying div, javascript function

I wanted to display a hidden div in function after it will do some things but it doesn't work. Could you please help me with it? Here is what i tried to do:
#Edit
Ok, it's the code in short. After i click link calc there is a form, and after i click on input submit, there is and alert, and then it should display a div, but that's not working.
http://pastebin.com/XU58GhFv
Try to put the id directly in JQuery.
`$("#evolves-calculator").css('display', 'block');`

custom css error class not applying for the fields jquery validator

I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace
Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");

Filtering table data based on search keyword using jQuery

I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch

Function to create/add another select (dropdown) box

I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});

Categories