Menu icon Foundation

Coder

Currently taking up Bachelor of Science in Information Technology

My Posts





My Comments

Krishia Valencia commented on Krishia Valencia's post over 5 years

Hi!

sorry, I'm not familiar on how jsfiddle works I tried using it but got lost along the way...

anyway, I experimented on a lot of different things and found what's wrong with my code

Here is where I found the error I've been searching for:

The page reloads when I have this data-equalto, since it is comparing to a non-existent input field. I just noticed it.

My previous jquery code does not also work.
HTML
<div class="large-6 columns password-confirmation-field">
<label>Confirm Password <small>required</small>
<input class="password" type="password" required data-equalto="password">
</label>
<small class="error">The password did not match</small>
</div>

  <form id="my_form" method="post" action="../process/process_member_add.php?v=member" data-abide="ajax">  
<div class="row">
  <div class="large-6 columns password-field">
    <label>Password <small>required</small>
      <input class="password" type="password" id="txtPass" required>
    </label>
    <small class="error">Your password must match the requirements</small>
  </div>
  <div class="large-6 columns password-confirmation-field">
    <label>Confirm Password <small>required</small>
      <input class="password" type="password" required data-equalto="password">
    </label>
    <small class="error">The password did not match</small>
  </div>
</form>

I tried using the submit function from the documentation:

 $('form')
  .on('invalid', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid', function (g) {

    g.preventDefault();
    var form =$(this);
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
            success: function (data) {
              var result=trim(data);
                alert(result);
            }
    });  
  });

function trim(str){
  var str=str.replace(/^\s+|\s+$/,'');
  return str;
}

Anyway, it works now and it turns out I've been stressing out just because of 1 measly mistake of naming..

i did not know that the data-equalto="txtPass" refers to the id of the input field you are comparing it to.

It was a mistake on my part.

Krishia Valencia commented on Yasir's post over 5 years

well he's using foundation.min.js even if foundation.orbit.js is not there it will still function.. here are common mistake I encounter:

1) your .js source path for <script src="js/vendor/jquery.js"></script> and
<script src="js/foundation.min.js"></script> may not be the correct path, check your folders first.
2) This <script src="../js/vendor/modernizr.js"></script> should be present inside your header tags.

I checked your code and it works perfectly fine. So I just thought these are the things that might be your problem. Just tell me if this doesn't solve it.

Krishia Valencia commented on Krishia Valencia's post over 5 years

Yes, actually I tried doing the same just a couple of minutes ago, mine is a little different though..

 function create_modal(modal_size, header, lead, txt){
        $('#myModal').addClass(modal_size);
  $('#myModal').html('<h2>'+header+'</h2><p>'+txt+'</p><a class="close-reveal-modal small">&#215;     </a>');
}

So I have to reload foundation huh, :D well I guess your method is much better if I had to reload it I'd rather just choose to hard code it and change the contents by jquery :) thanks so much

Krishia Valencia commented on Krishia Valencia's post over 5 years

Than you everyone for replying.
@Alexander I'll try doing the example you gave me

Krishia Valencia commented on Krishia Valencia's post over 5 years

Hi,

I've been reading the documentation about Foundation 5 and still can't find the part where I can use orbit vertically. If what you're saying refers to the animation. Only slide and fade is available for the orbit-slider...

Krishia Valencia commented on Krishia Valencia's post over 5 years

Sorry for being vague.

What I mean is something like this one on the link.

http://static.freepik.com/free-photo/pretty-psd-thumbnail-carousel-slider_54-11309.jpg

see how the slider is displaying 3 images?

or something like this:
http://jqueryfordesigners.com/demo/infinite-carousel-loop.html

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Krishia Valencia's post over 5 years

Hi!

sorry, I'm not familiar on how jsfiddle works I tried using it but got lost along the way...

anyway, I experimented on a lot of different things and found what's wrong with my code

Here is where I found the error I've been searching for:

The page reloads when I have this data-equalto, since it is comparing to a non-existent input field. I just noticed it.

My previous jquery code does not also work.
HTML
<div class="large-6 columns password-confirmation-field">
<label>Confirm Password <small>required</small>
<input class="password" type="password" required data-equalto="password">
</label>
<small class="error">The password did not match</small>
</div>

  <form id="my_form" method="post" action="../process/process_member_add.php?v=member" data-abide="ajax">  
<div class="row">
  <div class="large-6 columns password-field">
    <label>Password <small>required</small>
      <input class="password" type="password" id="txtPass" required>
    </label>
    <small class="error">Your password must match the requirements</small>
  </div>
  <div class="large-6 columns password-confirmation-field">
    <label>Confirm Password <small>required</small>
      <input class="password" type="password" required data-equalto="password">
    </label>
    <small class="error">The password did not match</small>
  </div>
</form>

I tried using the submit function from the documentation:

 $('form')
  .on('invalid', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid', function (g) {

    g.preventDefault();
    var form =$(this);
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
            success: function (data) {
              var result=trim(data);
                alert(result);
            }
    });  
  });

function trim(str){
  var str=str.replace(/^\s+|\s+$/,'');
  return str;
}

Anyway, it works now and it turns out I've been stressing out just because of 1 measly mistake of naming..

i did not know that the data-equalto="txtPass" refers to the id of the input field you are comparing it to.

It was a mistake on my part.

You commented on Yasir's post over 5 years

well he's using foundation.min.js even if foundation.orbit.js is not there it will still function.. here are common mistake I encounter:

1) your .js source path for <script src="js/vendor/jquery.js"></script> and
<script src="js/foundation.min.js"></script> may not be the correct path, check your folders first.
2) This <script src="../js/vendor/modernizr.js"></script> should be present inside your header tags.

I checked your code and it works perfectly fine. So I just thought these are the things that might be your problem. Just tell me if this doesn't solve it.

You commented on Krishia Valencia's post over 5 years

Yes, actually I tried doing the same just a couple of minutes ago, mine is a little different though..

 function create_modal(modal_size, header, lead, txt){
        $('#myModal').addClass(modal_size);
  $('#myModal').html('<h2>'+header+'</h2><p>'+txt+'</p><a class="close-reveal-modal small">&#215;     </a>');
}

So I have to reload foundation huh, :D well I guess your method is much better if I had to reload it I'd rather just choose to hard code it and change the contents by jquery :) thanks so much

You commented on Krishia Valencia's post over 5 years

Than you everyone for replying.
@Alexander I'll try doing the example you gave me

You commented on Krishia Valencia's post over 5 years

Hi,

I've been reading the documentation about Foundation 5 and still can't find the part where I can use orbit vertically. If what you're saying refers to the animation. Only slide and fade is available for the orbit-slider...

You commented on Krishia Valencia's post over 5 years

Sorry for being vague.

What I mean is something like this one on the link.

http://static.freepik.com/free-photo/pretty-psd-thumbnail-carousel-slider_54-11309.jpg

see how the slider is displaying 3 images?

or something like this:
http://jqueryfordesigners.com/demo/infinite-carousel-loop.html

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content