WP-API and HTML tags - html

I'm pulling data from an external site using WP-API and displaying it using AngularJS - http://dev.5874.co.uk/goshooting/search-the-shooting-club-directory/
The data is pulling in fine but it's showing the HTML tags such as how can I stop this? I'm using Advanced custom fields too which may be contributing.
<div ng-controller="northWestCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<img src="{{d.acf.logo}}">
<div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
<div id="listing-address-1">
{{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
</div>
<div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
<div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
<div id="listing-email">Email: {{d.acf.email}}</div>
<div id="listing-website">Website: {{d.acf.website}}</div>
<div id="listing-established">Established: {{d.acf.established}}</div>
<div id="listing-about">About: {{d.acf.about}}</div>
<div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
<div id="listing-directions">Directions: {{d.acf.directions}}</div>
<div id="scd-link">View on The Shooting Club Directory</div>
</div>
</div>
</div>
Here is a working code pen also - http://codepen.io/anon/pen/yePYdq
Any help would be much appreciated, thanks!

If i understand you right you Use this site for getting your data http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast with API
Also your console display an error
[Error] XMLHttpRequest cannot load http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast. Origin http://dev.5874.co.uk is not allowed by Access-Control-Allow-Origin.
Maybe this link will be helpful Origin is not allowed

Related

Sharepoint <div> Embed Code is not working

I am trying to add the <div> based code to my company sharepoint website, but its getting an error saying they accepted only <iframe> based embed code. I converted <div> to <iframe>, its still not working. Seems there is a problem in my convertion. I am using margin calculator from omnicalculator website.
The actual code from website:
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" />
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I am using the below code.
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<iframe src="https://www.omnicalculator.com/finance/margin" target="_blank"><img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" /></frame>
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I contacted the support from omnicalculator but no response from them. Please check my code.

Link to new HTML page in same root folder not working

Forgive the stupid question -- i know i'm doing something retarded, but I'm kinda stuck.
I'm a complete newbie -- and I inherited this website that is build on spring, thymeleaf, hibernate, java and a bunch of other technologies that i'm still learning. The original developer will not take my calls.
All the development is being done on Eclipse -- and I can get the existing project to run and build on my laptop.
I'm trying create a new page and link to it from my main default page (index.htlm).
I can create the href tag to an "existing" html file in the root folder.
But when I reference a new html page in the same directory -- the reference goes to 404.
What am I doing wrong.
Here is the original html snip:
<!-- Contractors -->
<div class="col-md-3 col-md-offset-1 col-sm-10 col-sm-offset-1 box-shadow 10px 10px " style="padding: 50px">
<span class="h1 type--bold">Contractors & Handymen</span><span class="h2">Looking for side hustle?</span>
<p class="lead">Be alerted to in-network jobs.</p>
<div class="row">
<div class="col-sm-12 col-xs-12">
<a th:href="#{/company}" href="company.html"
class="btn btn--sm btn--warning"><span
class="btn__text type--uppercase">Register Here</span></a>
</div>
</div>
</div>
I created a page in the same directory as "company.html" the file name is "signUpContractor.html"
And I updated the html snip as such:
<!-- Contractors -->
<div class="col-md-3 col-md-offset-1 col-sm-10 col-sm-offset-1 box-shadow 10px 10px " style="padding: 50px">
<span class="h1 type--bold">Contractors & Handymen</span><span class="h2">Looking for side hustle?</span>
<p class="lead">Be alerted to in-network jobs.</p>
<div class="row">
<div class="col-sm-12 col-xs-12">
<a th:href="#{/signUpContractor}" href="signUpContractor.html"
class="btn btn--sm btn--warning"><span
class="btn__text type--uppercase">Register Here</span></a>
</div>
</div>
</div>
output looks like this:
enter image description here
but when i click the link get this:
enter image description here
do i need to register the page with thymeleaf? or something?
if i reference other pages in the folder (that was existing prior to me taking over) such as "about.html" or "contactUs.html" the href works just fine. But any new page I create will go to 404.
Thanks for the kind soul that can help me navigate this.
Apologize in advance for the newbie question, i'm just out on the deep-end right now.
:-)

Drupal ckeditor not supports some html tags

I am using Ckeditor in Drupal.
I have tried to add the following code in the block content using ckeditor
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<span class="name">Start Bootstrap</span>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
</header>
But the above code displaying like this
<header></header>
Inside contents are not displaying. I don't know what is happening inside. Did anyone know about this?
This has to do with the cleanup and output settings of both Drupal and CKEditor. The fastest and most effective way to achieve this is by creating a new input format, for example "HTML" via /admin/config/content/formats/add with all cleanup processing disabled. This way, your HTML input = HTML output.
Sidenote: Make sure your profile/the admin profile/role is the only role that is able to use it so only trusted users have access to this text-format.

whitelist phonegap android is not work for next page

I am using
$('#result').load('http://.... #div');
to get the content of external website. I edited the domain whitelist for PhoneGap. It is working, if I set this page as the index page. However, it can't function well when it is set as the next page by submitting a form. Content from external website is not shown. How can I solve it? Thank you
It's better to use a javascript framework for this and still use a single index.html file. Best practice i have come across is to make an application not multiple html files. There are many frameworks to accomplish this the best documented is jquerymobile.
Using JQueryMobile in your javascript file you would check when page1 div loads using jquerymobile then run your .load code.
JQueryMobile has differen't events it looks out for..in this case before page initiates (pageinit) you want to run the load thing to grab content from the other website.
$( "#page1" ).live( "pageinit",function(){
$('#result').load('http://.... #div'); //place your load here..you can even $.post(function(){..}); to a php script to get exactly what you want.
});
Your html file inside the body tag will have this and of course you need to include jquery and jquerymobile js and css files in between your head tags.
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">Page1</li>
<li class="btn_s">Page2</li>
<li class="btn_l">Page3</li>
</ul>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<h1>Page1 Heading</h1>
</div>
<div data-role="content">
<h1>This is Page1</h1>
<div id="#result"></div>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>

HTML code messing following URLs

I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />