I have two JS files.
First file contains a function obtains some data (particularly, my function gets state of AbstractJavaScriptComponent which is just a String, but I think it's not important).
And I want to send this data to another JS file (or make it accessible in that file in any way).
com_company_htmlcontent_web_screens_JsData = function() {
// this value is what I want to send
document.getElementById('myButton').value = this.getState().xhtml();
this.onStateChange = function() {
e.innerHTML = this.getState().xhtml();
alert("on State changed is called"); // but this inner function is not called
}
}
Are there any ways to make it possible?
Can you just send it with GET? Just pass the thata in URL that will switch you to the other file with js in it, then grab the data from it.
I don't really see the point of that action tbh. Can you state, what you want to archive?
If you just want to run some script that doing something with data given, and you dont want to change files you can send this data with Ajax.
Related
I'm trying to make a very barebones page that loads in two specific PDF documents and on page load would simply display one and then after a 60 second timelapse, would cycle over and show the other.
My issue, currently, is simply getting the PDFs into variables in the JS so that I can assign the time cycle to them.
How can I take the PDFs being sent from the controller and put them into JS variables in order to accomplish this properly?
public function getPDFDocs()
{
if(Storage::disk('test_docs')->exists('testFirstFile.pdf')){
$file1 = Storage::disk('test_docs')->get('testFirstFile.pdf');
}
if(Storage::disk('test_docs')->exists('testSecondFile.pdf')){
$file2 = Storage::disk('test_docs')->get('testSecondFile.pdf');
}
return view('test.index')
->with('firstFile', $file1)
->with('secondFile', $file2);
}
index.blade.php
#section('loadjs')
getPDFPages() {
let visible = [];
//visible.push ({pages here??})
}
#endsection
First of all, it seems you are getting the contents of file PDF, not their path. So it may not be efficient to transfer entire PDF data in your initial HTTP response.
Do this PDF files publicly accessible? If so; return their http url instead of pdfs' data.
After that; to inject a data from Laravel backend to JavaScript in a blade file; best approach is turn your data to json, send it to blade and write it as an HTML element's data- attribute, then in JavaScript read it from data- attribute and decode json to a JS object.
Here is an example;
public function getPDFDocs()
{
if(Storage::disk('test_docs')->exists('testFirstFile.pdf')){
// assuming this files publicly accessible and use url method
$files[1] = Storage::disk('test_docs')->url('testFirstFile.pdf');
}
if(Storage::disk('test_docs')->exists('testSecondFile.pdf')){
// assuming this files publicly accessible and use url method
$files[2] = Storage::disk('test_docs')->url('testSecondFile.pdf');
}
return view('test.index', ['files' => $files]);
}
In your blade;
<!-- write down your html here -->
<span id="filesdata" data-files="{{ json_encode($files) }}" ></span>
#section('loadjs')
var filesJson = document.getElementById('filesdata').getAttribute('data-files');
var files = JSON.parse(filesJson);
// now you have your files, lets check them
console.log(files);
getPDFPages() {
let visible = [];
//visible.push ({pages here??})
}
#endsection
And use PDF URLs to show them in client. Let the client request and get raw pdf data, don't try to return them in your initial response.
Hello I am wondering what is the common method of structuring ajax and php?
I am doing a website/application which have a lot of ajax calls. Also I do have a class in php I use for my main php code for keeping track of the user.
When I do ajax calls with jquery to smaller php files I need to re-declare my object I have in other files. I want the object that I have in my "main" php file. What is a good method to get the same object? Right now I am using jquery to pass the values from a div element (which comes from the object previously).
I feel this is not the best practice. I want to do it structured.
Example: I store the user session in User.
I have a button a user can click to get some information about his data. For this I have a jquery ajax call which sends and retrieves data for display. In that php file I do have to redo everything again, even if I include the class file, because the object is declared elsewhere.
Example. User can create lists in this kind of way.
I have the main index file which includes this file of new User. This type of stuff.
$user = new User();
if($_SESSION["user_connected"])
{
$user_profile = $twitter->getUserProfile();
$displayname = $user_profile->displayName;
}
$user->username = $displayname;
// Also user has an array of lists
jQuery
$('#createlistform').submit(function(event)
{
var newlistname = $('#listname').val();
var createlistRequest = $.ajax(
{
url: "ajax/ajax_add_list.php",
dataType: "html",
type: "POST",
data: {
listname: newlistname
}
}
);
the ajax_add_list file ajax is calling below. Now what I do to get this work is sending the username through as a data parameter to the php file from picking it up by $('#username').text() then set a new user with that username. It is not in the example now... but you get the point I think.
include_once("../user.class.php");
$theUser = new User();
if(class_exists('User'))
{
echo "yes class exists";
$newlistname = $_POST['listname'];
$theUser->createList($newlistname);
}
I wish I could get the same User object that was defined in my index file. I don't wanna create a new one. Although if this is how people do it when they have ajax I'll do it. I just want to know how you usually go by when dealing with different files here and there with javascript getting data from various places, while still maintaining a good structure with class and object.
I'm brand new to express and node, so please bear with me :D
i have an index.ejs file. I need to pass a string from my index.ejs file, to my viewActivity.ejs file. That string will then be used in the javascript portion of my viewActivity.ejs file. I'm not really sure how to go about this though. Is what I want to do even possible? Or do I have to do this via another file and not just directly view to view ?
here is my code. I want to pass the "stringToPass" to another view when a button is clicked.
function getPosts() {
var query = new Parse.Query(Post);
query.find({
success: function(results){
for (var i in results) {
var title = results[i].get("activityTitle");
var stringToPass = results[i].id
}
}, error: function(error) {
console.log("Query Error:"+error.message);
}
});
}
So far I've learned that express acts as the request handler. E.g.: pass you the file or anything based on the given request.
As soon as the request has been finished being handled, express would not know what the client does with the given result. Hence, once it sent the html file or json file or other request has been responded, all the remaining activities will be handled by a client side script that talks back to the express server in other form of requests. UPDATE: you can make this client side script to extract a DOM element and pass it onto your follow up request (when a user click a submit button, etc) that is handled by a different route.
I have a Post-form in my ejs-template that passes one object via Ajax/post without the page being reloaded. The handler in my app.js then saves the data into a data.json. All of this is working perfectly.
My only concern is that node seems to be requiring the json file only once, I have already tried using setInterval() which made no difference at all.
The desired functionality is that the server reloads the data.json after every other submit of my form. Furthermore I have an iframe where the loaded data is displayed. This should happen on the fly therefore without any refresh of the page.
For your above comment socket has nothing to do with it.
To answer your question , you can keep that JSON in memory , creating that object as a global object accessible by every part of code (files).
code example ->
app.js -
global_json = require('../path/myJSON'); //please note that I am not using var here to make it global
//Rest of the code
file1.js -
module.exports = fun(req, res) {
global_json.something = req.body.something;
//global_json accessible in every file
}
Alternative
If this is not the use case, then you can read and write file in every request (from post), although file reads/writes are slow but wont be the bottle neck in case of node.js server
function formpost(req, res) {
var data = req.body;
fs.writeFile('filename.json', JSON.stringify(data), cb);
}
//And same with reads
I'm writing a system in HTML5 and Javascript, using a webservice to get data in database.
I have just one page, the index.html, the other pages i load in a <div>
The thing is, i have one page to edit and add new users.
When a load this page for add new user, i do this:
$("#box-content").load("views/motorista_add.html");
But, i want send a parameter or something else, to tell to 'motorista_add.html' load data from webservice to edit an user. I've tried this:
$("#box-content").load("views/motorista_add.html?id=1");
And i try to get using this:
function getUrlVar(key) {
var re = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'gi');
var r = [], m;
while ((m = re.exec(document.location.search)) != null)
r.push(m[1]);
return r;
}
But don't work.
Have i an way to do this without use PHP?
This won't work. Suppose your are loading the motorista_add.html in a page index.html. Then the JS code, the function getUrlVar(), will execute on the page index.html. So document.location that the function will get won't be motorista_add.html but index.html.
So Yes. To do the stuff you are intending, you need server side language, like PHP. Now, on the server side, you get the id parameter via GET variable and use it to build up your motorista_add.php.
You can pass data this way:
$("#box-content").load("views/motorista_add.html", { id : 1 });
Note: The POST method is used if data is provided as an object (like the example above); otherwise, GET is assumed. More info: https://api.jquery.com/load/