How to receive variables in a js file when I create it with Element script from another JS file? - variables

I have "file1.js" with the following code where I create a element script to call another js file named test.js
var property = 'email';
var NewScript=document.createElement('script');
NewScript.src="/js/test.js?property="+property;
document.body.appendChild(NewScript);
The code work fine because call (or insert) the file "test.js" my problem is that I also want to send a variable to "test.js" to use it there, I dont know how to send/receive this variable in that way, any help ?
This is what I should have in "test.js"
alert(property);
but how do I receive this variable?

No you can't pass a querystring parameter to a javascript file like that. What I've seen done is to set the variable in script before you create your new javascript file reference. Which is kind of what you are doing above, but you need to declare your property variable outside whatever function you have this code in. So for example if you have this code in a jQuery document ready function it would look something like this:
var property = 'email';
$(document).ready(function () {
var NewScript = document.createElement('script');
NewScript.src = "/js/test.js";
document.body.appendChild(NewScript);
});
This will allow your property variable to stay in scope for your external file. HTML JavaScript Include File Variable Scope

Related

How to render string into javascript in pug

So i am using Express and create an MVC application. I have a list of email that i want to put into javascript variable in the front end and create an auto complete
so currently the controller looks like this:
controller.js
res.render('/page',{emails: emails})
the emails is a JSON structured, can be stringified if needed. and my pug template is as follow
div
input (type = "text" id="suggestion")
div (class = "custom-suggestion" id="suggestion-list")
and at the end, i override custom scripts block with:
script.
var emailList = ///////////i want the email from controller's data
How can i achieve this? Any suggestion as long as i can pass the data to the javascript side will be considerable
EDIT
To make the code clearer:
app.js
var app = express();
app.set('view engine', 'pug');
router = express.Router();
router.get('/',function(req,res,next){
emails = ['abcd#abc.com','def#def.com','123#123.com'];
res.render('index', {emails:emails})
})
app.use(router);
index.pug
extend layout
block content
h1= title
block scripts
script
emails= emails /// not working
////////////// how to render this line as
////////////// emails = ['abcd#abc.com','def#def.com','123#123.com']
You can use interpolation to do this:
script.
emails= !{JSON.stringify(emails)};
Note that there's a period after the script tag, this tells pug to treat the content inside the tag to be plain text. Without that period it will create a script tag then an email tag (<script><email></email></script>) which is not what you want here.
Now that you're in plain text mode you can output the template variable into a JavaScript variable using an unescaped interpolation command (!{...}) with a stringify inside.

How to create standalone custome page?

I'm looking for a way to create single page model/ standalone single page.
It's like a custom single page for 'About Us', 'Home Page','Our Team',etc.
They are single page with backend options.
Anyone have any idea ?
So you need to create all needed type of files, like route JS file, template file, add info about that file into routes/index.js
example:
create file routes/views/aboutUs.js :
var keystone = require("keystone");
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = "about-us";
locals.title = "About our company";
// Render the view
view.render("aboutUs");
};
create template file templates/aboutUs.pug :
block content
p Our company is super cool. We based it here long time ago
Put all your static content into template with correct syntax and css
Finally make addition to routes/index.js file:
app.get("/aboutUs", routes.views.aboutUs);
if you need to control user access to page also add such string
app.all("/aboutUs*", middleware.requireUser);
And dont forget to restart the app to see changes
That's clearly not what OP is asking for. They're asking if there is a way to create a single ADMIN UI editable page for Home, About Us, and so on. My answer is that I don't believe that is possible with KeystoneJS. Which is annoying, because I have clients that want that and Keystone would be perfect otherwise. Seems the only way to do it is create a list, auto create a record if one doesn't exist, and set "nocreat", and "novelette" on the list.

Pass arguments to contact.php

How can I pass variable to contact.php that I can echo on form. I can pass through the form to the email recipient, but, I'm at wits end trying to print to form.
For example, I'd like to set $somevariable="This will be my default Subject", pass the variable through the contact.js and be able in the contact.php receive the variable and use the for the value="#somevaraible" for the subject on the form.
Thanks!
I think you are looking for something like ajax, which will allow you to communicate directly from javascript to PHP scripts. The easiest is probably jquery's implementation of ajax. You are able to pass parameters to your PHP application. https://api.jquery.com/jQuery.ajax/
For example, I can pass any param I want to map.php. With GET this would be the equivalent of calling "map.php?param1=strvalue1&param2=strvalue2" (in the example) I can then capture these values in PHP by using something like $param1 = $_GET['param1']; In the example, whatever the PHP file displays in response to this is then written to an element with the ID of write. All of what I just mentioned can occur after a page has loaded.
You can call the javascript below as many times as you like with whatever javascript functions you see fit. Just keep in mind it will continue to replace whatever is in ID of write, you just need to update that snipplet of code to update the value of your field.
You need to make sure you include Jquery's library when using this like:
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var request = $.ajax({
url: "map.php",
type: "GET",
data:{ param1 : "strvalue1",
param2: "strvalue2"
},
dataType: "html"
});
request.done(function( msg ) {
$( "#write" ).html( msg );
});
</script>

Using Global Function in Titanium

I am making Titanium mobile project where I want to make one global function which I can use throughout the application. For that I have created other .JS file where I have defined the function and I am including that .JS file where I need to use this function and I am successfully able to call the function.
But My question is :
Can I create new Window in that function? As I have added one Label and one MapView in that window but it is not showing, while at the start of function I have added alert('FunctionCalled'), it is showing me alert but not showing me the label I have added in the window.
So anybody can help me to find out whether we can open window through function. If yes then any sample example, so that I can find out what mistake I am making.
Thanks,
Rakesh Gondaliya
you approach CAN work but is not a best practice, you should create a global namespace, add the function to that namespace and then only include the file with the function once in app.js
// apps.js
var myApp = {};
Ti.include('global.js','ui.js');
myApp.ui.openMainWindow();
then we create a seperate file for our ui functions
//ui.js
(function(){
var ui = {};
ui.openMainWindow = function() {
// do open window stuff
// call global function
myApp.global.globalFunction1();
}
myApp.ui = ui;
})();
here is where we create our global functions, we will not have to include the file everywhere since we are adding it to our global namespace
//global.js
(function(){
var global = {};
global.globalFunction1 = function() {
// do super global stuff
}
myApp.global = global;
})();
this is a simple outline of how it can be implemented, I have a complete code listing on my blog
Yes you can create a new window or add a label or anything else. If you wanted to add a label to the current window then you would do:
var helloWorld = Ti.UI.createLabel({ text: "Hello World", height: "auto", width: 200 });
Ti.UI.currentWindow.add(helloWorld);
It won't matter where the code is executing because Ti.UI.currentWindow will be the active window regardless.

Access ExtJS grid's column model from other file

I have an ExtJS grid that has a button set up in it. The button triggers a function that's defined into other JS file that's included in the grid page. The function triggers ok but in that function I want to get the columns count like this:
grid.getColumnModel().getColumnCount()
The problem is that I get an error like: grid.getColumnModel is not a function.
In PHP I would make a "global $ext" and then access that function. How can I do this in Ext ? How can I access the grid from other file ? What needs to be defined ?
Thank you.
How did you define the grid object? Did you do it like this:
var grid = new Ext.grid.GridPanel(...);
If so, the grid object is not in global scope. Remove the "var" and see if it helps.
This looks like a scope issue. See variable scope in JavaScript.
Basically, you can do:
my_global_grid = ... // accessible in the current ~global~ context (document, window)
var my_local_grid = ... // accessible only in the function
window.my_window_global_grid = ... // accessible in the same window
You might also pass the grid object into your function as an argument:
function myFunction(arg1,arg2,grid){
...
var count = grid.getColumnModel().getColumnCount();
...
}