jQuery .insertAfter not working, trying to move element in DOM - javascript

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');

Related

How to get the value of h1 tag using JS?

I have 3 pages, the 2 pages are WordPress pages and the other 1 is a custom page template with a form. The 2 pages are created using wp-job manager plugin. The 1st page has had a dropdown menu and contains list of jobs. On the 2nd page is the description of a job.
Now, I want to get the value of h1 tag on the 2nd page after the user click the input button and pass it to the 3rd page and displayed it in one of the input textbox (Position input textbox) using JS.
How to do this?
Here's the link of the 2nd page
3rd page
HTML:
<header class="entry-header">
<h1 class="entry-title">Collections Trainer</h1>
</header>
Vanilla JavaScript solution (no framework required):
var h1Text = document.querySelector(".entry-title").textContent;
can you use jquery? if so, get the h1 values when you click the button from jquery and then sent to the other page using query string.
EDITED
Add the jquery file in your page to user jquery features. And you need to put the function inside $(document).ready() function in order to attach the function into the object.
you can learn more about jquery in https://learn.jquery.com/.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"/>
<script>
$(document).ready(function(){
$('.application_button').click(function(){
var headervalue = $(".entry-title").text();
window.location = "http://homecredit.ph/testEnvironment/4537-2/?position="+headervalue;
});
});
</script>
Use the class you've given the heading in normal js use the following.
var x = document.getElementsByClassName('entry-title').value;
console.log(x); //outputs collections trainer
If you're using jQuery then its
$('.entry-title').text
Hope that helps.
If you want to get the h1 value only after the button click you will need to put the onclick for the button.
$.(document).ready(function(){
var header1Text ='';
$('.application_button').onclick(function(){
header1Text = $('h1').html();
});
//To display it in whichever textbox you want:
$('#GivesomeIDtoYourTextBox').val(header1Text);
});
PS:You need to also include the jquery source to your page.
jQuery: To get H1 value
var gValue=jQuery("header h1.entry-title").text();
alert(gValue);
As you need to fetch values on other pages, for that you can send values via QueryString or using HTML5 LocalStorage
Sample Code:
var first_page_h1_Value=jQuery("header h1.entry-title").text();
var second_page_h1_Value=jQuery("header h1.entry-title").text();
localStorage.setItem("FirstPage", first_page_h1_Value);
localStorage.setItem("SecondPage", second_page_h1_Value);
On third Page you can get both pages header text
alert(localStorage.FirstPage);
alert(localStorage.SecondPage);
If you are using Jquery then i would recommend that you give id to your H1 tag assuming id of your H1 tag is "h1Title".
HTML:
<h1 id="h1Title">Heading here</h1>
Then to get the title you write following in JQuery:
var title = $("#h1Title").text();
//To Check Whether you are getting text or not
console.log("title :"+title);
By this you will get text of your heading.

jQuery won't hide form on click

I have three click events. Each one hides and shows different things depending on what is being clicked. Everything works except for the <form> with class markas doesn't get hidden when the <p> with class cancel is clicked.
Here is the jQuery:
$(".cancel").on("click", function(){
$(this).hide().parent().find('.celltext, .editlink, .marklink').show().parent().find('.editas, .markas').hide();
});
$(".editlink").on("click", function(){
$(this).hide().parent().find('.celltext, .marklink, .markas').hide().parent().find('.editas, .cancel').show();
$(this).parent().find(".editas input:text").focus();
});
$('.marklink').on("click", function(){
$(this).hide().parent().find('.celltext, .editlink, .editas').hide().parent().find('.markas, .cancel').show();
$(this).parent().find(".editas input:text").focus();
});
The HTML is exactly what you would assume. I have used a similar code with strings of .prev() and .next() and everything was hidden and shown correctly. Since I know it's not the internal HTML structure, rather than paste unnecessary code (I am using php functions and code to gather info from a database), the general structure is this:
<div>
<p class="celltext">Info from database</p>
<p class-"editlink">Edit</p>
<p class="marklink">Mark</p>
<form class="markas">Form with select box to mark the cell</form>
<form class="editas">Form with text fields to edit the info</form>
<p class="cancel">Cancel</p>
</div>
I have tried to hide the form in a separate line on its own, but that doesn't work either. Why doesn't it hide and how do I get it to hide properly when cancel is clicked?
UPDATE:
It has to do with the order that the forms display in. I swapped markas and editas and now markas hides and editas doesn't.
As per the comments above, this is the answer that solved the problem:
Without seeing a working example with the problem, I can't say for
sure, but I suspect you are picking up more elements than you intend
with the chained find() and parent() calls. I'd suggest doing a
parentEl = $(this).parent(); $(this).hide(); at the start of all of
your functions, then doing parentEl.find(...).show(); and
parentEl.find(...).hide(); It'll make your code easier to read, too.
$(".cancel").on("click", function(){
var parentel = $(this).parent();
$(this).hide();
parentel.find('.celltext, .editlink, .marklink').show();
parentel.find('.editas, .markas').hide();
});

Change text of child

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/

Highlight the text using jquery

I have one textbox, button and and list box with some text.
When I click on button what ever the text I enter in text if it matches the text in the list box I am trying to highlight that text using jquery I used this code.
Jquery Code
$("#btnhighlight").click(function () {
alert("yes");
var htext = $("#txthighlighttext").val();
alert(htext);
$("#lstCodelist").highlight('MD');
});
Style sheet I used to hightlight and i downloaded the highlight plug in added to the project
<style type="text/css">
.highlight { background-color: yellow }
</style>
Please can any one help me out how to do this. or if I am doing wrong?
Can an
Maybe your problem is that your script is executed before DOM ready.
try with this:
$(function (){
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").text();
$('#lstCodelist').highlight(htext);
});
});
or put your script at the body end.
ps. I supposed you used this plugin (jquery.highlight)
edit:
http://jsfiddle.net/yJmBu/ here a full example
This plugin is generating spans around the text it finds. Option tags can not contain any html tags so the following (Generated by your plugin)
<select>
<option><span class="highlight">Te</span>st</option>
</select>
is illegal syntax and will be ignored by the browser.
However if I understand your intent, there are some plugins out there that will accomplish something similar for you out of the box.
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Some proof that a nested span inside an option is not allowed.
html tags in the option tags
It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

jquery selector doesn't work when dynamically append html

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.

Categories