Jump to content

Cant add javascript to Wordpress. Pulling out my hair!


turkspartan

Recommended Posts

Hello, I need to add these two codes. I used the plugin CSS & Javascript Toolbox, but it wont work.

<script type="text/javascript" src="http://abautoglass.net/wp-content/customcarquery.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
//Create a variable for the CarQuery object. You can call it whatever you like.
var carquery = new CarQuery();

//Run the carquery init function to get things started:
carquery.init();

//Optionally, you can pre-select a vehicle by passing year / make / model / trim to the init function:
//carquery.init('2000', 'dodge', 'Viper', 11636);

//Optional: Pass sold_in_us:true to the setFilters method to show only US models.
carquery.setFilters( {sold_in_us:true} );

//Optional: initialize the year, make, model, and trim drop downs by providing their element IDs
carquery.initYearMakeModelTrim('car-years', 'car-makes', 'car-models', 'car-model-trims');

//Optional: set the onclick event for a button to show car data.
$('#cq-show-data').click( function(){ carquery.populateCarData('car-model-data'); } );

//Optional: initialize the make, model, trim lists by providing their element IDs.
carquery.initMakeModelTrimList('make-list', 'model-list', 'trim-list', 'trim-data-list');

//Optional: set minimum and/or maximum year options.
carquery.year_select_min=1990;
carquery.year_select_max=1999;

//Optional: initialize search interface elements.
//The IDs provided below are the IDs of the text and select inputs that will be used to set the search criteria.
//All values are optional, and will be set to the default values provided below if not specified.
var searchArgs =
({
body_id: "cq-body"
,default_search_text: "Keyword Search"
,doors_id: "cq-doors"
,drive_id: "cq-drive"
,engine_position_id: "cq-engine-position"
,engine_type_id: "cq-engine-type"
,fuel_type_id: "cq-fuel-type"
,min_cylinders_id: "cq-min-cylinders"
,min_mpg_hwy_id: "cq-min-mpg-hwy"
,min_power_id: "cq-min-power"
,min_top_speed_id: "cq-min-top-speed"
,min_torque_id: "cq-min-torque"
,min_weight_id: "cq-min-weight"
,min_year_id: "cq-min-year"
,max_cylinders_id: "cq-max-cylinders"
,max_mpg_hwy_id: "cq-max-mpg-hwy"
,max_power_id: "cq-max-power"
,max_top_speed_id: "cq-max-top-speed"
,max_weight_id: "cq-max-weight"
,max_year_id: "cq-max-year"
,search_controls_id: "cq-search-controls"
,search_input_id: "cq-search-input"
,search_results_id: "cq-search-results"
,search_result_id: "cq-search-result"
,seats_id: "cq-seats"
,sold_in_us_id: "cq-sold-in-us"
});
carquery.initSearchInterface(searchArgs);

//If creating a search interface, set onclick event for the search button. Make sure the ID used matches your search button ID.
$('#cq-search-btn').click( function(){ carquery.search(); } );
});
</script>


Thanks!

 

Link to comment
Share on other sites

Have you set up a child theme? Because if not, on every theme update, any of this added will be overwritten. You just add file name, type, location, and optional parameters in the wordpress queue function as discribed in link.

 

I got the first shorter code working with CSS & Javascript Toolbox plugin.

 

But I have no idea what to do about the longer one. Could you show me pleeease :) I have no idea how that much long code goes in with the link you provided.

Edited by turkspartan
Link to comment
Share on other sites

IF the link code is supposed to link to long code, you DO NOT INCLUDE the script tags, they are html tags not JavaScript and only used in html page.

 

I suggest you make a simple alert on load jquery/javascript code, and attempt to link to that, to get use in using wp queueing function, then once you get it working you will understand how to properly use it, since you did not answer my first question about child theme, you will need to learn how properly insert these each time your wordpress theme is updated.

Link to comment
Share on other sites

IF the link code is supposed to link to long code, you DO NOT INCLUDE the script tags, they are html tags not JavaScript and only used in html page.

 

I suggest you make a simple alert on load jquery/javascript code, and attempt to link to that, to get use in using wp queueing function, then once you get it working you will understand how to properly use it, since you did not answer my first question about child theme, you will need to learn how properly insert these each time your wordpress theme is updated.

I will figure out the child theme stuff soon.

 

Thanks much for helping, but I am super close to dying from stress like a fish!!! Worked 11 hours yesterday alone on this.

Here is what I did so far.

 

in the functions.php file I inserted:

 

wp_enqueue_script( 'customcarquery', get_template_directory_uri() . '/customcarquery.js', array ( 'jquery' ), 1.1, false);

wp_enqueue_script( 'customcarquerycode', get_template_directory_uri() . '/customcarquerycode.js', array ( 'jquery' ), 1.1, false);

 

in customcarquerycode I took out the scripts and have


$(document).ready(
function()
{
     //Create a variable for the CarQuery object.  You can call it whatever you like.
     var carquery = new CarQuery();

     //Run the carquery init function to get things started:
     carquery.init();
     
     //Optionally, you can pre-select a vehicle by passing year / make / model / trim to the init function:
     //carquery.init('2000', 'dodge', 'Viper', 11636);

     //Optional: Pass sold_in_us:true to the setFilters method to show only US models. 
     carquery.setFilters( {sold_in_us:true} );

     //Optional: initialize the year, make, model, and trim drop downs by providing their element IDs
     carquery.initYearMakeModelTrim('car-years', 'car-makes', 'car-models', 'car-model-trims');

     //Optional: set the onclick event for a button to show car data.
     $('#cq-show-data').click(  function(){ carquery.populateCarData('car-model-data'); } );

     //Optional: initialize the make, model, trim lists by providing their element IDs.
     carquery.initMakeModelTrimList('make-list', 'model-list', 'trim-list', 'trim-data-list');

     //Optional: set minimum and/or maximum year options.
     carquery.year_select_min=1990;
     carquery.year_select_max=1999;
 
     //Optional: initialize search interface elements.
     //The IDs provided below are the IDs of the text and select inputs that will be used to set the search criteria.
     //All values are optional, and will be set to the default values provided below if not specified.
     var searchArgs =
     ({
         body_id:                       "cq-body"
        ,default_search_text:           "Keyword Search"
        ,doors_id:                      "cq-doors"
        ,drive_id:                      "cq-drive"
        ,engine_position_id:            "cq-engine-position"
        ,engine_type_id:                "cq-engine-type"
        ,fuel_type_id:                  "cq-fuel-type"
        ,min_cylinders_id:              "cq-min-cylinders"
        ,min_mpg_hwy_id:                "cq-min-mpg-hwy"
        ,min_power_id:                  "cq-min-power"
        ,min_top_speed_id:              "cq-min-top-speed"
        ,min_torque_id:                 "cq-min-torque"
        ,min_weight_id:                 "cq-min-weight"
        ,min_year_id:                   "cq-min-year"
        ,max_cylinders_id:              "cq-max-cylinders"
        ,max_mpg_hwy_id:                "cq-max-mpg-hwy"
        ,max_power_id:                  "cq-max-power"
        ,max_top_speed_id:              "cq-max-top-speed"
        ,max_weight_id:                 "cq-max-weight"
        ,max_year_id:                   "cq-max-year"
        ,search_controls_id:            "cq-search-controls"
        ,search_input_id:               "cq-search-input"
        ,search_results_id:             "cq-search-results"
        ,search_result_id:              "cq-search-result"
        ,seats_id:                      "cq-seats"
        ,sold_in_us_id:                 "cq-sold-in-us"
     }); 
     carquery.initSearchInterface(searchArgs);

     //If creating a search interface, set onclick event for the search button.  Make sure the ID used matches your search button ID.
     $('#cq-search-btn').click( function(){ carquery.search(); } );
});

The year dropdown in http://abautoglass.net/contact-us/ wont detect any java. its showing empty... BUT I see that the enqueue stuff put the 2 files in the header. WHat am I doing wrong? Is there more to it or something?

Edited by turkspartan
Link to comment
Share on other sites

IF you put your glasses on AND LOOK AT THE SOURCE of the page you will find the plugin you used has already inserted links to the files correctly, you can tell this is correct because if you click the links they will show the files in question. What probably is causing these to fail, is the fact you have the same code repeated inline in the head section, plus the links produced using wp enqueue function, as a quote the highlander films 'there can only be one'.

Link to comment
Share on other sites

IF you put your glasses on AND LOOK AT THE SOURCE of the page you will find the plugin you used has already inserted links to the files correctly, you can tell this is correct because if you click the links they will show the files in question. What probably is causing these to fail, is the fact you have the same code repeated inline in the head section, plus the links produced using wp enqueue function, as a quote the highlander films 'there can only be one'.

God bless you brother. I appreciate your help.

 

Apparently the plugin itself was f'ed up to begin with. I deactivated it, ripped the code apart and imported the code in outside of the plugin. Thanks! I even wrote a guide in the plugins support section, since the maker of the plugin wont fix it :)

Edited by turkspartan
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...