I have profile user page index.blade.php where I should to shoe Google map.
This template looks like:
#extends('users.index')
#section('content')
<script>Google scripts</script>
#endsection
So, when page is rendered I get outpus as:
<html>
<head></head>
<body>
<script>Google scripts</script>
</body>
</html>
So, when I do HTML validation onlne, I get error, that you can not use scripts in body. It should be in HEAD.
Is there an way to do this in Laravel?
I dont want to load Google script on each pages.
in index page make script in its head to check page URL and if matched requested url then load scripts in page like below
<script>
const RequestedUrl = window.document.URL;
function injectScript ( myScriptURL ) {
let script = document.createElement("script")
script.type = "text/javascript";
script.src = myScriptURL;
document.getElementsByTagName("head")[0].appendChild(script);
}
if(RequestedUrl === 'http://your.URL') { // or RequestedUrl.includes('/cats') for ex.
injectScript(//jquery script URL//);
injectScript(//google script URL//);
}
</script>
if it depended on jquery or any make sure to load it same way before google scripts
learn more
Related
Thank you in advance
I am generating PDF with barryvdh/laravel-dompdf laravel library, i am able to add dynamic code to add in PDF but how to add javascript or jquery code
I tried like this
$pdf = PDF::loadView('invoice', compact('invoiceDetails'));
$pdf->setOptions(['enable_javascript', true])->setOptions(['javascript-delay', 13500])->save(public_path('invoice.pdf'));
invoice.blade.php looks like this (Just adding small code)
<h2 class="h2">Summary<span id="demo_span"></span> </h2>
<script type="text/javascript">
document.getElementById('demo_span').innerHTML ='THIS IS FOR AN EXAMPLE';
</script>
So the output would add text "THIS IS FOR AN EXAMPLE" where ID is demo_span
Firstly,
You have to set it in the package settings. Publish the config and change
it there.
To make it work, you need to use this JS bloc inside your PDF Blade :
<script type="text/javascript"> try { this.print(); } catch (e) { window.onload = window.print; } </script>
We have our own system which we need to integrate with MS Dynamics 365.For Example : In Accounts section we need to add an extra tab that loads IFrame or something that retrieves some extra information from our system.
The following are the things that I reached :
Inserting IFrame within a new Dashboard: (but it will not fetch specific account information, it will only pass the currently logged in user along with the organization name)
Unified Service Desk (USD): (we may add customization but this is a desktop app and we need it to be on web)
Microsoft flow: this would only work in the background when you create or edit an account (not sure if it has another functionality)
Extensions: Not sure how to use it to achieve the same functionality, I believe the solution may be here but I just need from where to start.
Has anybody done a similar thing before?
Thank you
You can definitely do it,
Here is how I just tried on one of my Trail Instance.
I added new Tab as you need, I called it "HTML Page"
On this Tab I added Webresource, you can add Iframe as well and call your external WebPage.
For my simple use case I created a simple HTML page as webresource in CRM and configured it to Webresource tab as below
Sample code for HTML. Dont worry about long html file. Mostly it is bla bla. What is of our importance is <body onload="myFunction()"> and then in
<script>
function myFunction() {
debugger;
alert("Account Id when from fromcontext is ");
alert(parent.Xrm.getformContext().data.entity.getId());
}
</script>
complete HTML code below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
</head>
<body onload="myFunction()">
<!-- Site navigation menu -->
<ul class="navbar">
<li>Home page
<li>Musings
<li>My town
<li>Links
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
<script>
function myFunction() {
debugger;
alert("Account Id when from fromcontext is ", parent.Xrm.getformContext().data.entity.getId());
}
</script>
</body>
</html>
Also on Form Load of account I added additional Javascript. This javascript will create global variable which could be called from your webresource.
Article Link for additional Javascript
Sample code used for Javascript below
formContext=null;
function onload(executionContext){
debugger;
var formContext = executionContext.getFormContext();
Xrm.getformContext = function (){
return formContext;
};
Xrm.getParentAttribute = function (attrName) {
debugger;
return formContext.getAttribute(attrName);
};
Xrm.getParentControl = function (attrName) {
debugger;
return formContext.getControl(attrName);
};
}
Final Result will be something like below
Summary:
Create Wberesource/Iframe
Create Additiona Js on Load
Use global variable in your webresource.
I need help with Google App Script on a Google Sheet and an Html form. I just cannot get them to connect properly. The form has a text box and two buttons. The user enters a name in the text box and press the start button. The start button records time to a variable. When finished, the user presses finish. The finish button records the time and processes the text box and start button. This info is sent back to the Google App Script to be written to the Sheet. I would like to use an AJAX or JQuery call, but it doesn't seem to be working. Need a little help getting the nice form working. I have tried doGet(e) and doGet() functions, but those aren't working. I have tried lots of different versions of the code. This isn't my final html form, but it has the same point. If I click the button, AJAX should return something to the Google App Script after processing. New to Google App Scripting and need help. Thanks!
code.gs
function doGet(e) {
var result = "";
try {
result = "Hi" + e.queryString;
//should write to the spreadsheet the information here
} catch (f) {
result= "Error" + f.toString();
}
result=JSON.stringify({"result":result});
return ContentService
.createTextOutput( "(" + result + ")")
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
//where does HtmlService.createHtmlOutput('index.html') go?
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Make an AJAX call to Google Script
function callGoogleScript() {
var url = "https://script.google.com/macros/s/" my script id "/exec";
var data = { name: "Tom", city: "Nowhere" };
var request = jQuery.ajax({
url:url+encodeURIComponent(data),
method: "GET",
dataType: "jsonp"
});
}
// print the returned data
function ctrlq(e) {
console.log(e.result)
}
</script>
</head>
<body>
<button id="test" name="test" onclick="callGoogleScript()">Test</script>
</body>
</html>
Edit: This is for a Web App.
I've an ajax code like this:
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example.org/', false);
req.send(null);
if(req.status == 200)
var response = http_attendance.responseText;
document.getElementById('divAttendance').innerHTML = response;
When I get result on the page, FF browser shows the DOM elements on 'divAttendance'. If I want to put put some jquery effect on the result, I can't be able to do it.
DOM elements is clearly viewed using firebug. But, when I generate the source code of that page then there is no repsonse text on 'divAttendance'. It is blank like thisL:
<html>
....
..
<div id="divAttendance"></div>
..
..
</html>
How to manipulate or put some effect on that result ???
Well, if you are using jQuery then you should be using jquery ajax anyways
http://api.jquery.com/jQuery.ajax/
Regardless, if you are populating your div with AJAX response then it will not show up using "View Source" rather you will have to use a tool like firebug.
Your div initially should look like following
<div id="divAttendance" style="display:none"></div>
and your javascript should have the following
.....
document.getElementById('divAttendance').innerHTML = response;
$("#divAttendance").show("slow");
For such operations jQuery load is easy and usefull function, have a look at
http://api.jquery.com/load/
Your specific example can be rewritten as
<html>
....
IMPORT JQUERY.JS
<script language="javascript">
$('#divAttendance').load('http://www.example.org/', function() {
$("#divAttendance").show("slow");
});
</script>
..
<div id="divAttendance" style="display:none"></div>
..
..
</html>
1) I have to change images dynamically according to values for every x seconds.
I'm using the following function:
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
It works fine for updating the value, but the images not getting updated into its position.
2) From the 1st question i want to know whether the jquery and css files included in the head tag will load every x seconds or not. if not how to load?
Please give me the suggestion.
If you are returning a whole HTML page and returning it into the body of another page, that is a bad idea.
Think about it, your html structure would be something like
<doc type>
<html>
<head>
</head>
<body>
<div>
<doc type>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
</div>
</body>
</html>
Ideally you should be retuning just the content that is to be displayed, not everything.
If you are just updating images, there usually is no need to make an XHR call. You can just set the image src and force the browser to update that content that way.
Does this need to be done with Ajax at all? How many images are you going to cycle through? If it is only a few, just keep all of the src's on the page and switch the image src attribute periodically. This requires no page reload. You may also want to preload all the images so there is no flicker when changing to the other image. For example:
$(function () {
var images = ['1.png', '2.png', '3.png'];
$.each(images, function (index, src) {
$("<img />").attr('src', src); //preload
});
var keep = 1;
setInterval(function () {
$("#main_img").attr('src', images[keep]);
keep++;
if (keep >= images.length) { keep = 0; }
}, 5000);
});
Now if you don't want to hard code the image urls in the JS, you can load them initially with a single Ajax request.
I would only recommend using Ajax to do all the work if you are talking about an unpredictable set of images or some massive number of images.