Search jQuery

jQuery Forum

Screen name:
TheBigK

TheBigK's Profile

10 Posts

20 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Year Only Validation Along with 'till' year set to 'Current' (text)
[1Reply]
- 03-Jul-2016 05:31 AM
- Forum: Using jQuery Plugins
Okay, while the above solution works; I'm required to validate for 'tillYear' set to 'Current' as well. Here's how it's supposed to work:

1. If the user clicks on 'Current/Pursuing' button, I want to set the value of 'Till' field to 'Current' as shown in above screen grab.

2. If the user chooses to enter year, it must be:

a- A 4-digit year
b - Should lie between fromYear - currentYear + 4years.

I was able to achieve 2a and 2b with following rules; but the condition that the field should also accept 'Current' as input makes me go bongs!

Perhaps I need to write a special validation rule that allows for word "current" along with 4-digit year that lies between the given range?
```
"resumeDegreeFromYear[]": {
    range: [currentYear - 60, currentYear],
    minlength: 4,
    maxlength: 4
},
"resumeDegreeTillYear[]": {
    max: currentYear + 4,
    minlength: 4,
    maxlength: 4,
    yearRange: true
}
```
co

Comparing Dates with dateFormat: 'MM, yy'

[12Replies]

01-Jul-2016 08:56 AM
Forum: Using jQuery UI

I'm using this 'Monthpicker' plugin to let users select month/year: https://github.com/zorab47/jquery.ui.monthpicker

The issue I'm facing is that when the dateFormat is set to 'MM, yy' in the 'From' date field, the till field shows a future date: 2182 in my case. Here's my code:

$(".resumeExperienceFromYear").monthpicker({
   defaultDate: '-20y',
          yearRange: 'c-60:c',
   changeYear: true,
          changeMonth: true,
          dateFormat: "MM, yy",
   onSelect: function( selected ) {
      $(".resumeExperienceTillYear").monthpicker( "option", "minDate", selected );
   }
});

$(".resumeExperienceTillYear").monthpicker({
          defaultDate: '-60y',
   changeYear: true,
          changeMonth: true,
   onSelect: function( selected ) {
      $(".resumeExperienceFromYear").monthpicker( "option", "maxDate", selected );
   }
});

Would appreciate if someone can help fix this issue.

Geocomplete / Google Places API : How do I Pick Only The City Name?
[1Reply]
- 28-Jun-2016 08:02 AM
- Forum: Using jQuery Plugins
I've two questions:

Question 1. When using Google Places autocomplete API, how do I show only the city name after user selects one of the suggestions? For example,

When user types: New...., the suggestions shown are -

New Delhi, India
New York, USA etc.

When user selects the first option; I'd like the input field to show only 'New Delhi' and NOT 'New Delhi, India'?

Question 2:

I pretty much accomplished the above using geocomplete api: https://github.com/ubilabs/geocomplete/blob/master/jquery.geocomplete.js

The key here is to use details and detailsAttribute options; where detailsAttribute option tells which field to populate and with what.

Here's how I do it:

My HTML:
```
<input type="text" name="resumeExperienceCity[]" data-comp="" id="<?php echo "resumeExperienceCity_" . $i; ?>" class="gui-input experienceCity" placeholder="City" value="<?php echo $value['resumeExperienceCity']; ?>">
```
My jQuery:
```
$(".experienceCity").geocomplete({
    details: ".experienceDates",
    detailsAttribute: "data-comp"
});
```
Now the problem is, I have repeating fields using cloneya repeater. The problem is; when I have pre-populated data that creates multiple fields with data-comp attribute; geocomplete would try to duplicate value entered one field into all other fields with geo-comp. I don't know how to prevent this. I tried something like "data-comp:first" to limit the plugin from filling all the the other fields; but it doesn't work.

Solution to any of the problems described above would help me fix the problem at hand.

jQuery Validator: Validate Range
[8Replies]
- 26-Jun-2016 08:04 AM
- Forum: Using jQuery Plugins
My form has two fields: fromYear and tillYear. Since both these fields are a part of a group of fields that repeat (or clone) I'm using following rule:
```
"fromYear[]": {
    digits: true,
    range: [1950, currentYear],
    minlength: 4,
    maxlength: 4
},
"tillYear[]": {
    digits: true,
    range: ["fromYear", "fromYear"+10] //How do I write it?
    minlength: 4,
    maxlength: 4

}
```
--
I wish to validate the tillYear range as : range: [fromYear, fromYear+10] and have no clue how to do it. Would really appreciate your help.

Weird Issue with jQuery Datepicker

[1Reply]

14-Jun-2016 04:33 AM
Forum: Using jQuery Plugins

I'm facing a weird issue with the jQuery datepicker. The datepicker works perfectly on my localhost; however when I put my files on the server - the datepicker loses styling when I shrink the browser to simulate mobile width.

Here's my jQuery -

$("#resumeBirthday").datepicker({
    yearRange: "1930:2000",
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd MM yy",
    maxDate: '0'
});

Here's my HTML -

<!-- Birth Date Section -->
<div class="section colm colm4">
    <label class="field prepend-icon">
        <input type="text"  id="resumeBirthday" name="resumeBirthday" class="gui-input" placeholder="Birth Date" value="<?php echo $getPostMeta['resumeBirthday']; ?>">
        <span class="field-icon"><i class="fa fa-calendar"></i></span>
    </label>
</div><!-- end Birth Date section -->

Here's how the datepicker looks when I access it from my mobile on my server.

http://s33.postimg.org/lg3en207j/Screenshot_20160612_102701.png

Note: This works perfectly well when I'm using localhost! I see it as jS related issue over CSS.

Selecting an element in a cloned (repeater) field.
[3Replies]
- 10-Jun-2016 01:12 PM
- Forum: Using jQuery Plugins
I'm using two jQuery plugins: CloneYa - to clone a group of two fields and Numeric Stepper - to add stepper functionality to one of the two fields being cloned.

I'm unable to figure out how to apply the stepper to the element which is cloned. The cloned element is getting a dynamically incrementing ID and I don't know how to make it work with class selection.

Here's jsFiddle to show my issue: https://jsfiddle.net/bwyu6c8v/

1. Without cloning, the stepper works on second field (as expected).

2. Press the green button to clone the group of fields. The stepper does not function on the cloned element.

All the events available with CloneYa are documented here: https://github.com/yapapaya/jquery-cloneya/wiki/Events

My best attempt so far -
2. /* Group Cloning
3. ------------------------------------------------- */
4. $('#clone-group-fields').cloneya({
5. maximum: 5
6. });
8. $('#months').stepper({
9. wheel_step: 1,
10. arrow_step: 0.2
11. }).on('after_clone.cloneya', function(toClone, newClone) {
12. $(newClone).find(".gui-input").stepper({
13. limit: [0, 50],
14. wheel_step: 1,
15. arrow_step: 1
16. });
17. });
What am I doing wrong?

Unable to select element properly
[3Replies]
- 02-Jun-2016 09:23 AM
- Forum: Using jQuery Plugins
I'm not sure if my approach is right; but here's what I wish to do. Please look at the following image -

I have a group of fields that I clone by clicking on the [ + ] button; and cloning works fine. Here's the code -

HTML:
1. <input type="text" name="resumeSkillYears[]" id="<?php echo "resumeSkillYears_" . $i; ?>" class="boo gui-input" placeholder="Years" value="<?php echo $value['skillYears']; ?>" >
JS:
2. $('.clone-skills').cloneya({
3. maximum: 5
4. }).on('after_clone.cloneya', function(toClone, newClone){
5. $(newClone).find(".boo").stepper({
6. UI: false,
7. allowWheel: true,
8. limit: [0, 50],
9. wheel_step: 1,
10. arrow_step: 1,
11. onStep: function(val, up){
12. $(this).val(function(index, val) {
13. if(val <= 1) {
14. return val + " Year";
15. } else {
16. return val + " Years"
17. }
18. });
19. }
20. });
21. });
--

Because the ID of the element is dynamically incrementing, I thought I'd rather append a class "boo" to my element and select it through my JS.

However, above code applies the stepper to the parent being cloned (the top row) against the newly created last row. Apparently I'm doing something wrong with 'find'.

Can someone help? Thanks!

How to select element with ID generated dynamically?
[3Replies]
- 31-May-2016 07:15 AM
- Forum: Using jQuery Plugins
My code has a repeater / cloning field that adds number to the end of ID : -
1. <input type="text" name="event[]" id="event">
That is, when cloned, I'll get the following in the DOM ;
1. <input type="text" name="event[]" id="event1">
2. <input type="text" name="event[]" id="event2">
My jQuery selector works only on the original element with ID="event"
1. ```
$("#event").stepper({ ....
```
I'm looking for the right way to make jQuery select event1, event2 and so on; as soon as they are created in the DOM. Would really appreciate if someone can help. Thanks!

$.ajax refuses to work. Using jQuery Steps Plugin.
[6Replies]
- 28-May-2016 01:09 PM
- Forum: Using jQuery Plugins
I'm using jQuery Steps plugin from jquery-steps.com. I have created a multi-step form and I want to submit it via AJAX. I'm inside WordPress environment and here's my code.
-----
2. onFinished: function (event, currentIndex) {
3. var form = $(this);
4. alert("All Fine Till This Step");
5. form.submit(function(event) {
6. alert("Ajax Entry Successful");
7. event.preventDefault();
8. //$(".myspinner").show();
9. var form = $(this);
10. var io_resume_form_data = form.serialize();
11. console.log();
12. $.ajax({
14. type:'POST',
15. dataType:'json',
16. url:ajaxurl,
17. data:io_resume_form_data,
18. success:function (data, textStatus) {
19. alert("SUCCESS");
20. },
21. error:function (jqXHR, textStatus, errorThrown) {
22. alert("FAIL");
23. },
24. complete: function(){
25. //$(".myspinner").hide();
26. }
28. });
30. });
31. }
----

1. I get alert - "All Fine Till This Step", as expected upon clicking 'Finish' button on the form's last step.

2. Nothing happens I close above alert. It looks like AJAX ain't letting me in; and I've no clue why. My best guess is that I've messed up with the form.submit().

Would really appreciate if you could offer a helping hand. I've already spent almost a day trying to fix it all by myself. Thanks!

Spinner Doesn't Work While AJAX Does Its Job
[12Replies]
- 20-May-2016 09:02 PM
- Forum: Using jQuery
I'm trying to get a spinner to show up while my form does submitting data. So far, my AJAX works absolutely fine and does its job; but the spinner just won't show up! Here's my JavaScript (properly queued inside WordPress) -
--
2. jQuery(document).ready(function($){
3. //'use strict';
4. $("form").submit(function() {
5. event.preventDefault();
6. $(".myspinner").css('display', 'inline-block');
7. var wpajaxurl = document.location.protocol + '//' + document.location.host + '/wp-admin/admin-ajax.php';
8. var form = $(this);
9. var io_form_data = form.serialize();
10. alert("Did The Spinner Load?");
11. $.ajax({
12. type:'POST',
13. dataType:'json',
14. url:wpajaxurl,
15. data:io_form_data,
16. async:false,
17. success:function (data, textStatus) {
18. console.log('SUCCESS', data);
19. alert("SUCCESS");
20. },
21. error:function (jqXHR, textStatus, errorThrown) {
22. alert("FAIL");
23. }
24. });
25. });
27. });
--
Observations:
1. The spinner does show up when I use it inside AJAX, using 'beforeSend' -
--
$.ajax({
type:'POST',
dataType:'json',
url:wpajaxurl,
data:io_form_data,
async:false,
beforeSend: function() {
$(".myspinner").css('display', 'inline-block');
},
success:function (data, textStatus) {
console.log('SUCCESS', data);
alert("SUCCESS");
},
error:function (jqXHR, textStatus, errorThrown) {
alert("FAIL");
}
});

--

2. However, it won't show up if I put the selector before the ajax call.

My aim is to show the spinner as soon as the user clicks on the button and then goes off once AJAX is done. So far, the script works well and shows me 'SUCCESS' message as intended; but without the spinner.

I'd really appreciate if you could tell me what exactly is going wrong; and what is the proper way to debug such problems? Thank you for reading.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend