Hi im trying to use blade to create a dynamic tracking code for my website.
this is what i have so far i tried yielding straight to the piwikTracker var but got all sorts of errors passing it as a var seems to be working but im now not getting any stats on the backend
<!-- Piwik -->
<script type="text/javascript">
var track = #yield('track');
var pkBaseURL = (("https:" == document.location.protocol) ? "https://centralcoastwindowcleaners.com.au/track/" : "http://centralcoastwindowcleaners.com.au/track/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", track);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://centralcoastwindowcleaners.com.au/track/piwik.php? idsite=#yield('track')" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
is there a way i can escape it and do something like:
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://centralcoastwindowcleaners.com.au/track/" : "http://centralcoastwindowcleaners.com.au/track/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", #yield('track'));
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://centralcoastwindowcleaners.com.au/track/piwik.php? idsite=#yield('track')" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
In the context that you are showing you are not needing to yield a section, just a variable or string. This way you just pass this would just be
var track = {{$track}};
Sections are helpful for nested and partial views but overkill (as well as not designed) for single variables. If for some reason you cannot store and pass $track, then pass the entire line with the yield rather than just the variable.
//var track = 'varYouArePassing';
#yield('track');
Related
Is there a way in EvoHtmlToPdf to display the section/subsection of a page in the header/footer (i.e. the text of the "current" h1/h2 tag)?
With wkhtmltopdf and other tools, it is possible to replace special tags via JavaScript and the HTML header template (as described here for example Dynamic section name in wicked_pdf header).
Unfortunately, such a solution does not seem to work with EvoHtmlToPdf.
Here's the HTML code of my header template:
<html id="headerFooterHtml">
<head>
<script>
function substHeaderFooter(){
var vars={};
var searchString = document.location.search;
var debugMessage = document.getElementById("showJavaScriptWasExecuted");
if (debugMessage)
debugMessage.textContent = "Search string: ["+ searchString + "]";
var search_list = searchString.substring(1).split('&');
for(var i in search_list){
var content=search_list[i].split('=',2);
vars[content[0]] = decodeQueryParam(content[1]);
}
var tags=['section','subsection'];
for(var i in tags){
var name = tags[i],
classElements = document.getElementsByClassName(name);
for(var j=0; j<classElements.length; ++j){
classElements[j].textContent = vars[name];
}
}
}
</script>
</head>
<body id="headerFooterBody" onload="substHeaderFooter()">
<div id="showJavaScriptWasExecuted"></div>
<div id="sections">{section} / {subsection}</div>
</body>
Resulting header in PDF
I already added the EvoHtmlToPdf PrepareRenderPdfPageDelegate event handler to my code (if that's the way I have to go) but I don't know how to access the section of the current page there...
Thanks in advance for your help!
It would be great if you could help me with a problem.
I'm using Bootstrap Slider (https://seiyria.com/bootstrap-slider/).
I want to display the Current Slider Value.
It works with the comma. How can I change the ',' -> ' to '
Age Range ...<br/>
<b>18</b> <span><input id="ex2" type="text" class="span2" value="" data-slider-min="18" data-slider-max="100" data-slider-step="1" data-slider-value="[30,55]"/></span> <b>100</b><br/>
<span id="ageSliderLabel">Current Slider Value: <span id="ageSliderVal">30,55</span></span>
<!-- Bootstrap Slider -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/css/bootstrap-slider.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/bootstrap-slider.js"></script>
<script>
var slider = new Slider('#ex2', {});
slider.on("slide", function(sliderValue) {
document.getElementById("ageSliderVal").textContent = sliderValue;
});
</script>
document.getElementById("ageSliderVal").textContent = sliderValue.replace(",", " to ")
See https://www.w3schools.com/jsref/jsref_replace.asp
Unfortunately, it does not work for me.
I have to integrate the code with backslash in php and then nothing works anymore.
var slider = new Slider('#ex2', {});
slider.on(\"slide\", function(sliderValue) {
document.getElementById(\"ageSliderVal\").textContent = sliderValue.replace(\",\", \" to \")
});
I have the solution.
It works after using toString()
<script>
var slider = new Slider('#ex2', {});
slider.on("slide", function(sliderValue) {
var sliderValue = sliderValue.toString();
document.getElementById("ageSliderVal").textContent = sliderValue.replace(",", " to ")
});
</script>
I am failing for 2 days on trying to reload an Image using Java script.
I hope you can help!
the Image is displayed but doesnt Change after the defined 7 secunds...
it's not a server-side Problem while i can see in wireshark that the data isn't even requested by the browser...
is anyone having an idea where my Problem might be?
please see my code below for reference
<html>
<!DOCTYPE html>
<html lang="de-DE">
<head>
<bodyonload="DispayImage()">
<img src="/img/dynamic_live_1.jpg" width="600" height="450" name=Cam>
<script language="JavaScript>
var imageUrl = document.Cam.src;
var random = new Date().getTime();
var delay = 7000;
var counter = 0;
var buffer = new Image;
function DisplayImage()
{
document.Cam.src = buffer.src;
LoadNextImage();
}
function LoadBuffer ()
{
var trickname = imageUrl;
++counter;
trickname += "?counter=" + (random + counter);
buffer.src = trickname;
buffer.onload = DisplayImage;
}
function LoadNextImage()
{
setTimeout("LoadBuffer()", delay);
}
LoadNextImage();
</script>
</body>
</html>
On first sight, your "setTimeout"-call seems to be wrong:
Try
function LoadNextImage()
{
setTimeout(function() {LoadBuffer()}, delay);
}
Also, your body.onload has a wrong call, it says "DispayImage" and not "DisplayImage", but that might be a copy-paste error on your end.
Edit: Just tested the corrected code myself, and here it works (used some local images). One last error I found was that you don't close the "language"-tag:
<script language="JavaScript>
should be
<script language="Javascript">
Or, even better, the "language"-tag is not needed, all browsers use javascript as default when you use "script":
<script>/*Some code here*/</script>
I have a pretty specific issue to deal with : I am looking for a solution about IE6 crashing when there is too much javascript in a webpage. The project I am working on is using Dojo, SpringJS, Apache Tiles and Spring Webflow. For each field used (defined in .tagx files), the decoration is added as following :
<script type="text/javascript">
Spring.addDecoration(
new Spring.ElementDecoration({
elementId : '_${field}_id',
widgetType : 'dijit.form.ValidationTextBox',
widgetAttrs : {
<!-- Widget attrs -->
}
})
);
</script>
So, in the generated webpage, a lot of javascript is added everywhere. The problem is IE6 seems to crash when there is too much javascript. The solution "experts" found was to write all the javascript code at the end of the HTML page.
In intent to do that, I tried to create a new tag called putScriptInCache.tagx :
<jsp:useBean id="mapScripts" class="java.util.HashMap" scope="request"/>
<jsp:doBody var="theBody" />
<c:set target="${mapScripts}" property="${id}" value="${theBody}"/>
Which replaces previous javascript tag :
<lbputil:putScriptInCache id="${field}">
Spring.addDecoration(
new Spring.ElementDecoration({
elementId : '_${field}_id',
widgetType : 'dijit.form.ValidationTextBox',
widgetAttrs : {
<!-- Widget attrs -->
}
})
);
</lbputil:putScriptInCache>
Finally, I have written a piece of code which loops on the map created and write javascript at the end of the html body :
<script type="text/javascript">
dojo.addOnLoad(function(){
<c:forEach items="${mapScripts}" var="script">
<c:out value="${script.value}" escapeXml="false" />
</c:forEach>
});
</script>
It seems to work pretty well but an issue remains : when an ajax request is fired, an Apache Tiles fragment of the jsp is reloaded using Spring Webflow. After that, I noticed that the map in request scope was empty and I can't figure out why. It should have been filled with the reloaded fragment fields javascript code.
EDIT : If someone has a totally different way to solve my initial issue, do not hesitate to propose it !
After lookep at the spring-dojo.js, I found that this script already evaluates scripts at the end of the fragment rendering.
handleResponse: function(response, ioArgs, callbackResponse) {
//...
//Extract and store all <script> elements from the response
var scriptPattern = '(?:<script(.|[\n|\r])*?>)((\n|\r|.)*?)(?:<\/script>)';
var extractedScriptNodes = [];
var matchAll = new RegExp(scriptPattern, 'img');
var matchOne = new RegExp(scriptPattern, 'im');
var scriptNodes = response.match(matchAll);
if (scriptNodes != null)
{
for (var i=0; i<scriptNodes.length; i++)
{
var script = (scriptNodes[i].match(matchOne) || ['','',''])[2];
script = script.replace(/<!--/mg,'').replace(/\/\/-->/mg,'').replace(/<!\[CDATA\[(\/\/>)*/mg,'').replace(/(<!)*\]\]>/mg,'');
extractedScriptNodes.push(script);
}
}
//...
//Evaluate any script code
dojo.forEach(extractedScriptNodes, function(script){
dojo.eval(script);
});
// APPEL du callBackResponse
if (callbackResponse != null){
callbackResponse();
}
return response;
},
First, it stores script tags into extractedScriptNodes, then it replaces the script tags with // Original script removed to avoid re-execution . Finally, it evaluates each extractedScriptNodes after having rendered the view.
So, it should already work...
Currently im building a application using phonegap & jQuery Mobile
I have done the version which is perfectly working on iOS & Android.But the same code does not work on windows phone.When i click any link,redirection to the respective page is not loading..Its still says "Error Page loading".
<!DOCTYPE html>
Test
<div id="bg">
<div style="padding-top:14%;width:100%;text-align:center">
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_1.png" /></div>
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_2.png" /></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Need help on this.
Solution
Add data-ajax=false or rel=external to your anchor tag. But, if you do this, you will lose transitions. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. You could enable this if the incoming device is a windows phone if needed :
$(document).on("mobileinit", function () {
//check for windows phone
$.mobile.ajaxEnabled = false;
});
Else, make your code into a single page template. Here's a demo of that : http://jsfiddle.net/hungerpain/aYW2f/
Edit
Currently jQM doesn't support query string parameters. You could use the localStorage API to store the parameters in cache and retrieve them later. Assuming you want to go to index.html from here :
<img src="pics/btn_2.png" />
You'd add a click event for it :
$(document).on("click", "a", function() {
//gets qs=2 and changes it into ["qs",2]
var query = this.href.split["?"][2].split["="];
//construct an array out of that
var paramString = { query[0]: query[1]} ;
//store it in localstorage
locaStorage["query"] = JSON.stringify(paramString);
//continue redirection
return true;
});
In your index.html :
$(document).on("pageinit", "[data-role=page]", function() {
//store it in localstorage
var params = JSON.parse(locaStorage["query"]);
//now params will contain { "qs" : 2 }
//you could access "2" by params["qs"]
});
More info about localStorage here.
I had Also same issue and finally resolve it by using below code
my html page is index.html and i am writtinga all code in one html
Before
$.mobile.changePage( "#second", {});
After
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"index.html#second");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
and suppose you have multiple html page then for more one page to another you can use
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"second.html");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
There is no support of querystring in web application using phonegap for windows phone 7.
However we can replace ? with # or anything else to pass the data,
like convert
Sample.html?id=12312
to
Sample.html#id=12312