How to show JavaScript variable in colorbox - javascript

I use colorbox jquery and have problem to show variable in colorbox.
I have variable called wp_store_caption that get value from input type :-
<input type="text" id="title" class="ab_form_text wp_store_caption require" name="wp_store_caption" value="">
Now i use colorbox like :-
jQuery(document).ready(function() {
var wp_store_caption = jQuery('#title').val();
jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"});
});
But canot show value of wp_store_caption, But when use alert() without colorbox, I can see the value.
Where is problem ?!

It is not happening because when you write
jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"})
you bind the value of wp_store_caption, which is initially not defined.
You need to bind click event and assign value to wp_store_caption, and then call colorbox function.
You should write this:
$(".open-popup-link").click(function () {
$.colorbox({
html: "<h1>" + $('#title').val() + "</h1>"
});
});
See DEMO here.
In this example, I have predefined value of title. Please note this value will not update the heading in colorbox because the value of -wp_store_caption is not being updated.

You can bind to .blur() to get it work as here.
$(function() {
$('#title').blur(function(){
var wp_store_caption = $('#title').val();
if (wp_store_caption.length > 0)
$.colorbox({html:"<p>" + wp_store_caption + "</p>"})
});
});

Related

How to get textarea value into a varaible outside function

How to make the variable "apry" be equal to the written data in "textarea",
So then i will can get its value into URL?
HTML:
<textarea id="post" type="text"></textarea>
<a onclick="location.href = 'http://localhost/arany/?i=' + apry + '';">Reload</a>
JS:
$(document).ready(function() {
$('#post').keyup(function() {
var apry = document.getElementById('post').value;
});
})
You are actually setting the value of apry, but the problem is you then aren't doing anything with it, including not updating your DOM element. You would need the following instead :
$(document).on("keyup", "#post", function() {
$("#theLink").attr("href", "http://localhost/arany/?i=" + $("#post").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="post" type="text"></textarea>
<a id="theLink" href="#">Reload</a>
Theres no need for a global variable in this case. You can just listen for the click event on the reload button:
<textarea
id="post" type="text"></textarea>
<button id="reload">
Reload
$(document).ready( function() {
$('#reload').click(function() {
location.href = 'http://localhost/arany/?i=' +
$('#post').val();
});
});
http://jsfiddle.net/4j0fohr5/1/
To do what you require it would make more sense to invert the logic. Instead of creating and updating a variable which has the value of the textarea as it's typed in to, simply have an event handler which reads the value from the textarea when the a is clicked. This has the benefit of avoiding an unnecessary global variable. Try this:
<textarea id="post" type="text"></textarea>
Reload
$(document).ready(function() {
$('#reload').click(function() {
location.assign('/arany/?i=' + $('#post').val());
});
});
One thing to note here is that you will have to be careful with line breaks in the value.
Alternatively if you did want to update the href of the a as the textarea is typed in to you could use prop() to do that inside an input event handler:
<textarea id="post" type="text"></textarea>
Reload
$(document).ready(function() {
$('#post').on('input', function() {
$('#reload').prop('href', '/arany/?i=' + $(this).val());
});
});
I see that you want to add the textarea content as a query string "i" parameter when you click the "Reload" button.
For that purpose you only need an input text field instead of a textarea, since the URL does not support line break characters.
Also, you don't need to update the "i" every time you change the text, realize that you need that value just when you click the "Reaload" button.
So, here is what I propose to you to solve your problem:
<input type="text" id="post"></textarea>
<a onclick="goToLocation();">Reload</a>
function goToLocation(){
apry = window.document.getElementById('post').text();
window.location.href = 'http://localhost/arany/?i=' + apry;
}
var apry = null;
$(document).ready(function() {
$('#post').keyup(function() {
apry = document.getElementById('post').value;
});
})
This should work for you

Jquery on Input not working on dynamically inserted value

I'm trying to alert a value using jquery when it is generated from a javascript code, the value is generated on the input box the problem is jquery cannot detect the changes, commands i tested are "change, input" but when i manually input a value jquery triggers
sample code:
value is dynamically generated on the javascript and pushed / inserted to the inputbox, the value is not manually generated
javascript:
document.getElementById("displayDID").value = DisplayName ;
html:
<input type="text" id="displayDID" />
jquery:
$('#displayDID').on("input" ,function() {
var work = $(this).val();
alert(work);
});
the value of the id="displayDID" changes but jquery cannot detect it after execution.
sample fiddle http://jsfiddle.net/SU7bU/1/
add trigger to it
$('#gen').on('click',function() {
$('#field').val('val').trigger("change");
});
$(document).on("change",'#field' ,function() {
var work = $(this).val();
alert(work);
});
http://jsfiddle.net/ytexj/
It is because you have added the script before input is ready.Due to which, event is not getting set on that element.write the code on document ready:
$(document).ready(function(){
$('#displayDID').on("input" ,function() {
var work = $(this).val();
alert(work);
});
})
or use event delegation:
$(document).on("input",'#displayDID' ,function() {
var work = $(this).val();
alert(work);
});
Ok I will propose you one answer and let's see if it solve your problem.
If you use keyup, and you insert 3350 value, you will display 4 alert, and I think you want to display only 1 alert.
$(document).ready(function() {
var interval;
$("#variazioneAnticipo").on("input", function() {
var variazioneAnticipo = $("#variazioneAnticipo").val();
clearInterval(interval);
interval = setTimeout(function(){ showValue(variazioneAnticipo) }, 1000);
});
});
function showValue(value) {
alert("ANTICIPO VARIATO: " + value);
}
<input id="variazioneAnticipo" class="rightAlligned form-control" style="width: 60%" type="number" step="0.01" min="0" value="3" />
I explain it, when you input anything into the input, will trigger a setTimeout in 1 sec, if you press another key under this time, we clear the timeOut and we triiger again, so you will only have 1 alert 1 sec after the last input insert.
I hope it helps you, and soyy for my english :D

object HTMLInputElement without form in jquery html

I have a function
function changeval(fid) {
$('#'+fid).html('<span onclick="alert(' + fid + ');" class="link">Change</span>');
}
On first place fid appears as normal variable and affects the div I need (with id that is 'fid'), but on alert function it appears as [object HTMLInputElement]. I just don`t know what to do... I think I have tried everything...
You need to wrap the 'fid' with quotes in the html output, without quotes javascript alert the first element with 'id="fid's content"'.
View here
function changeval(fid) {
$('#'+fid).html('<span onclick="alert(\'' + fid + '\');" class="link">Change</span>');
}
I would remove the "onclick" and do it like this(using jquery 1.7.1)....
$(function() {//Document ready
$('body').on('click','.link',function(){
//Do what you want i.e...
alert($(this).parent().attr('id'));
alert($(this).parent().html());
});
});
function changeval(fid) {
$('#'+fid).html('<span class="link">Change</span>');
}
Hope it helps.

Append input value to a div

can someone show me how to take an input value and append it to a div once the user clicks on an Add link?
This is the best I could do.
HTML:
<div id="customUtility-container"></div>
Add
jQuery:
$(function() {
var addDiv = $('#customUtility-container');
var i = $('#customUtility-container').size() + 1;
$('#addUtility').live('click', function() {
$('#customUtility').val().appendTo(addDiv);
$('<p><label for="customUtility-container"><input type="text" id="customUtility" size="20" name="customUtility_' + i +'" value="" placeholder="" /></label> Remove</p>').appendTo(addDiv);
i++;
return false;
});
$('#removeUtility').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
This creates another input field however; I just want to have one input box, have the user click Add, then it takes that value, puts it into the list, and clears the input box so the user can add something else again.
Use jQuery's append() function
addDiv.append($('#customUtility').val());
Here's a working fiddle.
Warning: opinion below
When creating a variable to store a jQuery object, I think it's helpful to prefix the variable with $. This way, you know that you're working with a jQuery object. It also makes it easier for those coming behind you to recognize what you're doing:
var $addDiv = $('#customUtility-container');
$addDiv.append($('#customUtility').val());
Something like:
addDiv.html(addDiv.html() + whateveryouwanttoadd)
addDiv.append($('#customUtility').val());
Change
$('#customUtility').val().appendTo(addDiv);
To
addDiv.append($('#customUtility').val());
val() method gives the value of the input element and you cannot call a jQuery method on a string which will throw an error.
Working demo - http://jsfiddle.net/t9D8R/
I ended up scrapping everything and redoing it:
$(function() {
var i = $('#customUtility-container').size() + 1;
$("#addUtility").on("click", function() {
$("#customUtility-container").append('<div id ="customUtility_' + i +' " name="customUtility_' + i +' ">'+ $("#customUtility").val() + 'Remove</div>');
});
$('#removeUtility').live('click', function() { $(this).closest('div').remove();
i--;
});
});

Knowing the last clicked textbox via Javascript

I have a form and a button.
I need that when I click on a textfield, and then click this particular button, the textbox which was clicked last will change its value to say "BUTTON HAS BEEN CLICKED".
Is there a way via JavaScript how I can know the last textbox which was clicked?
Many thanks in advance.
You need to store a reference to the text box when you click it. The easiest way to do that is to create a global variable for the reference. Then you would update the reference with the textbox's onclick event. Here is an example:
HTML:
<input id="myTextBox" type="text" onclick="updateCurText(this);">
<input type="button" value="click me" onclick="updateText();">
JavaScript:
var currentTextBox = '';
function updateCurText(ele) {
currentTextBox = ele.id;
}
function updateText() {
document.getElementById(currentTextBox).value = 'BUTTON HAS BEEN CLICKED';
}
Live example.
jsumners is correct, however I would probably recommend avoiding global variables, and if you're using something like jQuery you have encapsulate a lot of the logic in a single file:
$(function() {
var lastBox = false, formSelector = "form.myClass";
// Change events
$(formSelector + " input[type='text']").click(function() {
lastBox = this;
});
// Button click
$(formSelector + " button").click(function() {
if (lastBox)
$(lastBox).val("BUTTON HAS BEEN CLICKED");
});
});
live

Categories