Develop Reference

when page loaded, add text into p tag

I am creating a web page now.
here is the key components of the html
<span class='codeId' id='codeId1'>456</span>
<p class='codeDescription' id='description1'></p>
<span class='codeId' id='codeId1'>789</span>
<p class='codeDescription' id='description2'></p>
The codeIds are obtained from database, so when page loaded, they will show up,
however, the codeDescription need to be obtained from webservices request call from third party, basically you send the code to their site and they will send response back.
I want to add responses to codeDescription after the page loaded automatically.
If using a button, I can do a click function for the p tag, but can this be done by itself?
$('#btn').click(function(){
webserviceCall(code, callback(res){
$('p').text(res['description']);
});
})

as #mkaatman mentioned in his comment you can use document.ready...
$( document ).ready(function() {
webserviceCall(code, callback(res){
$('p').text(res['description']);
});
} );

Dynamic Follow Up Page with Marketo Forms

We are using a script that allows us to to change the follow up URLS of a form dynamically so we can use the same form across multiple assets but have different follow up pages.
The issue is that script only works when it loads the form itself rather than bringing it in via the visual editor. If we adjust the code as per the instructions on the developer site to make it work with the visual editor, it stops working.
We need to bring the form in via the editor because we have another script that only works on forms that are loaded in that manner. This script opens the follow up page in the parent window rather than the iframe.
Can you provide any suggestions?
Here's the code for the script:
Dynamic follow up URL:
<script type="text/javascript">// <![CDATA[
MktoForms2.whenReady(function(form){
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl){
//Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl.
location.href = "http://solutions.healthcaresource.com/2346-staff-assessment-thank-you.html";
//return false to prevent the submission handler continuing with its own processing
return false;
});
});// ]]>

Use document.getElementById('iframe_id').src (given an iframe with an id of 'iframe_id'):
location.href = "http://solutions.healthcaresource.com/2346-staff-assessment-thank-you.html";
To this
document.getElementById('iframe_id').src = "http://solutions.healthcaresource.com/2346-staff-assessment-thank-you.html";

You can add Marketo variable to be able to give dynamic followup link.
Add following meta for variable, and use it in script. Code will be like this in your landing page.
<meta class="mktoString" id="ThankyouPage" mktoName="Follow-up Page" default="Add dynamic followup page here" allowHtml="false">
<script>
MktoForms2.whenReady(function (form) {
form.onSuccess(function(values, followUpUrl) {
location.href = ${ThankyouPage};
return false;
});
});
</script>

jQuery Tabs - Don't Load Tab via # (tab content id)

I am running jQuery v2.1.1-beta1 & jquery-ui-1.10.4 with the following JS in my script file:
$(document).ready(function(){
$('.festival-list').tabs({
beforeActivate: function( event, ui ) {
ui.newTab.index();
}
});
};
I would like to solve the 2 issues:
Problem 1:
I have a series of tabs which work fine. I have a tab with an li with an id of Press (#press). If I load the url (http://website-url.com/news/#press). The content (tab block) shows properly.
However when this url is used as an href in a footer a link the page loads but fails to load the tab (#press) correctly. At present I have to click the footer link then the relevant tab to load the block, there is no automation.
Problem 2:
Secondly I would like to hash to the url, hopefully this will help UI during navigation.

The hash in the url only works on the initial load because the $.ready function is only run once (on page load). If you want to make sure the tabs & URL match each other after the page load, you could do something like
$(window).on('hashchange', function processHashChange(e) {
...
});
If you're looking for more of a site-wide solution, especially if you want the UI to do complex behaviors based on the URL hash (e.g. more than hide/show a tab in one part of a page), you might want to look into a proper JavaScript routing library like Crossroads.

Create shareable link after AJAX load

On my page, a content container holds different information depending which list item was clicked (news, video, blog, etc.)
This is achieved by loading in html snippets with jQuery's load method like this:
$('#container').load('blog.html'); // file from my domain
After the load, I can update the URL using this:
window.history.pushState("www.mysite.com", "mysite", "/blog");
Or change hash:
window.location.hash = "blog";
When the link is visited directly, this causes an error because there is no knowledge of such a page on my host. After the AJAX load, I'm wondering what the best way would be to make the current state of the page shareable ( I send the link to someone, and when they visit it, they see the state of the page as it was when I shared the link)? The link would be something like: www.mysite.com/blog.
The AJAX load:
$('li a').on('click', function(){
var file = this.id;
$('#container').load(file +'.html');
// window.history.pushState("www.mysite.com", "mysite", "/" + file); or..
// window.location.hash = file;
return false;
});
P.S. I would like to avoid using php for the sake of simplicity, but am open to all suggestions.

Well, if you use the hash, as you already state in OP, you should have no errors when you visit it directly. ( example: www.mysite.com/#blog )
On load javascript can check if a hash is set, and do the necessary ajax calls again to serve the page from a direct link. (PHP cannot see the hash by the way, so using only the hash, will not be controllable from PHP server side.)
$.ready( function() {
if (window.location.hash == "blog") $(#container).load("blog.html");
});
Using pushState (example: www.mysite.com/blog ) is a different story... That one would need you to create a .htaccess that will rewrite to (for example) the index.php. Index.php could then have javascript-logic that looks at the requested url, to load the desired content again with Ajax. (Or even without ajax, if you do it in PHP)
javascript (after configuring .htaccess to rewrite to the file holding this javascript):
$.ready( function() {
if (window.location.pathname == "/blog") $(#container).load("blog.html");
});
or in php (after configuring .htaccess to rewrite to the file holding this php):
<div id="container">
<?php
if ($_SERVER["REQUEST_URI"] == "/blog") {
include("blog.html");
}
?>
</div>

On page load, check for window.hash. If it is not empty, then do the same thing that you do when an <a> is clicked in your <ul>. But to not to reinvent the wheel, have a look at javascript routers, for example crossroads.js.

a .get() request on page load

I will be redirecting the user to a page. This page gets all of its content from a REST api in JSON format. So on page load I would like to execute the $.get() request and load the contents of my divs in the page.
I know how to execute the get request, however, I don't know how to do it on page load. I have a application.js file for my entire application. So I can't put it in document.ready because that it would load on each page in my application.
I will be executing the get request like this:
$.get(
$(this).data('myurl'),
function (data) {
var item = data.response.item[0];
$('mydiv').html(item.text);
}
);

With jQuery this is very easy, but you have to put this block in your 'start'-page:
$(function() {
// this code will be executed on page load
app.start();
});

From what I understand, you only want to get data from rest api on a specific page..
for that you can do:
$(function(){
if (window.location.href.indexOf('/your/page/url') > -1){
// your $.get here
$.get('/torestapi', function(){ //update divs });
}
});

Add it as an inline script block with a separate document.ready, or just before </body>.
Or add it to a separate js file, and link it only from the specific page where you want to use it.