We Keep Coding

Rerun Jquery function onclick

I have a simple jquery script that changes the url path of the images. The only problem is the doesn't apply after I click the load more button. So I'm trying to do a workaround where it calls the script again after clicking the button.
<script type='text/javascript'>
$(document).ready(function ReplaceImage() {
$(".galleryItem img").each(function() {
$(this).attr("src", function(a, b) {
return b.replace("s72-c", "s300")
})
})
});
</script>
HTML
Load More

While Keith's answer will get you what you are looking for, I really can't recommend that approach. You are much better off with something like this.
<script type="text/javascript">
$(function() {
var replaceImage = function() {
$('.galleryItem img').each(function() {
$(this).attr('src', function(index, value) {
return value.replace('s72-c', 's300');
});
});
};
replaceImage();
$('.js-replace-image').on('click', replaceImage);
});
</script>
Using this html
<button class="js-replace-image">Load More</button>
By taking this approach, you do not expose any global variables onto the window object, which can be a point of issue if you work with other libraries (or developers) that don't manage their globals well.
Also, by moving to a class name and binding an event handler to the DOM node via JavaScript, you future proof yourself much more. Also allows yourself to easily add this functionality to more buttons very easily but just adding a class to it.
I updated the anchor tag to a button because of the semantics of what you need to do - it doesn't link out anywhere, it's just dynamic functionality on the page. This is what buttons are best served for.
I'd also recommend putting this in the footer of your site, because then, depending on your situation, you will already have the images updated properly without having to click the button. The only need for the button would be if you are dynamically inserting more images on the page after load, or if this script was in the head of your document (meaning jQuery couldn't know about the images yet).
I hope this helps, reach out if you have questions.

Link + on(pagecontainershow) fail

I have a simple app done with jQuery Mobile, in some point I have this:
Start!
which loads a new HTML with a lot of jquery mobile pages:
<div data-role="page">
I have defined, in my external JS file, an global variable:
var startTimeQuestion;
And this method, which is inside my HTML (test_es.html):
<script>
$(document).on('pagecontainershow', function() {
console.log("Storing time..");
startTimeQuestion = new Date().getTime();
});
</script>
The problem is that when I click on the button it loads correctly the file but it seems like it don't load the JS or the function or I don't know, because when I'm going to use my startTimeQuestion variable it says UNDEFINED and it don't show in the console the 'Storing time..'. If a reload the page, it works fine.
I have tried to do an '$.(document).ready()' function for the first time I load the page but still not working. It looks like test_es.html it isn't loading my custom.css and my test.js file until I reload completely the page. So I supposed that the error is in how I call my test_es.html, it isn't this:
Start!
the correct way to do it?
Thanks.

Thanks to the comment before I found the solution, it was as simple as put the 'data-ajax' attribute to false this way:
Start!

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.

Is it possible to override javascript in an iFrame from the parent? If so how?

I'm using the Telerik RadSpell control in one of our touchscreen applications. I've managed to style it just right however the darn thing uses window.alert and window.confirm for prompting the user if they want to keep changes etc.
I want to disable these alerts without having to pull apart and modify the telerik controls.
The issue is that the spellcheck dialog uses an iframe and I can't seem to override the window.confirm function inside the iframe.
Sample Code to test overriding confirm.
<!-- mainpage.htm -->
<html>
<head>
<script type="text/javascript">
window.confirm = function(msg){ alert(msg); }
confirm("Main Page Confirm");
</script>
</head>
<body>
<iframe src="./iframepage.htm" >
</iframe>
</body>
</html>
<!-- iframepage.htm -->
<html>
<head>
<script type="text/javascript">
confirm("iframe confirm");
</script>
</head>
<body>
Some content.
</body>
</html>
Results in
Is it possible to override the javascript in an iframe from the parent? If so how?

I just shared an easier solution in the first forum, which demonstrates how to override the cancelHandler and hide the confirm dialog.
For your convenience I am pasting the solution below:
I would propose an easier way to disable the popup and it is to override the cancelHandler function. To do that follow the steps below:
1) Create a JS file named dialog.js in the root of the web application and populate it with the following function:
Telerik.Web.UI.Spell.SpellDialog.prototype.cancelHandler = function (e) {
if (this._cancel.disabled) {
return $telerik.cancelRawEvent(e);
}
//changes will be applied only if spell handler response is received, text has changed
//and the user confirms
this.closeDialog(this._spellProcessor && this._spellProcessor.textChanged() && true);
return $telerik.cancelRawEvent(e);
}
2) Save the file and set the DialogsScriptFile property of RadSpell to point to this file, e.g.
3) Test the solution.
I hope this helps.

You can get a reference to the innerwindow using javascript IFF the frame is from the same exact domain as the parent.
//Get iframe element by getElementById, frames[0], or whatever way you want
var myFrame = document.getElementById("myFrame");
//Get the window of that frame, overwrite the confirm
myFrame.contentWindow.confirm = function(msg){ alert("I overwrote it! : " + msg); }

You should be able to:
document.getElementById('iframe').contentWindow.confirm = [this is confirm in the iframe];
Perhaps something like this might work nicely for you:
document.getElementById('iframe').contentWindow.confirm = window.confirm;
This would link the confirm of the iframe to the confirm of the parent, which is nice if you already have some handling for confirms in the parent.
Note that you also will want to add some handling for possible undefined objects.
var iframe = document.getElementById('iframe');
//iframe exists
if(iframe){
var iframe_window = document.getElementById('iframe').contentWindow;
//window exists (won't if frame hasn't loaded)
if(iframe_window){
iframe_window.confirm = window.confirm;
}
}

You can take a look at the following resources, which could be helpful for your scenario:
http://www.telerik.com/community/forums/aspnet-ajax/spell/how-do-i-turn-off-the-confirm-dialog.aspx
and
http://www.telerik.com/help/aspnet-ajax/spell-client-check-finished.html
They show how to remove the RadSpell confirm and alert popups.
Best regards,
Rumen

JavaScript object, call on page

I have one javascript file that houses all the functions for my website, stored it a large object, like this:
var Example = {
init : function(){
alert('init');
},
page_one : function(){
alert('this is page 1');
},
page_two : function(){
alert('this is page 2');
}
}
Now I like to open a simple script tag on the different pages, and on page1 do Example.page_one(); and on page2 do Example.page_two();
But this doesn't work. When I call those in the same file as where die Example object is made, then it works, but not if I include that file in a page, and call it from there.
The Example object does show up in the window object
Can someone help me?

Well, I fixed it myself. Stupid fault.
My code was like this:
<script defer src="js/scripts.js"></script>
<script>
AdminDashboard.notificationMessages();
AdminDashboard.setupMenu();
AdminDashboard.setupFileInput('#new_slideshow_image');
AdminDashboard.setupSlideCrop();
</script>
And the problem seemed to be with defer. The object did load, but after the script fired that called to it.
Thanks for the help!

If you will create example object in your page where you have included it, it will override example object. Try to use direct functions rather than this approach.