Search jQuery

jQuery Forum

Screen name:
angryman45

angryman45's Profile

16 Posts

67 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Automatic data saving issue
[13Replies]
- 12-Sep-2017 12:59 AM
- Forum: Using jQuery
Where's no problem using an event to call an ajax call for a data saving function (saveData), but timed, automatic data saving by calling this function at different interval failed without error. See code below. Know why?

Thanks in advance.
2. /* auto data saving; */
3. // try 60 seconds first
4. setTimeout("saveData()",60000);
7. var saveData = function() {
8. // use jQuery to send form
9. $(document).ready(function() {
10. $("#myform").submit(sendForm);
11. return false;
12. });
14. console.log("after form submission by jquery");
15. // iterate every 5 minutes
16. // do 60 seconds for now
17. setTimeout("saveData()",60000);
19. }
21. function sendForm() {
22. console.log('sendForm called');
23. $.post('mySavedata.cgi',$("#myform").serialize(),function(data,status){
24. $("#inform").html('Saved!') });
25. console.log('auto saved');
27. setTimeout(function(){document.getElementById('inform').innerHTML = ""},3000);
28. return false
29. }

Issue with two submit buttons
[2Replies]
- 11-Sep-2017 06:55 PM
- Forum: Using jQuery
HTML FORM looks like below:
1. <form id="biz" name="biz" action="CGI.script" method="post" onSubmit="console.log('submit button, not save button, clicked'); if (document.getElementById('field1').value=='$'){alert('Liability is required');return false} else if (document.getElementById('field2').value=='$'){alert('Fee is required'); return false};">
3. form field 1
4. form field 2
5. form field n
6. ...
7. lots of fields...
10. <input type="submit" id="save-and-continue" name="saveandcontinue" value="Save & Continue" onclick="saveData(this.form);">   
11. <span id="inform" style="color:red"></span>   
13. <input type="submit" id="saveform" name="saveform" value="Save & Exit">
15. </form>
18. Javascript looks like this:
19. <script>
21. function saveData() {
22. // use jQuery to send form save data via ajax call
23. ...
24. // it works fine
25. return false
26. }
28. </script>
Intention:
As the names suggest, "Save & Continue" is supposed to save the data and the form stays on while "Save & Exit" is supposed to send the form to be processed (and we leave this page).

Use Scenario and Problem Statement:
If I load the page and enter some data and click on the "Save & Exit", fine, it works as expected.
But if I enter/edit data, click on "Save & Continue" (jQuery ajax call works fine to save data and stay on the page), and but then, after more data entry/editing click on "Save & Exit", it triggers the "Save & Continue" event instead of submitting the form and leave the page.

How can we resolve it?

Thanks.

How to apply datepicker to a dynamically created input field
[2Replies]
- 24-Aug-2017 07:12 PM
- Forum: Using jQuery UI
// jQuery datepicker
(function() {

var d = new Date();
var maxD = new Date(d.setDate(d.getDate()));
$('.datepick').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+10",dateFormat: "MM dd, yy"});
})();

// apply the datepick class to a dynamically create input field
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.name = 'aDate[]';
// cellText.addClass = 'datepick';
$('.gdate').on('click', function() {
$(this).datepicker('destroy').datepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",yearRange: "+10",showOn:'focus'}).focus();
});

cell.appendChild(cellText);

No error, however, the datepicker failed to be applied to the dynamically created input field. What's supposed to be the correct syntax for that?

Thanks.

Finding distance between two elements
[5Replies]
- 08-Aug-2017 11:09 AM
- Forum: Using jQuery UI
Hi,

I'm at my wit's end now, though it's not jQuery issue I venture to post it here for thoughts.
And here's the description.

...
<table id="beforeG1"> ... </table>

<table id="G1">
... tons of elements etc.

<tr> <td id="g11" onclick="findDepth();"></td> </tr>

</table>

function findDepth() {

// find distance between G1 click to add g11 and the element before G1

/* there could be multiple SAME 'G1' id and multiple SAME 'g11' id */

// var node = document.getElementById('g11'), //g11[0],
var node = document.getElementById('g11'),
depth = 0;
while (node.id != 'beforeG1') {
node = node.previousSibling; //previousElementSibling; // node.parentNode;
depth++;
}
console.log ('distance:', depth);

}

And please note, I can find distance between g11 and G1 but for the distance between g11 and beforeG1 it generates the infamous "Cannot read property 'id' of undefined" error.

Thanks.

What could result in the following jquery-3.2.1.min.js error?
[4Replies]
- 29-Jul-2017 02:43 PM
- Forum: Using jQuery UI
jquery-3.2.1.min.js?_=1501353680880:2 Uncaught TypeError: $(...).on is not a function at HTMLDocument.<anonymous> (<anonymous>:3:25) at j (jquery-3.2.1.min.js?_=1501353680880:2) at k (jquery-3.2.1.min.js?_=1501353680880:2)

Switch to jquery-1.8.0.min.js resulted in the same.

What are some of the jQuery UI functions/plugins we can't live without?
[12Replies]
- 28-Jul-2017 06:19 PM
- Forum: Using jQuery UI
DatePicker is one.

Feel free to add your pick below:

drag & drop file upload question
[18Replies]
- 27-Jul-2017 06:07 PM
- Forum: Using jQuery UI
Hi,

The following jQuery drag & drop demo is interesting.
http://smoothprogramming.com/javascript/demo-file-upload-using-drag-drop/

In the meantime, it's only half of a real function, that is, we need to upload the dropped file onto the server as well.

I've looked at some samples on form data passing with with $.post() function, however, I'm stumbled with two issues.
(1) for regular form data, it can be handled like $('#formID').serialize();
but in this case, the form data is a file, which can be a PDF, a Word doc or Excel or image or other types of file.
(2) how to map the the DIV with ID of "dropFiles" to the FORM element of type "file"?
(3) at form post, the state should be the form processing outcome.

// create form and file element
var fm = document.createElement('form');
fm.id = 'myfrm';
fm.enctype = 'multipart/form-data';
fm.method = 'post';
var el = document.createElement('input');
el.type = 'file';
el.name = 'myfile';
// following syntax is incorrect
el.value = document.getElementById('dropFiles').innerHTML;
// send form
$.post('processFileUpload.cfm?data=',$('#myfrm').serialize()); // to upload file to server

Thanks.

jquery-1.8.0.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecate ...
[13Replies]
- 24-Jul-2017 03:46 PM
- Forum: Using jQuery UI
Hi,

I'm using an old copy of jQuery (see subject line) and Chrome ver 59 does not like it (again see the subject line).

But this version with its ui components such as ui.core, ui.widget, ui.position, ui.autocomplete as well as
jquery-ui-1.8.23.custom.css are widely used in my production applications.

Questions:
(1) What's a newer and stable jQuery min that I can download and run off my local system?
(2) Are these any newer and stable counterparts for these four ui components?

Thanks.

How to bind a jQuery class to a dynamically create INPUT element?
[23Replies]
- 11-May-2017 02:45 PM
- Forum: Using jQuery UI
// define a jQuery getdate class for datepicker below
(function() {

var d = new Date();
var maxD = new Date(d.setDate(d.getDate()));
$('.getdate').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+0",maxDate:maxD}); // ,dateFormat: "MM dd, yy"

})();

// goal: add a defined jQuery class to a dynamically created INPUT field
// defined jQuery class = getdate; and it works fine with regular reference

// create a dynamic INPUT element
var cellText = document.createElement('input');
// cellText.type = 'date';
cellText.type = 'text';
cellText.id = 'DateDOT[]';
cellText.name = 'DOT[]';

// cellText.className = 'getdate';
// cellText.setAttribute('class','getdate');

neither of the above binding the 'getdate' class to this new input element
how come?

Thanks.

Why do we lose cursor upon datepicker selection?
[6Replies]
- 22-Apr-2017 12:28 AM
- Forum: Using jQuery UI
Objective:
Upon date selection from datepicker, user would tab to next field and the onblur event would trigger an action to populate selected date in the SPAN with ID of "dated". However, upon date selection, the cursor simply disappears and if I move cursor using mouse to the next field, the SPAN with ID of "dated" is still not populated with datepicker date. What gives?

Thanks in advance.

<table>
<tr>
<td>
<input type="text" name="exeDate" size="30" class="gdate" onblur="document.getElementById('dated').innerHTML=this.value;">
</td>
<td>
<input type="text" name="field2">
</td>
</tr>
</table>

<span id="dated">##/##/####</span>

... jQuery core file and datepicker file references here...

<script>

//
(function() {

var d = new Date();
var maxD = new Date(d.setDate(d.getDate()));
$('.gdate').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+0",maxDate:maxD,dateFormat: "MM dd, yy"});
})();

</script>

How to make datepicker screen disappear upon selection?
[16Replies]
- 13-Apr-2017 01:49 PM
- Forum: Using jQuery UI
Intention:
After a user selects a date via datepicker he/she continue to type something after the date. Thus, it's very desirable to make the datepicker date selection screen disappear upon selection. Doable? The doc is not obvious on this. If so, how?

Thanks.

<input type="text" name="myField" size="115" class="gdateComma">

(function() {

var d = new Date();
var maxD = new Date(d.setDate(d.getDate()));
$('.gdateComma').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+0",maxDate:maxD,dateFormat: "MM dd, yy",onSelect: function(date) {
$(this).val(date + ",");
}});
})();

Can datepicker return just year?
[2Replies]
- 12-Apr-2017 03:19 PM
- Forum: Using jQuery UI
If so, and then I'd like to get a list of the values of the past 5 years. Thanks.

Datepicker altFormat issue
[8Replies]
- 07-Apr-2017 10:52 AM
- Forum: Using jQuery UI
The documentation seems to indicate, altFormat:"MM dd, yy" would return April 07, 2017 for today, but it actually returns "04/07/2017", what's going on? Did I misread its doc?

Thanks.

How to add some static data to Datepicker date?
[7Replies]
- 06-Apr-2017 10:04 PM
- Forum: Using jQuery UI
For a jQuery UI's datepicker field and I'd like to add a static timestamp to a selected date value upon date selection. I've looked at all the attributes for datepicker, however, none seems appropriate for this need.
And I attempted to trigger onblur and onMouseout respectively to call up a function to append the static timestamp, however, it quickly shows up and then disappear. So, what to do this? And I wonder if there's a special event, which essentially kicks off after all other events are done...

Thanks in advance.

Auto-complete with pre-populated data in an input box
[19Replies]
- 06-Apr-2017 04:35 PM
- Forum: Using jQuery UI
Hi,

How do we go about doing jQuery UI autocomplete with an input box with some populated data?
See below

<input type="text" name="myField" value="Some prepopulated data here," class="vest">

Notes:
(1) The "Some prepopulated data here" is retrieved from a database via a query
(2) The autocomplete list is supposed to show up when a user moves cursor into this field

Outcome for the field would be: Some prepopulated data here, An Unmarried Woman
if "An Unmarried Woman" is selected.

$(function() {
var vList = ["An Unmarried Woman","Married Couple"];
$(".vest").autocomplete({
source: vList,
select: function(event, ui) {
this.value = this.value + ui.item.value;
}

});
});

Thanks.

A pure JS question, hope it's ok: How to reset onclick event
[1Reply]
- 30-Oct-2016 04:10 PM
- Forum: Using jQuery
The line 13 in the code below attempts to reset an onclick event first to null and then on line 14, attempts to set it to another action, however, it's ineffective and how to do it? Thanks.

Line 1: var config = function() {
Line 2: // display config / usage info but no dupe display
Line 3: if (!document.getElementById('confinfo')) {
Line 4: var i = document.createElement('info');
Line 5: i.id = "confinfo";
Line 6: i.style = "color:green";
Line 7: i.innerHTML = conf.usage;
Line 8: document.body.insertBefore(i,document.body.firstChild);
Line 9:
Line 10: // hide the config / usage info to free up the real estate
Line 11: var h = document.getElementById('usage').value = "Hide config / usage instructions";
Line 12: console.log('from top section: ' +h);
Line 13: h.onclick = null;
Line 14: h.onclick = function () {
Line 15: console.log('hide clicked');
Line 16: // document.getElementById('confinfo').style.display = "none";
Line 17: document.getElementById('confinfo').innerHTML = '';
Line 18: }
Line 19: }
Line 20: }

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend