Is it possible to inject the time into an input field that has just been injected? To clarify I am using CMB2 which is a WordPress library to create Custom Meta Boxes. I am using the repeating field field and this injects a div with a few fields. I want to use a button to add the current time to an input field.
I can do this if the post has been saved and the div is already in the DOM, but I cannot add the time to a newly created row/div.
Is it possible to add the time to a field that has been injected? If so, how? Any help would be appreciated.
I apologize if this does not make any sense. Its 1:40am and I cannot find the words to explain is too well.
This is how I get the time and add it to the input field.
(function($) {
var strDateTime = // bunch of code to get date...
$('.getTime').on('click', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});
}(jQuery));
This works fine if the div block has been saved and not newly injected, but if I click the add row button and the div is injected into the dom the getTime onclick event does not fire.
Because that handler gets added only once when the page first loads. You'd have to attach it to something that is on the page, and then filter it like so:
$('body').on('click', '.getTime', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});
Related
I have an application that uses jquery when editing date fields. It works on all fields that have the css class "date". I am reading some HTML code from the server into a DIV that functions as a pop up window. The HTML code includes several date fields and I want to have jquery manage those fields, too. The page has code pasted below in the head element and jquery automatically attaches to the appropriate fields. I need to add fields to jquery when the pop up appears and remove them when the pop up closes. When searching for an answer I could only find where jquery creates a textbox, but not attach to an existent textbox.
<script src="Include/jquery-latest.js" type="text/javascript"></script>
<script src="Include/jquery.maskedinput.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
// Define your mask (using 9 to denote any digit)
$('.phone').mask('(999)999-9999');
});
$(document).ready(function () {
$('.phone').change(function () {
var validnum = $(this).val().match(/^([01]?[0-9]|[0-9]|[0-9])[0-9]|[0-9]|[0-9]-[0-9]|[0-9]|[0-9]|[0-9]$/);
if (!validnum) {
$(this).val('').focus().css('background', '#fdd');
alert('Please enter a valid Phone Number (999)999-9999.');
} else {
$(this).css('background', 'transparent');
}
});
});
$(function () {
// Define your mask (using 9 to denote any digit)
$('.date').mask('99/99/9999');
});
$(document).ready(function () {
$('.date').change(function () {
var validnum = $(this).val().match(/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/);
if (!validnum) {
$(this).val('').focus().css('background', '#fdd');
alert('Please enter a valid Date mm/dd/yyyy.');
} else {
$(this).css('background', 'transparent');
}
});
});
</script>
Why doesn't your solution work?
By using $('.date').change(... jQuery attaches event listeners to all elements present in the DOM the moment you execute this function. As your modal gets added in later, it won't have received a listener.
Solution: $(document).on('change', '.date', function () { ...
By using this, you attach the event listener to the document root, so every time anything in the document changes, jQuery checks, if the changed element matches the selector you've provided as the second param (in this case .date). So all elements, even those added later to the page will react to changes.
BUT: As I said, you attach a listener to the document. As jQuery uses a shadow-DOM in the background it won't cost you much performance, but if you build a big application with many of these listeners, you might run into performance issues at some point. In this case you'd better add the listeners specifically to the element you just added.
Since the mask and event functions are enclosed, I moved them to the routine that creates the pop up and that resolves the issue, causing them to be called again each time. I placed a date test textbox on the form and displayed properties. Each time there was only one jquery property present, so it appears everything was removed and rewritten each time.
Im using a plugin (Event Organiser Pro) that dynamically creates a div based on the input of a number field - basically it creates a duplicates the form fields depending on the number you enter in the input field.
I need to run some jQuery which is based on those form fields, but obviously cant run it until the div has been created.
How can i run the script once the div has been created? Is it possible to run script when div id has been created? Or something similar?
Yes, you can delegate the DOMNodeInserted event to the body.
function createDiv() {
$('<div />').addClass('test').appendTo($('body'));
}
$('body').on('DOMNodeInserted', '.test',function() {
alert('Created element .test');
})
$("button").on('click', function() {
createDiv();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create</button>
In the example above the click on the button simulates your other script creating the div.
To rewrite the code to work with your setup you can strip the click part out and delegate the event listener to your id:
$('body').on('DOMNodeInserted', '#your_element',function() {
yourFunction();
// call a function here or add your code here directly
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: This example won't work here because the element with that ID does not exist and neither does the yourFunction() function.
I have two tags on same page.
First tag works on page view and contains custom html that push a value to dataLayer.
<script>
$(document).ready(function ($) {
$('ul li').click(function(){
console.log("index:"+$(this).index());
dataLayer.push({'clicked_slider_tab_index': $(this).index()});
});
});
</script>
And second tag firing on element click with Universal analytic type using this dataLayer variable in Label field.
Problem is that. When second tag firing it's {{dataLayer - clicked_slider_tab_index}} variable has previous value. console.log works as expected but somehow dataLayer.push is not working as expected.
I can only detect index clicked in previous action.
This is most likely happening because the link click event is triggering both your custom HTML tag and your Universal Event tag at the same time, thus the Custom HTML tag hasnt had time to updated the 'clicked_slider_tab_index' value.
The best way to track in this instance would be to expand your dataLayer.push to include an event. The next step would be to change the trigger to fire on the new event "indexClicked". This would ensure that the dataLayer variables are populated when the element is clicked.
<script>
$(document).ready(function ($) {
$('ul li').click(function(){
console.log("index:"+$(this).index());
dataLayer.push({
'event': 'indexClicked'
'clicked_slider_tab_index': $(this).index()
});
});
});
</script>
I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});
Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.
http://holt59.github.io/datatable/
I have used the this link for filtration and pagination of my table. Earlier i was using the
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
JavaScript code for selecting the row and getting the id , now its not working when i included the js file. please help me to get the dynamic selection of rows.
It is probably destroying and re-adding the rows which removes your event handler. Use event delegation.
$(document).on("click", 'tr[data-href]', function() {
document.location = $(this).data('href');
});
You can move the listening location closer to the row
$("#tableId").on("click", "tr...