Trying to add placeholder attribute to search field for plugin in wordpress using jQuery

Question

I am trying to build a site with an equid store and I just want the equid search widget to have "Search" as a placeholder. Im not new to wordpress, I have my custom.js properly enqueued in my child theme's function.php and my other scripts n snips are working fine.

It feels like this should be really simple. . . This is the html I want to affect:

<input type="search" class="ecwid-SearchPanel-field" maxlength="100" kl_vkbd_parsed="true">

The jQuery I am using is standard:

$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');

But it's not getting through. One thing I have noticed is that Chrome's inspector shows this input like regular html but the actual page source is showing a script instead. . .

I have a custom2.js which is code I got from the ecwid forums and it KINDA works. . . sorta. . . It's from 2010 and is straight JavaScript. Right now I have it completely commented out to avoid conflicting with what I am trying to do in jQuery

The site is http://katherinesheetz.com/ the Ecwid search widget is in the sidebar under the custom menu.

Any help with this would be greatly appreciated. Thanks in advance!

Edited to add details:

I'm sharing this because custom2.js actually affects the input element even though it loads at the same time as custom.js which uses jQuery and for some reason does nothing. . .

custom2.js:

function inputPlaceholder (input, placeholder, color) {
  if (!input) return null;
  var placeholder_color = color || '#AAA';
  var default_color = input.style.color;
  if (input.value === '' || input.value == placeholder) {
    input.value = placeholder;
    input.style.color = placeholder_color;
  }
  var add_event = /*@cc_on'attachEvent'||@*/ 'addEventListener';
  input[add_event](/*@cc_on'on'+@*/'focus', function(){
    input.style.color = default_color;
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);
  input[add_event](/*@cc_on'on'+@*/'blur', function(){
    if (input.value === '') {
      input.value = placeholder;
      input.style.color = placeholder_color;
    } else {
      input.style.color = default_color;
    }
  }, false);
  input.form && input.form[add_event](/*@cc_on'on'+@*/'submit', function(){
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);

  return input;
}
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
function ecwid_set_placeholder() {
    var search_box = getElementsByClassName('ecwid-SearchPanel-field')[0];
    if (search_box) {
        inputPlaceholder(search_box,'Search');      
        clearInterval(ecwid_set_placeholder_interval);
    }
}
var ecwid_set_placeholder_interval;
ecwid_set_placeholder_interval = setInterval('ecwid_set_placeholder();',100);

custom.js is basically just this:

(function($){
     $(document).ready(function() {
          //some other scripts for adding style to sidebar and then the relevant part. . .
          $$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
     });
})( jQuery );

Answer 1

Ok, It seems like it was (KIND OF) a loading order issue after all. I switched the enqueue order in my child themes functions.php and put the straight javascript first and the jQuery second like so:

<?php
function straight_scripts_enqueue_here() {
    wp_enqueue_script( 'custom2', get_stylesheet_directory_uri() . '/js/custom2.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'straight_scripts_enqueue_here' );

function jQuery_enqueue_here() {
    wp_enqueue_script(
        'custom',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'jQuery_enqueue_here' );

I hope this helps someone who is building a wordpress site with the ecwid plugin and trying to fix the search widget. . .

This is still kind of reinventing the wheel because it's still not using the placeholder attribute. but at least the default value solution from custom2.js is working smoothly now. I'm still not sure why .attr('placeholder', 'Search') doesn't work, but the site is functioning properly from a user experience standpoint, so I guess I'll let this slide and hope to understand it better after a semester of JavaScript at the local College. . .

Answer 2

Ecwid is an AJAX application and it is loaded after the site's "host" page loads. Thus, the search bar or any other widget may simply absent by the moment your custom script executes. To catch the right moment, you need to use Ecwid Javascript API -- it will allow you to handle store page loading events and run your custom scripts at the right moment.

In particular, I'd recommend using "Ecwid.OnPageLoaded" event handler in your script. More details: http://help.ecwid.com/customer/portal/articles/1169548#Ecwid.OnPageLoad

An example code:

Ecwid.OnPageLoaded.add(function (page) {
    jQuery('.ecwid-SearchPanel-field').attr('placeholder', 'Search products');
});

See in in action: http://jsfiddle.net/makfruit/xuv2x15k/

Answer 3

Since it's a widget, that search input gets loaded dynamically. I'm guessing it's a loading order issue, you're trying to select the input before it's loaded, so, either try selecting the search input with :

$(document).ready(function(){
    $(document).find('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
});

or if that doesn't go through, somehow you'll need to call your custom.js after the widget script is done. I'm not really sure if you can do this by modifying functions.php , every widget has its own tricks.

I tried adding that attribute directly from the console and it works, so it's gotta be the timing when you're calling your function.