Adding existing variable to iFrame URL - javascript

This may be really basic, but help would be appreciated.
I have the following script that can be added to a custom built web application and embeds within it another page in an iframe.
$(function() {
$('#customframe').after('<iframe src="https://www.myurl.com" style="width:100%;height:200px"></iframe>');
});
I need to include a query parameter to the iframe like below
$(function() {
$('#customframe').after('<iframe src="https://www.myurl.com/page.html?id=ThisRecordId" style="width:100%;height:200px"></iframe>');
});
ThisRecordId variable is already available in the DOM.
If I go to the browser console and just type ThisRecordId it displays the value I need for the iFrame.
I am just struggling to get it to work.
Thanks in advance.

Use string interpolation for string literals,
use backticks instead of quotes and enclose variable in ${ThisRecordId} template
More about template literals here.
Example:
let ThisRecordId = 'myidnumber'
$(function() {
$('#customframe').after(`<iframe src="https://www.myurl.com/page.html?id=${ThisRecordId}" style="width:100%;height:200px"></iframe>`);
});

Related

How to passing value multiple parameters from jquery to laravel controller?

I have some problem with my code, I do not understand about send multiple parameters from jquery to controller
this is my route
Route::get('/listcdix/{id}/detail/{asnumber}',
['as' => 'remindHelper', 'uses' => 'ListcdixController#detail']);
bellow is my jquery
otable.on("click", ".btnview",
function () {
var custcode = otable.rows($(this).closest("tr")).data()[0].CustCode;
var asnumber = otable.rows($(this).closest("tr")).data()[0].ASNumber;
window.location = "{{route('remindHelper',['id'=>"+custcode+",'asnumber'=>"+asnumber+"])}}";
});
but when I click this button cannot get value custcode and asnumber
this is my URL like this
http://127.0.0.1:3232/listcdix/+custcode+/detail/+asnumber+
please check my picture
thank you for attention
window.location = "{{route('remindHelper',['id'=>custcode,'asnumber'=>asnumber])}}";
try this one hope it works
You are inside a blade directive ({}), so the page is expecting you will be adding a PHP segment while inside those curly braces. You are mixing and matching between PHP and Javascript and it produces the literal +custcode+ instead of the value behind the variable. Same thing happens if you try to add it without removing the quotes - it translates it as a constant and will produce an 'undefined constant' error. I.e. you are not getting down to Javascript to get to the variable.
Use one or the other, JS or PHP. So if all Javascript, something like:
APP_URL + "/listcdix/"+ custcode +"/detail/" + asnumber;
Where APP_URL is a pre-defined variable for your url prefix. You can cheat a little on that definition if you want and use the Laravel url() method to help you. Something like:
var APP_URL = {!! json_encode(url('/')) !!};
from a blade page before the JS needs to access it.
You can use this something like that
window.location = "{{route('remindHelper',['id'=>"custcode",'asnumber'=>"asnumber"])}}";
because when use using curly braces {{}} in laravel. You do not need to concat this with ++. So that's why you can use this as simple format. i have checked this code on my end as well so this will be 100% work for you.
Thank you.
Unfortunately you can not combine js variable with php code as far as I know and you are using the route function and because your route needs argument to process, you need to pass variables inside the "route" function. as far as I know there is no way and you have to give the route in complete string way like this:
let route = "/listcdix/" + custcode + "/detail/" + asnumber

cq5 currentNode.identifier in clientlibs javascript

I am able to get the value of '${currentNode.identifier}' in JSP javascript functions.
When I put the same js function and try to access the '${currentNode.identifier}' inside clientlibs javascript file , it simply outputting the string. not the actual identifier.
**
How to access the current node identfier inside a client libe js file
or inside a listener js function ?
**
I appreciate all the help.
Thanks,
Sri
As rakhi already mentioned in the comment: JavaScripts are delivered "as is" and are not executable servlets like JSPs. So there will be no replacement of scriptlets and ${} attributes. So the easiest way is to have a data attribute on a DIV or any other HTML element which is rendered by a JSP:
<div data-nodeid="${currentNode.identifier}"></div>
Then you could use a jQuery selector to get the value on load:
jQuery(function() {
jQuery('div[data-nodeid]').each(function() {
var nodeId = jQuery(this).data('nodeid');
//do something with the id
});
}

Is there any established way to get kwargs for a page view in JS?

Essentially I'm trying to do the opposite of what django-ds-utils does, which is get URL argument out of a resolved URL, for instance, take the following URL definition:
url(r'^reset_pwd/(?P<code>[A-Za-z0-9]+)/$', ResetPasswordView.as_view(), name='my.registration.views.reset_pwd'),
On that page, within JS, I would like to retrieve <code> into a kwargs array. Is this something that exists, or is there a standard approach to this?
AFAIK there is no standard approach. You can:
put JS into template and render view variable
pass variable in JS globals, setting it's value in template text
parse window.location
...etc.
I personally prefer the second way, e.g. put this code in template and then use _reset_pw_code global in javascript file:
<script> var _reset_pw_code = "{{ reset_code|escapejs }}" </script>
Recently JavaScript added a new API to do this it is currently still experimental.
const pattern = new URLPattern('reset_pwd/:code/', 'https://example.com');
console.log(pattern.exec('https://example.com/reset_pwd/thECode/').pathname.groups); // { code: 'thECode' }
https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API

AngularJS $http HTML Parser

All, we're developing a webapp with AngularJS and we have a use case/requirement (that won't happen very often at all) where we will need to retrieve a complete HTML document from our static server. However, it appears that the $http object returns a raw HTML string as its 'data'. We are trying to avoid using an external library (like jQuery, for instance), but we need to parse that raw HTML string into a queriable DOM object. We could use an iframe and be done with it, but we're also trying to avoid using iframes for well-known reasons.
So, the question is: does AngularJS have a parser for HTML (as it does for JSON)? Or else, what's the most graceful way to handle this case?
P.S.: We tried sifting through Angular's API docs, but in all honesty they are hit-or-miss and unintuitive to navigate around.
If you need to get a DOM element from the string programmatically, parsing html into a DOM object is pretty simple.
Basically you'd use DOMParser.
var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.
From there if you wanted to query to get elements from it with vanilla JS (meaning, you don't want to use JQuery for some reason), you can do this:
//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test');
... but note: querySelectorAll is only supported in IE8 and higher.
EDIT: additional approach...
The "wrap" method:
var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;
... do note that this method will return HTMLUnknownElements if you put SVG or MathML into it. They'll "look" normal, but they won't work.
First of all, Angular uses jQuery as well. (jQuery lite)
From FAQ
Does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when the
application is being bootstrapped. If jQuery is not present in your
script path, Angular falls back to its own implementation of the
subset of jQuery that we call jQLite.
However, I think you don't need full jQuery function here anyway.
That is what I did.
I use a directive and get the html as template and set replace as true.
jsFiddle
<myhtml></myhtml>
angular.module('myApp', []).directive('myhtml', function($http) {
return {
restrict: 'E',
scope: {},
template:'',
link: function(scope, element, attrs) {
$http.post('/echo/json/', data).success(function(re) {
element.html(re.html);
});
}
}
});
Edit note:
I just update the jsFiddle.
I include jquery on top for echoing the request in jsFiddle. In real, you don't need that.
However, it shows you that you can use jQuery in Angular.
If your html doesn't contain any angular tag, this example should work as your expectation .
Otherwise, you need to use compile instead of link.

Passing Querystring style parameters into Javascript file

Not sure if this is possible or even if I should do it, but I think it's quite interesting.
I have a javascript file which I'm referencing in a flat HTML page. I'd like to pass in a parameter or two via the path to the script. Like this;
<script src="/scripts/myJavascriptFile.js?config1=true" type="text/javascript"></script>
Not really sure if it can work but it would make my solution a little easier for others to take my script and implement (arguable).
Cheers,
Mike
I don't think that passing in variables via the src attribute is possible out of the box without some extra coding on your part (there is an article here if you are interested!). You could do the following though, which should provide the same functionality as you are looking for:
Define your "config" variables in a single script block on your HTML page:
<script type="text/javascript">
var config1 = true;
</script>
Reference your external JS file in a second script block:
<script src="/scripts/myJavascriptFile.js" type="text/javascript"></script>
Add this code to your external JS file to reference the "local" variable in your HTML:
var conf1 = window.config1;
if (conf1) {
// Do stuff
}
This is a variation on Matt's answer. I have a similar case where I need a jQuery file to use a value that is generated in the HTML (by Razor in this case). I write the value to a meta tag, generated as it is from the controller:
<meta name="sessionId" content="#ViewBag.SessionId">
and then read it in the jQuery file:
var sessionId = $("meta[name=sessionId]").attr("content");
It's not quite the same as passing it in by querystring, but useful if that information is considered "meta-information" of the HTML page.

Categories