[英]Display a Wordpress shortcode with line breaks with jQuery or pure Javascript
I am trying display a wordpress shortcode with jQuery html() function. 我正在尝试使用jQuery html()函数显示wordpress简码。
When I put the shorcode, it shows a Google map. 当我输入shorcode时,它会显示一个Google地图。 The shortcode is [locations_map scope="2015-09-01,2015-09-30"]
简码为[locations_map scope="2015-09-01,2015-09-30"]
It displays the folowing html: 它显示以下html:
<div class="em-location-map-container" style='position:relative; background: #CDCDCD; width: 100%; height: 500px;'>
<div class='em-locations-map' id='em-locations-map-8ec52' style="width:100%; height:100%"><em>Loading Map....</em></div>
<div class='em-locations-map-coords' id='em-locations-map-coords-8ec52' style="display:none; visibility:hidden;">{"width":"100%","height":"500px","em_ajax":true,"query":"GlobalMapData","random_id":"8ec52"}</div>
</div>
It display html code with line breaks 它显示带有换行符的html代码
When I try to display the map with: 当我尝试通过以下方式显示地图时:
jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]');
});
It shows the html code, but it has linebreaks then I get an error such as SyntaxError: missing ) after argument list due to linebreaks. 它显示了html代码,但是有换行符,然后由于换行符而在参数列表后出现了诸如SyntaxError:missing)之类的错误。 How can I show the html of the shortcode in a single line? 如何在一行中显示简码的html?
EDIT: This is the complete code that I put in the widget 编辑:这是我放入小部件中的完整代码
<script type='text/javascript' src='http://mysite/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script>
jQuery(document).on('change', '#monthMap', function () {
jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]'.replace(/[\r/\n]+/g, ""));
});
</script>
<div class="form-group">
<label for="monthMap" class="col-sm-3 control-label">Select</label>
<div class="col-sm-6 col-md-6">
<select class="custom-select" id="monthMap">
<option value="m0">- All -</option>
<option value="m1">January</option>
<option value="m2">February</option>
<option value="m3">March</option>
<option value="m4">April</option>
<option value="m5">May</option>
<option value="m6">Jun</option>
<option value="m7">July</option>
<option value="m8">August</option>
<option value="m9">September</option>
<option value="m10">October</option>
<option value="m11">November</option>
<option value="m12">December</option>
</select>
</div>
</div>
<div id="sakya-map">
[locations_map width="100%" height="500px"]
</div>
Try with: 尝试:
jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]'.replace(/[\r/\n]+/g, ""));
});
It will replace your line breaks by empty string. 它将用空字符串替换换行符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.