Develop Reference

how to add <script> tag dynamically in phpbb3 teamplate?

I am using phpbb3 as my board solution , i have already made the content pages etc .. all using integration with phpbb , now i want to add code from google adsense to my pages .. to do that i used the following script in overall_header.htm file in phpbb3/styles/prosilver/templates
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$("<!-- INCLUDE ad.html -->").insertAfter(".column1 > ul");
$("<!-- INCLUDE ad.html -->").insertAfter(".column1");
});
// ]]>
</script>
where i have the add code in ad.html , and the selectors are such to put the code into proper place.
but somehow phpbb reads this as XML , and instead of executing the script , it show it in text.. and also execute the "" part and show the ads where i placed the script.
http://tutorialfrenzy.com/how-to-block-a-website.php
you can see it there.
i tried using
<script type="text/javascript">
// Use any event to append the code
$(document).ready(function()
{
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://scriptlocation/das.js";
// Use any selector
$("head").append(s);
});
it didn't helped .. Any suggestions ?
EDIT:
Also i used jquery getscript method
<script type="text/javascript">
$.getScript("chitikaad.js", function(){
alert("Running test.js");
});
</script>

As you pointed out, the includes don't work in the js file. Try changing it to this instead...
$(document).ready(function(){
$.ajax({
url: "ad.html",
success: function(data) {
$(data).insertAfter(".column1 > ul");
$(data).insertAfter(".column1");
}
});
});
You don't need <script> tags when using $.getScript(), and document.ready() may not be needed, but it does no harm and since I haven't seen your whole project it's better to have it than not have it (it does run the code, even if the document had already loaded previously.)
Incidentally, if you can add script to the main page, then you don't need $.getScript(). Just include the above script in the main page and it will load ad.html for you. Obviously if there's any other code in chitikaad.js then carry on loading it as you are.

Transferring Onclick Function to jQuery

I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:
$(document).ready(function(){
$(".wheelFinishThumbs a").click(function() {
var mainImage = $(this).attr("href");
var mainTemp = mainImage.replace(/-mid/,'');
var mainTemp = mainTemp.replace(/png/,'jpg');
$("#main_view img").attr('src', mainImage );
$("#main_view a").attr('href',mainTemp);
return false;
});
I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images
Click to download
but since "image.jpg" has to be my dynamic variable some how I've got to call this argument in the jQuery image replacement function and replace "image.jpg" dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.
My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.

This should work, assuming you are using jQuery 1.7+
Assuming your a tag markup is like this after you dynamically set the href to new image
Download Image
JavasScript
$(function(){
$(document).on("click","#main_view",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
});
});
Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID's should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this
<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>
And Update my script like this
$(function(){
$(document).on("click",".aDownloadble",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
});
});
jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.

$(document).ready(){
$("#main_view a").click(function() {
// Code to run when user clicks on link
});
});

How to get Anchor Links to work in Jquery Mobile?

Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").
Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?
I only need a solution for anchor links on the same page (ie: href="#specs").
thanks

You could try adding a data-ajax="false" on the anchor tag.
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.
Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.
$(document).ready(function() {
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});
Hope this helps. It is the same solution user700284 offers but in an automated way.

You can add the following code to the end of your page:
<script type="text/javascript">
$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
</script>
And add the class "native-anchor" to your anchor links.
It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.
I found this sollution here: jQuery Mobile Anchor Linking

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});

First you have to place this code into a custom.js file
$(document).bind('mobileinit', function () {
$.mobile.loader.prototype.options.disabled = true;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.loadingMessage = false;
});
Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately

Thank you
this solution worked for me
<script>
$(document).ready(function() {
$("a").each(function() {
if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
});
});
</script>
I replaced # with index.php which is my document root.
But, it doesn't work for form button i.e input type="submit"

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
$('a[href*="#component"]').each(function () {
// then set data-ajax to false,
$(this).attr("data-ajax", false);
// at this point you can add the class to your target a tags.
// You can do it elsewhere but because for this example my
// 'a' tags are automatically generated so I just add the class here
$(this).addClass('in-pagelink');
// then target the class and bind to a click event
$('a.in-pagelink').bind('click', function (ev) {
// here I redirect the page with window.location.assign
// as opposed to window.location.href. I find that it works better
window.location.assign(this.href);
// then I close my navigation menu
closeAll();
});
});

Javascript syntax for jQuery .load() function

I've just attempted to make a simple script to use ajax to load a new part of a page. The class remove/add to change the relevant text colour works fine. However, the new html does not seem to appear. I have a feeling this is to do with my general js syntax but I can't work it out.
Javascript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page_menu a").click(function() {
$("#page_menu p").removeClass("current");
$(this).children().addClass("current");
var project = $(this).attr("name");
var loadUrl = project + ".html";
$("#project_image").load(loadUrl);
return false;
});
});
</script>
An example of an anchor tag in the html would be:
<a name=example href="#">Example</a>
The html file I'm looking to load would be called "example.html" and the code in it:
<h1>Hello</h1>
I'm sure it's pretty straight-forward but I'm just not seeing it!
Cheers,
Rich

I would use the href of the anchor directly:
Example
<div id="project_image"></div>
And then AJAXify it:
$(function() {
$('#page_menu a').click(function() {
$('#page_menu p').removeClass('current');
$(this).children().addClass('current');
$('#project_image').load(this.href);
return false;
});
});

Anchor's most certainly do have a name attribute, so that part would be okay.. but to make things cleaner, change your anchor to:
Example
For length sake you can use shorthand syntax for $(document).ready, and also do the class changes in one chain. Then just load the page specified in the href and to see if the request actually worked, add a callback, like so:
$(function() {
$("#page_menu a").click(function(e) {
$("#page_menu p").removeClass("current").filter(this).addClass("current");
$("#project_image").load(this.href, function(res) {
// This will allow you to see the response from the server without having to dig through requests
// If you don't have a console for some reason, just change this to alert()
console.log(res);
});
e.preventDefault();
});
});

Adding an anchor to generated URLs

I have tried finding a simialr example and using that to answer my problem, but I can't seem to get it to work, so apologies if this sounds similar to other problems.
Basically, I am using Terminal Four's Site Manager CMS system to build my websites. This tool allows you to generate navigation elements to use through out your site.
I need to add a custom bit of JS to append to these links an anchor.
The links generated are similar to this:
<ul id="tab-menu">
<li>test link, can i rewrite and add an anchor!!!</li>
</ul>
I can edit the css properties of the link, but I can't figure out how to add an anchor.
The JQuery I am using is as follows:
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").each(function() {
$(this).children("a").css({color:"red"});
});
});
</script>
Thanks in advance for any help.
Paddy

sort of duplicate of this:
How to change the href for a hyperlink using jQuery
just copy the old href and add anchor to it and paste that back
var link = $(this).children("a").attr("href");
$(this).children("a").attr("href", link+ "your own stuff");

A nice jQuery-based method is to use the .get(index) method to access the raw DOM element within your each() function. This then gives you access to the JavaScript link object, which has a property called 'hash' that represents the anchor part of a url. So amending your code slightly:
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").children("a").each(function() {
$(this).css({color:"red"}).get(0).hash = "boom";
});
});
Would change all the links in "#tab_menu li" to red, and attach "#boom" to the end.
Hope this helps!

I can now target the html by using the following:
$(this).children("a").html("it works");
I assumed that:
$(this).children("a").href("something");
would edit the href but I am wrong.
Paddy

I am not sure for the answer, I dint try
$("#tab-menu").children("li").children("a").each(function() {
// $(this).css({color:"red"}).get(0).hash = "boom";
var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href');
$(this).attr('href', temp_url);
});