I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)
It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
Related
I am using boomerang plugin to check web performance.
Following the code that used to get page load time.
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-base-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/yui/yui-later-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js"></script>
<script src="/js/boomerang.js" type="text/javascript"></script>
<script src="/js/plugins/rt.js" type="text/javascript"></script>
<script src="/js/plugins/bw.js" type="text/javascript"></script>
<script src="/js/plugins/navtiming.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
BW: {
enabled: false,
cookie: 'HOWTO-BA'
},
RT: {
cookie: 'HOWTO-RT'
}
});
YUI().use("io-base", function(Y) {
var uri = "dynamic-content.txt?" + new Date().getTime();
var timer;
function complete(id, o) {
var html = "<p>\n" + o.responseText.replace(/^$/mg, '</p>\n<p>') + "\n</p>";
document.getElementById("dynamic-content").innerHTML = html;
if(timer) timer.loaded();
};
Y.on('io:complete', complete);
timer = BOOMR.requestStart("my-timer");
var request = Y.io(uri);
});
BOOMR.plugins.RT.setTimer("t_js", new Date().getTime() - t_pagestart).
startTimer("t_head");
</script>
script src="/pgr/js/howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_howtojs").endTimer("t_body");
</script>
Here YUI that make separate ajax call and adds execrutiont ime in page load time. In my website there are many ajax calls on page load, those execution time I want to add in page load time.
But stuck how to use YIU with existing code.
My ajax call
jQuery(document).ready(function($) {
$.ajax({
type : 'POST',
url : '/getdata/',
data : { sid:retSid},
dataType: 'JSON',
beforeSend: function(){
$('.blocker').show();
},
success : function(result) {
if(result.data)
{
....
}
});
});
You should use one of the SPA plugins to measure single page apps / AJAX apps. It would be better to ask your question on the boomerang support forum. We prefer keeping all discussion and issues in one place so that if a code change is required, we can reference the discussion via a git reference.
You can ask the question here: https://github.com/soasta/boomerang/issues
only function excute once, then make then whole part of jquery doesn't work.
I tried to search but i didn't find right answer.
CODE:
<script type="text/javascript" src="Plugs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Plugs/jquery.validate.min.js"></script>
<script type="text/javascript" src="Plugs/pop-up.js"></script> <!-- FILE THAT CONTAINS function popup(divNama) { /*instruction*/ } -->
<script type="text/javascript">
$(document).ready(function(){
//document.write('');
$("#feeStructure").validate({
submitHandler: function(form) {
popup('popUpDiv'); // custom fn that fire once and make jquery/ajax stop working
$.post('michangoProc.php', $("#feeStructure").serialize(), function(data) {
$('#msgErr').html(data);
});
}
});
});
</script>
You need to change the order that the JavaScript files are loaded.
If you want a function that exists in a file to run in an inline script it must be loaded before your inline script. Your code should look like the below. See that the Plugs/pop-up.js file import now occurs before your inline script
<script type="text/javascript" src="Plugs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Plugs/jquery.validate.min.js"></script>
<script type="text/javascript" src="Plugs/pop-up.js"></script> <!-- FILE THAT CONTAINS function popup(divNama) { /*instruction*/ } -->
<script type="text/javascript">
// $.noConflict();
$(document).ready(function(){ //$.fn.popup=function(){ } ;
//document.write('');
$("#feeStructure").validate({
submitHandler: function(form) {
popup('popUpDiv');
$.post('michangoProc.php', $("#feeStructure").serialize(), function(data) {
$('#msgErr').html(data);
});
}
});
});
</script>
I'm reading this tutorial and I'm having some problems with the examples... I tried to run the examples in localhost but I'm encountering with some errors and really don't know what could it be. I should be getting the first post of WP, but instead of that I'm getting this error Uncaught ReferenceError: url is not defined. Any sugestions??? Thanks!
<!DOCTYPE HTML>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(url,target_div) {
var URL = url
jQuery.ajax({
url: URL,
dataType: 'json',
success: function(data) {
jQuery(target_div).html(data.post.content);
}
});
}
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
varurl = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
vartarget_div = "#contents";
readSinglePost(url, target_div);
});
</script>
</header>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
It looks like "varurl =" should have a space to be "var url =" and same with "vartarget_div =" should be "var target_div =" instead.
Change a code as var url not varurl and var target_div not 'vartarget_div'. Give space to keyword var and the variable.
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
var url = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
var target_div = "#contents";
readSinglePost(url, target_div);
});
I have published a website on a laptop with IIS 7.5 running IE9. When I have the internet plugged in the website works fine. The weird thing is that it will work fine in firefox weither the machine has internet or not.
Some other information that may be helpful.
Running Windows 7 64Bit. Latest version of firefox. IE9.
Not sure what else you may need. I have tried checking IE permissions but there may be something I have missed so any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#*----------------- JQUERY UI for Accordion Starts here-------------------- *#
<link href="../../Content/themes/Blue/jquery-ui-1.9.1.custom.min.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
#* -----------JQUERY UI for Accordion Ends here--------------------- *# #*----------------- JQUERY UI for Delete Dialog Starts here-------------------- *#
<script src="../../Scripts/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
#* <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>*#
<script src="../../Scripts/external/jquery-ui.js">></script>
#*----------------- JQUERY UI for Delete Dialog Ends here-------------------- *#
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#*
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
*# #* ----------- Scripts added for Devexpress but commented because JQUERY UI not working --------------------- *#
#*
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.4.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
*# #* ----------- Scripts added for Devexpress ends here--------------------- *#
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.GridView },
new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
new Script { ExtensionSuite = ExtensionSuite.Editors },
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Chart },
new Script { ExtensionSuite = ExtensionSuite.Report }
//new Script { ExtensionSuite = ExtensionSuite.Scheduler }
)
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
//new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }
)
#* ---------------------------------JQUERY Scripts for Delete confirmation Starts here --------------------------------*#
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 500;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 250,
resizable: false,
modal: true,
buttons:
{
"Delete": function () {
$.post(deleteLinkObj[0].href, function (data) { //Post to action
//Check data the return from the middle layer, if it is just true, deletion is successful
if (data == '#Boolean.TrueString') {
deleteLinkObj.closest("tr").hide('fast'); //Hide Row
$("#dialog").dialog("close"); //See it used #dialog instead of (this) because the scope (context) has changed in the "Delete" callback
$(this).empty();
$("#StatusMsg").html("Deleted");
location.reload(); //refreshes the page
}
else {
//Show the errror on the dialog content. Data is used to show the error
//expecting the Error handlers in middle layer will return the meaning ful error message
$("#dialog").html(data);
//Hide confirmation button inorder to show the user to only the content of error in the same
//dialog box and allow to cancel this dialog
$(":button:contains('Delete')").css("display", "none");
$("#StatusMsg").html("Not Deleted");
}
//location.reload();
});
},
"Cancel": function () {
//This reset of the Delete button is need since if it wsas invoked and jumped into show error routine,
// then that routine would have removed the Delete button.
$(":button:contains('Delete')").css("display", "inline");
$(this).dialog("close");
$("#StatusMsg").html("");
}
}
});
var deleteLinkObj;
var deletMsg;
$('a.inputFakeDelete').click(function () {
//Here the message is built using the delete button properties id and name.
//So every page calling this jquery need to have the link button embedded with these properties
//eg: id = Grade, name = the name of the grade from the model
deletMsg = "Are you sure you want to delete this " + this.id;
if (this.name == "") {
}
else {
deletMsg = deletMsg + " '" + this.name + "'" //"Are you sure you want to delete the " + (this).id + " '" + (this).name + "'?";
}
deletMsg = deletMsg + "?"
$("#dialog").html(deletMsg)
deleteLinkObj = $(this); //to use in the dialog javascript
$("#dialog").dialog("open");
return false;
});
});
</script>
#*----------------------------------JQUERY Scripts delete confirmation Ends here --------------------------------*#
#*----------------------------------JQUERY Scripts for record cuirrent filer --------------------------------*#
<script type="text/javascript">
var currentValue = 0;
function handleClick(currentfilter) {
//alert('Old value: ' + currentValue);
//alert('New value: ' + currentfilter.value);
currentValue = currentfilter.value;
//Redirect the page so that will reload with new parameters
window.location = 'http://' + window.location.host + currentValue; //Add 'http://' since host will not include this
}
</script>
#*----------------------------------JQUERY Scripts for record cuirrent filer ends here --------------------------------*#
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
The error page just says that it cannot find a specific webpage. Customer/Delete
I am not sure if this is was the fix for my problem (and it is a little hard to test as the machine is not my own) but later on we reconfigured .net by using aspnet_regiis.exe and the problem looks like it has disapeared.
This code is working on other test environment but not on mine.
Do you know why?
I am using Amazon EC2 and Cotendo CDN.
The result I am getting is a blank page.
Thanks in advance!
<html>
<head>
<title>Geo Test</title>
<script type='text/javascript' src='http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script>
$(document).ready( function() {
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){
console.log(data);
var c = data.countryCode;
if(c=="US" || c=="US" ){
document.getElementById('ddd').innerHTML = 'US'; } else {
document.getElementById('ddd').innerHTML = 'Not US';}
/*
this service needs ip
var ip = data.host;
alert(ip);
$.getJSON( "http://freegeoip.net/json/"+ip,
function(data){
console.log(data);
}
);*/
}
);
});?
</script>
</head>
<body>
<div id="ddd"></div>
</body>
</html>
Change this line:
$(document).ready( function() {
to that:
jQuery(document).ready( function($) {
It's necessary, because inside http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1 you've already got a call of jQuery.noConflict(); , so jQuery is not accessible by using the $
...and also remove the ? (see Pointy's comment above)