jQuery datepicker not working on dynamic HTML - javascript

I have asked this question before and also here. However, none of the proposed answers worked. And days after, the problem is still not resolved. Hence my asking again, with a few more details to see if someone could help me get it resolved.
I have an input field that is generated via Ajax from the server-side, and inserted into the current page. My problem is: the jQuery date picker is not working on the input field when it is generated via Ajax, but it works when the field is directly placed in the page.
Below, I include a scaled-down version of my code.
HTML code:
<form id="user-form"></form>
And here's the jQuery code that's supposed to activate the datepicker on it.
$.ajax({
type: "GET",
url: "/inputfield-loader.php" ,
success: function(data) {
$('#user-form').html(data);
$("#datefield").datepicker();
}
});
And here's inputfield-loader.php
<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>
Everything works fine if the input field is just hard-coded into the page. But when inserted into the DOM as the return string of an Ajax call, the date picker no longer works. However, when I use Chrome to inspect the datefield field, I see that it has added the jQuery datepicker class hasDatepicker to it, indicating that the call to the jQuery.datepicker() method worked. But on click of the field, I don't see the date picker pop up.
As per #dfsq's suggestion, here is the fiddle. It comes closer to the original code: http://jsfiddle.net/35kgsjxk/

You're missing opening div tag in your inputfield-loader.php file, which can cause issue of hiding some elements.
If you're using correct headers and data type in $.ajax it should work as it's working on: http://jsfiddle.net/96d8k2m3/

I was also facing the same issue. I fixed this as,
$(document).bind('click','#datefield',function(){
$('#datefield').datepicker();
})

Related

html input type date calls javascript function before i select date in Iphone

I am making a spring boot application and working with HTML to update my view. Here I am trying to implement native datepicker using input type date in a html form where user will select date and then the page will refresh and submit form with selected date as url parameter.
The textbox in the form will also display the value selected in datepicker in the format I require after page refresh.
Its made in such a way that there should not be submit button to submit form and once the user selects date from input field, the page should automatically refresh and save value in url parameter as well as in text box in form.
below is my code:
HTML:
<form action="#" id="myForm" method="get">
<input type="text" id="save-date" name="show_date" class="form-control">
<input type="date" onchange="changeDateFormat()" name="date" class="form-control"></input>
</form>
Javascript:
<script type="text/javascript">
function changeDateFormat(){
var received_date = document.getElementById("date-input").value;
var split_dashes = received_date.split('-');
var final_date = split_dashes[2]+'.'+split_dashes[1]+'.'+split_dashes[0]
document.getElementById("show_date").value = final_date;
document.getElementById("myForm").submit();
}
</script>
My Problem
This works great on all the platforms except ios/iphone 8. On ios/iphone 8 as soon as i click input type date field, datepicker immediately opens and quickly refreshes the page. I expect it to wait for my input but it doesn't allow me. instead it quickly invokes js function and refreshes the page.
i dont face this in chrome or any other browser. In chrome datepicker will open as calendar and it will wait for me to select date.
What I tried
I tried whole night and half of my today to understand why it happens. It seems in ios datepicker it quickly selects date as soon as i click to open dropdown picker. Apart from that i tried implementing jquery function but it works the same way. I also tried onselect, oninput but nothing works.
I am beginner in javascript and this is making me go crazy from last night. I am very close to get it working but feels yet so far away.
My Approach
One approach to tackle this problem is on carefully observing datepicker in iphone i found out that it immediately selects date as soon as i open datepicker in the phone, and maybe that's why it invokes javascript function.
However if it can wait for me to select the date until i press "Done"(its there in iphones) in datepicker, this problem can be eliminated
Please guide me to how i can solve this
For anyone who also have same problem in the future. Just try firing function with onblur event instead of onchange. onchange doesnt work here because in iphone the field gets updated as soon as you try to move the datepicker spinner to select dates. So with onblur it waits until the user intentionally closes the datepicker only then function is invoked.
Thanks.

html Input field is auto filled with username saved in browser form [duplicate]

This question already has answers here:
How do you disable browser autocomplete on web form field / input tags?
(101 answers)
Closed 4 years ago.
Problem:
I created an input field with type text, but when page loads it is auto filled with username saved (saved for this website login page)in browsers form data. i want to show it clean when page load.
<input type="text" class="form-control search-field" placeholder="Search Item"
ng-model="vm.applyCategFoodSearch" autocomplete="off"
name="txtFieldForSearchItems">
i am unable to find solution, autocomplete='off' was suggested by many other sources, but issue not fixed. if it can be handled using html,jquery,javascript,angularjs. it will be good.
I also reset the values in controller
vm.applyCategFoodSearch='';
timeout also tried but not working
$timeout( function(){
vm.applyCategFoodSearch='';
}, 5000 );
if i set time out to 10seconds, it will work, but its not the solution. i am sending ajax call for food categories,when it returns, this timeout code will run with 10second delay.it will work. other than 10second delay.it will not work.
In the controller you may set it to empty string.
applyCategFoodSearch="";
basically it will be like this $scope.applyCategFoodSearch="" or this.applyCategFoodSearch="" , depends on whichever you prefer
autocomplete='off' these days is ignore by major browsers. I suggest that you create a random string for each session and when you are outputting html you append the random String to name parameter value. For example , suppose the random String is "fjsdorf" , you can output this name="fjsdorf_txtFieldForSearchItems". When you get the data at the server , you can append the random String when you want to access the parameter values.
try this, hope this helps:
<input type="text" name="foo" autocomplete="off" />
or try with jquery on page load:
$('input#Password').val('');

Amended value of input not retrieved by jQuery

I've encounter a very strange situation. In my troubleshooting, I have added value="test" in the text field and added console.log($('input[name*="name"]').val()); so the whole code looks like this:
$('body').on('click', 'input[type="button"][name*="review"]', function() {
console.log($('input[name*="name"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textfield-name" placeholder="Required" value="test" >
<input type="button" name="review" value="Review" />
In the console, it will now say "test" as expected. But if I remove "test" from the text field's value and type in something random like "dsa", it will say... nothing at all! Just a blank row in the console! If I add text after test it will only show "test" and not the text I've typed in.
The code I use, is exactly the same as the code above and it worked perfectly the day before yesterday. I have not edited or added anything else during the time between 2 days ago till now, since I was on a one day long trip yesterday.
If I run the code in jsFiddle, it will execute everything as normal.
I also have tested to remove everything in my JavaScript file and only leaved the code above within $(document).ready(function() { ... }. The result is the same as mentioned. This applies also when I tested to remove everything in the HTML file and only kept the input.
I have also tested to replace .val() with .prop('value') but the result is the same.
In short, all text that I type in to the text field, are completely ignored by the website!
Excuse my language, but what the h*** is going one here?! Is this some sort of bug or what?
The problem is now solved, thanks to Rory McCrossan!
The problem was that multiple text fields with the same name, existed on the same page. I added the post ID into a data properties (data="1") and the problem was after that gone.
Many thanks for opening my eyes, Rory!

onchange event crashes entire page

I am Trying to add an onchange function to three separate elements that will rebuild the calendar if the user changes day, month, or year. The page loads and works fine until I change one of the three values, then it returns only the basic calendar with no css formatting, and all of the other elements from the page are gone. No errors are shown in developer tools.
I have looked at many examples online and I think my syntax is correct. I am calling the function initially on page load, which works fine.
<div id="bottomleft">
<script type="text/javascript" onload="buildCalendar();">
</script>
</div>
I am then calling it on change for each of the three elements as shown below.
<input type="number" min="1" max="31" step="1" id="myday" onchange="buildCalendar();">
<select id="mymonth" onchange="buildCalendar();">
<input type="number" min="100" max="2016" id="myyear" onchange="buildCalendar();">
My full CODEPEN is here: http://codepen.io/anon/pen/qbEXpJ however for some reason the calendar is not displaying here, although it works fine in chrome.
Please let me know if you see any errors.
When you are doing:
document.write("foo")
You are actually overriding the entire page, that's why you are getting everything without css format in the OnChange events. Sounds weird that it actually works with the onload, but you can see in CodePen it won't work there. Try to set up a div and write on it:
$("#myDiv").html("foo")

dojox.form.Rating Not Appearing in Post Data

I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?
You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.
Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel

Categories