0

While running my jquery script in wordpress I ran across this weird error. That does not allow me to use characters '<' or '>' in my script, any surrounding text just disappears during runtime.

For example

This:

trims = jQuery('#trims').append('<option>');

Becomes this (after rendering):

trims = jQuery('#trims').append('');

Any help would be appreciated as I am simply unable to create new elements using my script.

EDIT:

The script is

jQuery(document).ready(function($){
jQuery("#submit-btn").on('click',function(){
    function readBody(xhr) {
        var data;
        if (!xhr.responseType || xhr.responseType === "text") {
            data = xhr.responseText;
        } else if (xhr.responseType === "document") {
            data = xhr.responseXML;
        } else {
            data = xhr.response;
        }
        return data;
    }
    var uservin = $('#input-vin').val();
    var vehicles = [];
    var trims = jQuery('#trims');
    var i = 0;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            xml = jQuery(jQuery.parseXML(readBody(xhr)) );
            jQuery(readBody(xhr)).find('Vehicle').each(function(){
                var vehicle = jQuery(this);
                vehicles.push(vehicle.attr("Trim_Level"));
                trims = jQuery('#trims').append('');

            });
            console.log(vehicles);
        }
    }
    xhr.open('GET', 'https://ws.vinquery.com/restxml.aspx?accesscode=b02289a0-479a-41d0-aebe-xxxxx&vin='+uservin+'&reporttype=1', true);
    xhr.send(null);
});
});
</script>

The HTML body is:

[vc_row][vc_column width="1/2"][vc_wp_text]
<input class="form-control" id="input-vin" type="input"
placeholder="Enter VIN"/>
[/vc_wp_text][/vc_column]
[vc_column width="1/2"][vc_wp_text]
<input type="submit" id="submit-btn" class="form-control"/>[/vc_wp_text]
[/vc_column][/vc_row]
[vc_row][vc_column][vc_wp_text]
<select name="Trim_level" id="trims"></select>
[/vc_wp_text][/vc_column][/vc_row]

Another update:

When trying to implement the following for loop:

for(i=0;i<vehicles.length;i++){}

It gets rendered as:

for(i=0;i
</script>

The rest of my script disappears from where the '<' appears.

  • What is #trims element? – Ankit Agarwal Jul 20 '18 at 11:28
  • 1
    share your whole code with html and whole javascript. – dipmala Jul 20 '18 at 11:29
  • Where did you put your javascript? Does it come over a shortcode into the page? – helle Jul 20 '18 at 11:32
  • 1
    Have you tried escaping it? trims = jQuery('#trims').append('\<option\>'); should work as well AFAIK. – Ahmed Bajra Jul 20 '18 at 11:34
  • 1
    @ribhu97 if you use not-common things in wordpress it is not clear what happend around with those plugins. they can have immense impact on the behavior of the cms. so as I understand that, your js is parsed through something befor it comes to the html - because it is created by a shortcode (the things with the [ ] breakets, which don't look like html tags ;) ) Try to use 1. doublequotes ", and 2. try to escape the <,> breakets with a backslash ... and check the answert of Fatih who suggests to use that thing right, I think he knows your plugin as well. – helle Jul 20 '18 at 12:12
2

cannot append option alone

you must use below

trims = jQuery('#trims').append('<select><option></option>......</select>');

2 3 days ago I did not meet this problem. Solve this way

| improve this answer | |
  • 1
    #trims is a select element. – Turnip Jul 20 '18 at 11:37
  • That did not work – ribhu97 Jul 20 '18 at 12:31
  • pick element into div container. #trims must be div element – Fatih Topcu Jul 20 '18 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy