I am calling an api and getting some values in json format now I want to restrict some user on client side based on the response I get from the api. for example if user is a guest then it haven't show the subscribe button otherwise it have. In developer portal we use DotLiquid view engine. Now i have one question how can i use this in dotliquid. here is my code where i use Jquery to get data and javascript to restrict the user on client side
Code
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
var root = 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false';
$(document).ready(function () {
var showData1;
$('#get-data').click(function () {
var showData;
jQuery.ajax({
url: "https://httpbin.org/get",
dataType:'json',
success:function(response)
{
$('#a').html(response.origin );
$('#b').html(response.url );
if(response.url=="https://httpbin.org/get"){
$("#a").fadeOut(1000);
}
}
});
showData.text('Loading the JSON file.');
});
});
</script>
<!DOCTYPE html>
Get JSON data
<div id="show-data"></div>
<p id="a"></p>
<p id="b"></p>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
I can't quite tell from your source code, but in the DotLiquid templates we use on the developer portal the template variables are fixed currently. Please add your feature request to have user variables in each template to our feedback portal http://aka.ms/apimwish
Related
I want to process a GET extension in a HTML page and not a PHP page.
I have looked through the internet and not found anything.
URL = examplesite.com?id=1234
I assume this would go to the index page on the domain. As the index page is a HTML page, is there a way to get the details of the extension transferred to another link I have in the html script that emails me when someone looks at the site.
<script src="trigger.php">
</script>
This way I can customise the extension to know where the person found me. id=1234 is from twitter, id=2345 from FB etc.
Then i could place the extension onto the script to send me the email.
<script src="trigger.php?id=1234">
</script>
Is there a way to get the HTML page to process extension and pass it on in a variable of some sort.
Thanks in advance
Robert
You can do it in Javascript in the HTML. window.location.search contains the query string from the URL.
You can then use an AJAX request to send the query string to your server script.
<script>
$(document).ready(function() {
var script = 'trigger.php' + window.location.search;
$.get(script);
});
</script>
This is not possible with plain HTML. By definition, HTML is not dynamic. It can't process anything you want. However, there are three options.
Firstly, you can use JavaScript and AJAX calls to make another HTTP request to examplesite.com/processID.php (or another PHP page) which will process the request.
Another way to use JavaScript would be to use a client side API such as MailChimp to send the email directly from the users computer.
Or you could just redirect your root page for your domain examplesite.com to lead to index.php. I'm sure that's very easy to configure in mainstream servers such as Apache or Nginx. Otherwise please ask another question on Server Fault about how to set this up using your server.
If you are using a PHP hosting provider, they should also be able to help redirect the root page. If you don't have any access to PHP on your hosting provider, you're out of luck. You must only use the second option.
Do it with ajax
<form id="form1">
<input type="text" />
<button type="submit" id="sendforms">send</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1").serialize();
$.get(
"trigger.php",
combinedFormData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
Good morning everyone I'm having a little trouble with Firebase as a new user. In my previous question I asked how I could use my express server making API calls to pass that data retrieved into my firebase database and I was able to make it work! However, now I want to take that data from my database and use it to populate my DOM on the client side.
So we're clear this is how the work flow got my app goes:
Make an AJAX request from my client to my express app app.jssending a small data object {search: search} where the value for search is captured in a form on the client. (works)
Take that data object and make another AJAX request to the third party API, which returns another data object. (works)
Take that response object from the third party API and send that to my database. (works)
A script client-side pulls information from my database to populate the DOM. (not working)
Looking at the myriad of tutorials is tough and I'm following the guides I find exactly using some fine copy pasta, but I'm still stuck.
Here is the client side script firebaseData.js that I'm using to retrieve data from my database, I'm trying to get all the data at the endpoint [my database url]/user:
$(document).ready(function() {
// create object instance of my Firebase database
var myDBReference = new Firebase([my database url]);
console.log(myDBReference.child("user"))
});
And it returns this in the console client-side:
X {k: Ji, path: P, n: Ce, pc: false, then: undefined…}
And that's all I've been able to get so far. Below is my index.html where I link to firebase it's cdn and a bunch of other stuff I was just told to include in my project:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="top">
<h1>Just Trying to Make a Halo App</h1>
<form id="searchForm">
<input id="searchField" type="text"></input>
<input id="searchButton" type="submit" value="search"></input>
</form>
</div>
<div id="imageContainer">
<img id="emblem">
<img id="spartan">
</div>
<div id="dataContainer">
<h2></h2>
<p></p>
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "[my key value]",
authDomain: "[authDomain value]",
databaseURL: "[databaseURL value]",
storageBucket: "[storageBucket value",
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="request.js"></script>
<script type="text/javascript" src="firebaseData.js"></script>
</body>
</html>
In actuality the var config object has all the correct information generated from the firebase console- I wish that's all I would need to fix this! Please let me know if you require any more information I'd be happy to provide it and thanks for taking the time to check out my question.
Happy Saturday!
myDBReference.child("user") is just the reference to where the data is stored. To actually retrieve the data you will need to work with .on() or .once(). I strongly recommend you to take some time reading firebase documentation for retrieving data.
firebase.database().ref().child("user").once('value', function(snapshot) {
if(snapshot.value()){
//logs everything that is under /user
console.log(snapshot.value());
}
});
Keep in mind that if you have many users under /root/user, after retrieving the whole branch you will need to iterate over them with:
snapshot.forEach(function(childSnap){
console.log(childSnap.val());
});
Update:
Since I see you are not working with any SPA framework such as Angular (with angularfire), if you want to display the data that you are retrieving from firebase you will need to work setting an element id and than call document.getElementById() inside your callback to manipulate it.
<p id="username"></p>
document.getElementById("username").value = snapshot.val();
hi i am newbie to php and javascript and i am working on a project of Push Notification for my website which will push a notification to the user when a news related to specific category is published on my website i am using following code and curl with the help of google documentation
<html>
<head>
<title>Push Notification codelab</title>
<link rel="manifest" href="manifest.json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<h1>Push Notification codelab</h1>
<p>This page must be accessed using HTTPS or via localhost.</p>
<script src="js/main.js"></script>
<button id="send">Send</button>
<script>
$("#send").click(function() {
$.get("curl.php", function(data) {
console.log(data);
});
});
</script>
</body>
</html>
now i am wondering how to store a user's browser id or something so that it can send a notification to specific browser for specific category news.i am really looking forward to you guys to help me out for this problem.
there is nothing so-called as browser id, but you can generate a unique and store that in the _COOKIE, best combination of creating an unique id would be MD5(USER_AGENT . SALTMIX_STR . IPADDR), this combination will generate a unique id for each browser and you can store that in cookie using PHP eg. $_COOKIE["BROWSER_KEY"] = 'YOUR_UNIQUE_KEY'
EXAMPLE
<?php
$generateUniqueKey = md5($_SERVER['HTTP_USER_AGENT'].$_SERVER['REMOTE_ADDR']."!##zYp04)+");
$_COOKIE["BROWSER_KEY"] = $generateUniqueKey; //Sets a key
echo $_COOKIE["BROWSER_KEY"]; //retrieves the set key
?>
i'm trying to make cloudinary direct upload working but something in the documentation is missing... here are the steps i'm doing:
Controller:
/**
* MyaccountController
*
* #description :: Server-side logic for managing myaccounts
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'MyCloudName',
api_key: 'MyAPIKey',
api_secret: 'MyAPISecret'
});
Now this is my layout:
<!--SCRIPTS-->
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
<script type="text/javascript">
cloudinary.cloudinary_js_config();
var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
console.log(cloudinary_cors);
cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });
$(".photo").cloudinary_fileupload();
// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
</script>
My form:
<form action="" method="post" enctype="multipart/form-data" class="upload_form">
<div class="form-group">
<label>Foto de perfil</label>
<input type="file" name="photo" id="photo" class="photo">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Cargar</button>
</div>
</form>
I don't get why it isn't working, in the docs it says Cloudinary's jQuery plugin requires your cloud_name and additional configuration parameters to be available. Note: never expose your api_secret in public client side code.
To automatically set-up Cloudinary's configuration, include the following line in your view or layout:
cloudinary.cloudinary_js_config()
This is done...
Direct uploading from the browser is performed using XHR (Ajax XMLHttpRequest) CORS (Cross Origin Resource Sharing) requests. In order to support older browsers that do not support CORS, the jQuery plugin will gracefully degrade to an iframe based solution.
This solution requires placing cloudinary_cors.html in the static folder of your Node application. This file is available in the html folder of Cloudinary's Javascript library. The following code builds a URL of the local cloudinary_cors.html file:
Done...
Direct upload file tag
Embed a file input tag in your HTML pages using the image_upload_tag view helper method.
The following example adds a file input field to your form. Selecting or dragging a file to this input field will automatically initiate uploading from the browser to Cloudinary.
cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });
this is what i don't get... this is the uploader? how should i use it? and then i don't know what else to do, i'm using different docs to make it work but nothing helps... I hope anyone who did this can help me, thanks!
On controller initialize cloudinary as
var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });
and pass it to view and render it over there,
<%-uploader%>
then use jquery to get data:
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}
you can use this script to bind the data to some hidden fields inside your form and
cloudinary-fileupload will be generated when <%-uploader%> is rendered
In addition to CodeBean's answer, note that it seems that there are different ways of using Cloudinary that are mixed here (in the original code as was in question).
Controller
As far as it can be seen from here, the MyaccountController controller doesn't do a thing:
You're requiring "cloudinary" - presumably from npm install, which creates an instance of the jQueryless Cloudinary class.
The variable is local to the controller so has no effect on the rest of the code
View:
Only one of these lines is required (preferably the second one):
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
This method returns a string with the <script> tag. The string should be then embedded in the HTML code. It is a server side code.
Here, it does nothing.
cloudinary.cloudinary_js_config();
If you're using the jQuery File Upload code, you should refer to $.cloudinary. cloudinary was never defined in your layout.
Now you're creating a jQueryless instance, which you don't use afterwards.
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
Finally, there's an open-ended comment with the code you were supposed to use in the beginning of the whole script:
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
Regardless of CodeBean's response, you still need to config $.cloudinary.
I am required to remotely include into my appcelerator project, a javascript file available at a particular link, and use the function declared in that file to process some data.
What i would like to achieve is something like the following in html -
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod(localdata);
});
//use testVariable as necessary
</script>
//someMethod() is declared in remotely available Data.js
I am a newb at Appcelerator and im not really able to follow some of the threads i have come across, so some detailed help would be really appreciated. Thank you in advance.
Well according to me , you should first understand few points first :
You want to include a remote file hosted at some server , now as the Titanium code converts to native code at compile time , you cannot include Titanium API's from remote file.
If you want to include a remote file , then only option which I see is loading that file in webview.
Now coming to your problem , as you said that you want to fetch some data only from remote server by triggering some JS function from remote file. So following is what would I do :-
a/ Create a hidden webview in my main window with a EventListener of webview. Something like :
var webview = Titanium.UI.createWebView({url:'localHtmlFile.html'});
//event listener to handle the response from webview
Ti.App.addEventListener('fromWebView', function(e)
{
var testVariable = e.data;
});
b/ In localHtmlFile.html file :
<!DOCTYPE html>
<html>
<body>
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod();
//respond the fetch data to the main window via fireEvent
Ti.App.fireEvent( 'fromWebView', { data : testVariable } );
});
</script>
</body>
</html>
PS : This is just a logic to begin with , you have to edit code according to your requirements