Attach javascript event to content loaded with AJAX - javascript

previously I had page that was loaded in the usual way with a list of addresses taken from the database and displayed on the page with a php script. I had on the page a JavaScript code that obfuscated the telephone numbers with the following code.
<div class="telephoneNumber" data-last="'.$data_last.'" data-first="'.$first_numbers.'">
<span style="cursor:pointer;">'.$data_last.'</span>
</div>
$(document).ready(function(){
$('.telephoneNumber').toggle(function() {
$(this).find('span').text(Joomla.JText._('ADVKONTENT_SHOW_TELEPHONE_NUMBER'));
},function() {
$(this).find('span').text( $(this).data('first') + $(this).data('last') );
}).click();
}
I have change the architecture of the page and we now load the list of addresses using a ajax call and the results injected into the page. The numbers are now not obfuscated.
I have searched for possible solutions but they all seem to involve some user action such as click. Is it possible to rewrite the JavaScript, it does have to be in jquery, so that as the result are loaded into the page we can apply the obfuscate script?

The solution turned out to be remarkably simple. Putting the the code:
$('.telephoneNumber').toggle(function() {
$(this).find('span').text(Joomla.JText._('ADVKONTENT_SHOW_TELEPHONE_NUMBER'));
},function() {
$(this).find('span').text( $(this).data('first') + $(this).data('last') );
}).click();
at the end of the HTML that is returned in the AJAX call means the toggle function is add at the right points and the phone numbers are hidden.

Related

Navigate via AJAX and insert a div executing the contained scripts using JQuery

I would like to implement an AJAX-based navigation which falls back gracefully when JS is not available and want to do it on top of existing pages.
In order to attain this I will ad a 'container' div which:
marks the part of the page which need to be replaced
contains all the scripts that need to be inserted into the page
What I want to do is basically use AJAX to:
replace the content of div#main
execute all the script contained within div#main after replacing the div
do NOT execute other scripts contained in the page download using AJAX
Basically something like this:
<html>
... menu, navigation, borders, social etc...
... come scripts which must NOT be executed when using AJAX page load ...
<div id="main">
... main HTML which needs to be replaced in page ...
<script> ... scripts which need to be executed ... </script>
</div>
... footer, copyright, links etc...
</html>
I know from the manual that the following will NOT work:
$('#main a').click(function() {
$('#main').load( $(this).attr('href')+' #main' );
})
because the CSS selector will cause filtering out all the scripts. So I tried using $.ajax and processing the code below.
$.ajax( $(this).attr('href') ).done( function(data) {
$('#main').replaceWith( $(data).find('#main') ); // .1
$(data).find('#main').filter("script").each(function() {
eval( $(this).text() ); // .2
alert( $(this).text() ); // .2
});
})
which does NOT work either.
.1 will insert the main DIV but will not insert any SCRIPT
.2 will never be executed
to my best understanding $(data) should not filter out scripts but the trial of facts shows this does not work
So far my only solution (or perhaps should we call it workaround?) is to use regex-based parsing of the 'data' string but I don't really like that and would like a more robust and standard based solution.
P.S.: the existing environment is using JQuery 1.7 but I believe we can easily upgrade
P.P.S.: I understand that the above works only for links and not for forms but this is enough for my use case

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.

jquery .load() function only working the first time

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.
I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>
Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();

jQuery doesn't execute on div loaded with ajax

I'm developing a website using PHP,MySQL,AJAX,Javascript,HTML5,css3... What I'm trying to do is load an external html file and have the Javascript that is embedded execute.
The ajax load I'm trying to use is this
<pre><code>
$(document).ready(function(){
$(".meny a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "includes/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(testStatus);
}
})
return false;
});
});
function afficher(data){
$("#main").fadeOut(500,function(){
$("#main").empty();
$("#main").append(data);
$("#main").fadeIn(1000);
})
}
</code></pre>
when the content of the page is loaded directly javascript(or jQuery) functions working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript(or jQuery) not working on this div, while jquery scripts are already stored in the "head" tag .
I think that the problem is the AJAX, since it's working fine when I call directly the page which contains the Javascript.
#kieran
no i never try this trick ! i think i figure out the real problem !
jQuery actually removes any javascript it encounters in an ajax call. They do it on purpose to prevent issues in IE. Here is the actual snippet from jQuery 1.8.3 (lines 7479-7481):
// inject the contents of the document in,removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append( responseText.replace( rscript, "" ) )
In line 7291 is where it defines the rscript regex: rscript = /(?:(?!</script>)<[^<])*</script>/gi,
and you're right i have to add a callback function into the load ajax!
By default the javascript that is contained in the page you are retrieving by AJAX will not be executed, because it is treated like plain text.
You will want to evaluate the text as javascript. There is an inbuilt function in javascript that can achieve this called eval. Here is a good article on using eval with AJAX, thanks to technify.me.
However I must note that using eval is considered a bad practice. There is a well known saying "eval is evil" because it has poor performance, and can have vulnerabilities to XSS. So you may want to look at how to achieve a similar affect without directly using AJAX calls (maybe dynamically built script tags). However for your purposes eval will work if the response is purely javascript. Otherwise you will need to somehow extract the javascript from the HTML your $.get returns.
use
$(".meny a").on( 'click', ...
instead of
$(".meny a").click( ....
the $(".meny a") will be able to click now

JQuery load() will break facebook like button/comment box. How to workaround?

I am coding a big website but I have cut down my problem into the following tiny html file:
http://dl.dropbox.com/u/3224566/test.html
The problem is that if I (re)load with JQuery a content that features a facebook code, the latter won't appear, even if I reload the script (leading to a duplication of that all.js script, which is another issue).
How can I fix this?
Regards,
Quentin
Use the FB.XFBML.parse() docs after you load the new content
function loadPage() {
$('#test').load('test.html #test', function() {
FB.XFBML.parse( );
}).fadeOut('slow').fadeIn('slow');
}
Note, that loading a fragment with id test in a div with id test will create multiple (two) elements with the same id (nested in each other) in the page, which should never happen as it is invalid.
To avoid this use the more verbose $.get method
$.get('test.html',
function(data) {
var temp = $('<div>').html(data).find('#test');
$('#test').html(temp.html());
}
);

Categories