Why doesn't this work?
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").html($("body").html().replace(/®/g, '<sup>®</sup>').replace(/®/g, '<sup>®</sup>').replace("\u00AE" , '<sup>®</sup>'));
};
);
</script>
Firebug in Firefox gives this in the console:
"SyntaxError: missing ) after argument list"
But, this breaks the Wordpress entirely...
<script type="text/javascript">
$(document).ready(function() {
$("body").html($("body").html().replace(/®/g, '<sup>®</sup>').replace(/®/g, '<sup>®</sup>').replace("\u00AE" , '<sup>®</sup>'));
}
);
</script>
The basic of this function is to find every single registration mark in the body, and replace it with "®"
If this function is capable in PHP as well, that's preferable.
It seemed like the best thing to do was to go into the database and just run a sql query to replace all registration marks and wrap it in "" tags.
However, this did work on individual elements. (Like adeneo said, it's not a good idea to replace the entire site HTML... which broke the site for me)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("h1").html(
$("h1").html()
.replace("®", "<sup>®</sup>")
.replace(/®/g, '<sup>®</sup>')
.replace(/®/g, '<sup>®</sup>')
.replace("\u00AE" , '<sup>®</sup>')
);
});
</script>
Related
I'm learning php/javascript so don't smile...
I try from page1.php to post 3 variables to page2.php.
I'm not sure what's wrong...
Here is the code (simplified mode):
page1.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = post_text;
function post_text() {
test1="111";
test2="222";
test3="333";
$.post("page2.php", { test1:test1 , test2:test2, test3=test3 });
}
</script>
</body>
</html>
page2.php
<?php
$a=$_POST['test1'];
$b=$_POST['test2'];
$c=$_POST['test3'];
echo $a.$b.$c;
?>
$.post("page2.php", { test1:test1 , test2:test2, test3:test3 });
Since you are learning, you might try to isolate problems by writing shorter chunks of code and seeing if they work first. In this case your first problem is an ordinary typo (test3=test3, instead of test3: test3) so your whole JS does not parse. You should be seeing the relevant error message in the firebug console (or chrome console).
I am using a function in conjunction with FusionCharts. I am using a function that gets rid of the charts if no data can be found for it. The function is from FusionCharts.
It runs fine with Firefox and Chrome but screws the whole Drupal page in IE. Can you look at the code and see if I improperly wrote it. Thanks.
<script type='text/javascript'><!--
FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
['NoDataToDisplay', 'DataXMLInvalid'],
function() {
FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose();
}
);
</script>
Remove the <!--. You should not be using these comment tags anymore. https://stackoverflow.com/a/808850/897559
As others have mentioned, the primary issue is that you're missing the end to your comment, but the more modern way to prevent JavaScript from interfering with your HTML markup is to use a CDATA block:
<script type='text/javascript'>
//<![CDATA[
FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
['NoDataToDisplay', 'DataXMLInvalid'],
function() {
FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose();
}
);
//]]>
</script>
Though that's not really necessary in this case either because you're not using any < or & symbols in your code.
I see a missing comment tag that you started at the beginning. IE might be a little more sensitive to that
<script type='text/javascript'><!--
FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
['NoDataToDisplay', 'DataXMLInvalid'],
function() {
FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose();
}
);
//-->
</script>
The line I added is right above
You seem to be missing a //--> before your </script> tag:
<script type='text/javascript'><!--
FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
['NoDataToDisplay', 'DataXMLInvalid'],
function() {
FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose();
}
);
//-->
</script>
Without that, you have a unclosed HTML comment. That could mess up your page big time.
--> : End of the HTML comment
// : Comment out the --> in your JavaScript, to prevent syntax errors.
However, nowadays you can just remove the comment altogether:
<script type='text/javascript'>
FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
['NoDataToDisplay', 'DataXMLInvalid'],
function() {
FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose();
}
);
</script>
Is there a way to inject scripts into the page before the <body> tag in php? I've seen some examples on how to do this with jquery, but jquery causes parts of my site not to function properly therefore I need a php code so I can selectively inject scripts before the opening tag of my page.
ie.
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
$(document).ready(function(){
// Call Intern Ads
$().tcInternAds({
title: "Support Our Sponsors!",
url: "adpage.html",
timeout: 10,
deplay: 0,
wait: 0,
closeable: true
});
});
</script>
<body>
<div class="xxxxx">
...............</div>
I would like to be able to use php if possible, so I can include the code in my template files where I need the scripts to be called while avoiding global inclusion.
Can anyone help with this?
best,
Mike
Put your contents in index.php (or whatever it's called).
It should look like this:
<?php
...phpcode...
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
...
</script>
<body>
<div class="xxxxx">
<?php
another php code
?>
</div>
Wouldn't simply placing it within the <head> work?
<head>
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
$(window).load()(function(){
// Call Intern Ads
$().tcInternAds({
title: "Support Our Sponsors!",
url: "adpage.html",
timeout: 10,
deplay: 0,
wait: 0,
closeable: true
});
});
</script>
</head>
<body>
<div class="xxxxx">
...............</div>
I have found a solution to my problem without having to inject or replace head code. The problem is that my site includes mootools and jquery is conflicting with it. I resolved the issue by using jQuery noConflict which defines a namespace to use and thus resolves the issue by using a custom variable rather than the dollar $.
Here is my working solution to workaround jquery/mootools conflict.
<link href="/internAds.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/jquery.internads.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
// Call Intern Ads
$j().tcInternAds({
title: "Support Our Sponsors!",
url: "/adpage.html",
timeout: 15,
deplay: 0,
wait: 5,
closeable: false
});
});
</script>
I appreciate everyone's time, I am not sure how I overlooked the conflict.
best,
I'm trying to simply echo a function back to the client browser from a server php page after a selection has been made in a jQuery autocomplete box so that the function can process as needed (client-side) with the value of the autocomplete box. The autocomplete is in the php page as follows:
mypage.php
<html>
<head>
<title>Autocomplete</title>
<link href="../../jqSuitePHP/themes/redmond/jquery-ui-1.8.2.custom.css" id="skin" rel="stylesheet" type="text/css" />
<script src="../../jqSuitePHP/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../jqSuitePHP/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script>
$(function ac_boxes() {
$("#dlr").autocomplete({
source: "dlrAutocompleteSearch.php",
minLength: 2,
search : function(){$(this).addClass('ui-autocomplete-loading');},
open : function(){$(this).removeClass('ui-autocomplete-loading');},
select: function( event, ui ) {
// Here's my attempt at calling the client side 'test' function
<?php echo '<script>window[test](ui.item.value)</script>;' ?>
}
});
});
</script>
</head>
<body>
---------
</body>
</html>
But the < and > are causing a problem. If I remove the < and >, the page processes completely (without the 'select' function of course. If I add the < and >, the page does not process.
I have tried assigning the string using the php htmlentities() as such:
<?php
$val = htmlentities('<script>window[test](ui.item.value)</script>;');
echo $val;
?>
But this doesn't seem to work either.
Is my problem stemming from the php being inside of the jQuery script? If so, what is another method of calling the php from the 'select' method of autocomplete?
Thanks in advance.
I don't think this code is doing what you think it is doing; when you load the page the PHP is executed and you end up with something like this in the source code:
<script>
...
select: function( event, ui ) {
<script>window[test](ui.item.value)</script>;
}
...
</script>
Which is not correct (you don't need script tags within script tags; as you've seen it doesn't do anything but cause problems).
If you want to execute some PHP when the selection changes, you have to make another call to the server, via AJAX, submitting a form, or whatever. Something like this might be more like what you want:
select: function(event, ui) {
// send the selected value to the server for processing
$.get("processChange.php", {value: ui.item.value});
}
See the JQuery docs on $.get() for more on that.
On the other hand, if all you're trying to do is call another client-side javascript function (test, for example) with the selected value, you don't need PHP to echo anything. This ought to do the trick:
<script>
function test(args) {
// ...
}
$("#dlr").autocomplete({
// ...
select: function(event, ui) {
test(ui.item.value);
}
}
</script>
You can use < and > just like in HTML. You can also use the replace() function to find all the < and > and replace them.
I have the following function. When I click the first time, it returns a random number, but all subsequent clicks always return the same number. How come it doesn't refresh?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn-get-random-image').click(function () {
$('#my-img').attr('src', '<?php echo $pics[array_rand($pics, 1)]; ?>');
});
});
</script>
It's because you're using PHP to generate the random number, and it can't possibly be refreshed across calls to the JS function -- it's embedded in the HTML by that point.
May be you can also use live like instead of click
$(document).ready(function(){
$('#btn-get-random-image').live("click", function () {
// your works here
}
});
also check out jquery live
As others have said, you are using PHP, which is executed once on the server and sent as raw output, so the image will not change. Try this!
Edit: modified code to make it suck less.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var myPics = <?php echo json_encode($pics); ?>;
$(document).ready(function() {
$('#btn-get-random-image').click(function () {
var index;
do {
index = Math.floor(Math.random() * myPics.length);
} while ( typeof myPics[index] == 'undefined' );
$('#my-img')
.attr('src', myPics[index]);
});
});
</script>
This uses PHP's JSON encoder to dump your array to the javascript, then your function randomly selects an image from that array to display. The do/while loop might not be necessary, my testing shows a pretty good near-uniform distribution over thousands of iterations, but there it is nonetheless.
Your PHP is creating JS code, which gets sent to the browser once when the page is rendered. Each call to the JS function runs the function as it existed when the page was rendered.