jquery.click(function) wordpress widget

Question

when i use this function in my header, it works fine but when i use it in a widget nothing happens

$("#myID").click(function(){
    var name = $("#name").val();
    var phone = $("#phone").val();
    console.log(name +" "+ phone); 
    if(name.length > 1 && phone.length > 7){
    $.ajax({
        url: 'my_url',
        type: 'post',
        data: {'name': name,
        'number': phone},
        success: function(data){
        $(".header-bg-title").html('thanks');
        $("span.white").hide();
        },
        error: function(response){
            alert('error'); 
        }
    });
    } else {
        $("p#onerror").html('write your name & number');
    }

});

html

<div class="col-xs-12">
<h2>text</h2>
<p id="onerror">My text</p>
<p><input id="name" class="form-control" type="text" placeholder="Name" /></p>
<p><input id="phone" class="form-control" type="text" placeholder="Phone" /></p>
<p><button id="myID" class="btn btn-warning btn-block btn-lg" type="button">Send</button></p>
</div>

anyone who got a suggestion?

Do you see any errors in the console? Can you create a fiddle to demonstrate the problem or do you have a site for us to test? — Jonas Grumann
– Jonas Grumann, Commented Oct 20, 2014 at 13:14
nothing happens is very vague, please contribute what you've looked at before and provide other valuable information so we more easily can build up a better understanding of the issue. — urbz
– urbz, Commented Oct 20, 2014 at 13:16
when i use it in a widget, are you including this widget by Ajax? — dashtinejad
– dashtinejad, Commented Oct 20, 2014 at 13:20
try and attach the event to the body instead? $('body').on('click', '#myID', function() { ... }); — Gavin Hellyer
– Gavin Hellyer, Commented Oct 20, 2014 at 13:20

Gavin Hellyer · Accepted Answer · 2014-10-20 13:28:29Z

1

As far as I am aware .click will attach to the item when it is executed, if the item is not there, in the case of a widget it will not be attached. I could be wrong on that, try this and see if it works.

$('body').on('click', '#myID', function() {
    ...
});

answered Oct 20, 2014 at 13:28

Gavin Hellyer

3281 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Locos Over a year ago

It was a good start, Gavin, now reacts button when I press it, but $('name').val() & $('phone').val() is empty in the log

Gavin Hellyer Over a year ago

Try to avoid using ID's for widgets as they can be duplicated and then lead to script failures, if you use class' or data attributes to identify elements you can then use something like $('[data-input="name"]', this).val(); in the widget... Not sure if that will solve your issue though, would need to see more of the code.

llessa · Accepted Answer · 2014-10-20 13:55:10Z

Try to use jQuery function, not $.

Your code would be this:

jQuery("#myID").click(function(){
    var name = jQuery("#name").val();
    var phone = jQuery("#phone").val();
    console.log(name +" "+ phone); 
    if(name.length > 1 && phone.length > 7){
        jQuery.ajax({
            url: 'my_url',
            type: 'post',
            data: {'name': name,
            'number': phone},
            success: function(data){
                jQuery(".header-bg-title").html('thanks');
                jQuery("span.white").hide();
            },
            error: function(response){
                alert('error'); 
            }
        });
    } else {
        jQuery("p#onerror").html('write your name & number');
    }
});

or you can wrap your code in an IIFE receiving jQuery in your $

(function($) {
// your code here
}(jQuery));

bucur89 · Accepted Answer · 2014-10-21 10:05:30Z

I guess you currently have a function like this

$(document)ready(function(){
  $("#myID").click(function(){
    var name = $("#name").val();
    var phone = $("#phone").val();
    console.log(name +" "+ phone); 
    if(name.length > 1 && phone.length > 7){
    $.ajax({
        url: 'my_url',
        type: 'post',
        data: {'name': name,
        'number': phone},
        success: function(data){
        $(".header-bg-title").html('thanks');
        $("span.white").hide();
        },
        error: function(response){
            alert('error'); 
        }
    });
    } else {
        $("p#onerror").html('write your name & number');
    }
  });
}

If so it should be as easy as changing the $(document)ready(function(){ to jQuery(document).ready(function($) and keeping the rest the same.

jQuery(document).ready(function($) 
{
 $("#myID").click(function(){
        var name = $("#name").val();
        var phone = $("#phone").val();
        console.log(name +" "+ phone); 
        if(name.length > 1 && phone.length > 7){
        $.ajax({
            url: 'my_url',
            type: 'post',
            data: {'name': name,
            'number': phone},
            success: function(data){
            $(".header-bg-title").html('thanks');
            $("span.white").hide();
            },
            error: function(response){
                alert('error'); 
            }
        });
        } else {
            $("p#onerror").html('write your name & number');
        }
      });
}

This solution allows you to keep using $('#idofitem')

Collectives™ on Stack Overflow

jquery.click(function) wordpress widget

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related