We Keep Coding

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');

use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout

You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

Jquery .show does not change display property

I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.
JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.
I must be missing something obvious here.
script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.
(function() {
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").show();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").hide();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
I am sure someone has experienced something similar, why doesn't it change to display:block?

Try with :
$('').attr('style','display:block;')

Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa.
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").toggle();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").toggle();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});

even this can also work
/*---for multiple css property-----*/
$('').css({
'display':'block'
});
/*---for single css property-----*/
$('').css('display','block');

So for your first question, to sum up . If you call
$('').show();
You're telling jQuery to select "nothing" and to show this "nothing".
If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):
$('*').show();
A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output
And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.

I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});

You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/

you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})

$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

Pure JS add class not working

I've got a site I'm making and it has this code in the HTML:
<div id="close" onclick="close()"></div>
There's also some JS which has this:
function close() {
document.getElementById("glass1").setAttribute("class", "hidden");
}
But when I click close it doesn't seem to work. You can see the site at http://galaxy-os.koding.com to see what I mean. Please help

Your element id is colliding with the function name close.
I would recommend changing the function name as it sounds way too generic anyway.

Twitter Bootstrap manually close tabs

UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.

Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>