cakePHP : requestAction and JS Helper - javascript

I use requestAction with parameter return $this->requestAction (....,array('return');
request action in plugin . plugin render view has $js->submit('Save',array('updade'=>'#fsjkfsj');
but it dont show any javascript when i view source code. I tested with code $js->alert('ksldjflkjs'); but it dont , too
how make requestAction width JS Helper or it is impossible ?

are you on cake 1.3 using the new $js engine helper? if so, i remember reading about bueffering and needing to explicitly write the buffer to the view. This is what the manual says:
It is recommended that you place $js->writeBuffer() at the bottom of your layout file above the tag. This will allow all scripts generated in layout elements to be output in one place. It should be noted that buffered scripts are handled separately from included script files.
the request action method might be buffering your scripts for the same reason. try this out and let the community know if it is the case seeing how the manual does not mention it.
Good luck!
btw, here is the link where i found the reference http://book.cakephp.org/view/1596/Javascript-engine-usage

in this case, I use $this->Js->writeBuffer() in file view.ctp of plugin . It'll output javascript buffered, but dont in one place , it in bottom file view.cpt of requestAction.

Related

Duplicate an HTML file (and its content) with a different name in Javascript

I have an HTML file with some Javascript and css applied on.
I would like to duplicate that file, make like file1.html, file2.html, file3.html,...
All of that using Javascript, Jquery or something like that !
The idea is to create a different page (from that kind of template) that will be printed afterwards with different data in it (from a XML file).
I hope it is possible !
Feel free to ask more precision if you want !
Thank you all by advance
Note: I do not want to copy the content only but the entire file.
Edit: I Know I should use server-side language, I just don't have the option ):
There are a couple ways you could go about implementing something similar to what you are describing. Which implementation you should use would depend on exactly what your goals are.
First of all, I would recommend some sort of template system such as VueJS, AngularJS or React. However, given that you say you don't have the option of using a server side language, I suspect you won't have the option to implement one of these systems.
My next suggestion, would be to build your own 'templating system'. A simple implementation that may suit your needs could be something mirroring the following:
In your primary file (root file) which you want to route or copy the other files through to, you could use JS to include the correct HTML files. For example, you could have JS conditionally load a file depending on certain circumstances by putting something like the following after a conditional statement:
Note that while doing this could optimize your server's data usage (as it would only serve required files and not everything all the time), it would also probably increase loading times. Your site would need to wait for the additional HTTP request to come through and for whatever requested content to load & render on the client. While this sounds very slow it has the potential of not being that bad if you don't have too many discrete requests, and none of your code is unusually large or computationally expensive.
If using vanilla JS, the following snippet will illustrate the above:
In a script that comes loaded with your routing file:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
Note a couple of things about the above code. If you are testing on your computer (ie opening your html file on a browser, with a path like file://__) without a local server, you will get some sort of cross origin request error when trying to make an XML request. To bypass this error, either test your code on an actual server (not ideal constantly pushing code, I know) or, preferably, set up a local testing server. If this is something you would want to explore, its not that difficult to do, let me know and I'd be happy to walk you through the process.
Alternately, you could implement the above loading system with jQuery and the .load() function. http://api.jquery.com/load/
If none of the above solutions work for you, let me know more specifically what it is that you need, and I'll be happy to give a more useful/ relevant answer!

How to have an action respond to javascript in PHP?

I'm currently working with a Kohana project and am trying to implement endless scrolling. I'm trying to use the method Ryan Bates shows in the following Ruby on Rails video:
https://youtu.be/PQX2fgB6y10?t=2m29s
At 3:21 he says the action won't respond to javascript and proceeds to create a js.erb file. What is the PHP equivalent to this step going forward? Where would I place the php file equivalent to his index.js.erb?
To copy what he did, just create a PHP file that generates Javascript with the content you want to append like he did with render(). You can call this file whatever you want, but following his convention, it would be index.js.php.
So for example:
$('#products').append('<?php render_elements(); ?>');
$('#pagination').replaceWith('<?php render_pagination(); ?>');
Since you're already this far in his tutorial, I assume that you have the code to render the elements you want to display already.
It may be easier however to use other AJAX methods to achieve the same thing though.

How to include HTML/text file without ajax call or server side language

Background information :
A tool simulates IE behavior, instead of HTML for browser, it uses a special object which contains html segment<![CDATA[ HTML Here or JS here ]]>. The tool disabled the ajax call; however, the activeX works on that tool. In other words, HTML display in browser = special object display. No server side language (i.e. php) allowed.
Problem :
The object developed for that tool contains everything(html+css+js) in one single file. Then it makes developer difficult to manage changes. Currently, when I develop, I copied the HTML from <![CDATA[ All HTML or JS here ]]>; after I modified it , I copied the html file back to <![CDATA[ HTML Here or JS here ]]>. I want the object is more organized, for example: in the html segment of the object, just put something like <![CDATA[<javascript>require a.html<javascript> ]]> , then the content in a.html will be automatically placed in the object. Can you suggest any solution or any library for this problem?
ps: I didn't use requirejs before, it seems requirejs uses ajax call to include text file, is it possible that requirejs uses local path to include a file?
Thank you.
Partial solution to my problem: I used activeX to read the entire file, and used jQuery to set the file content to some html element. so the js will look like:
<![CDATA[
<script>var k = readfile(getAbsolutePath()+"\\a.html");
jQuery("#display").html(k);<script> ]]>
I think this solution is for my tool only; To make it work, some requirements:
1. can get the absolute path of the text/html file.
2. activeX works.
OK, now that I understood your problem.
Use
<iframe src="another_file.html">
That is probably the only way to load multiple html files without Ajax or PHP, as far as I know.
Per comment from prytsh, using an embed call should do the trick in HTML5:
You can try this by using jquery
//use this line in jquery
$("#id").load("trackingCode.html");

How/when/where to include external javascript

I'm looking for some advice on the best way to hold my JavaScript (jQuery) functions.
I am developing in MVC/razor and therefore have a layout page. I include my jQuery library and an external JavaScript file in here so it's available in every single page.
This is working well, but I am now becoming very aware of the fact that I am adding almost 300 lines of JS to EVERY page, where maybe half of that is used in any one of these pages.
One function is not in the external file and instead sits inside the HTML because I need to use variables set in my razor code.
I have a couple of questions around this arrangement:
Is placing JS inside the HTML generally acceptable when variables set using razor are used? There does not appear to be a clean way of passing a variable into an external js file
Should I split my functions down in to individual JS files and just include what is needed for each page in the site?
If I were to split them into multiple files, how would that work with jQuery's (document).ready ? Do I need to use that if all the JavaScript I am including is to be used?
I'm sure this will more a matter of opinion than a black and white answer, but I want to consider all my options before moving on. Even though it works fine as is, I can't help but feel there is a better/cleaner way.
Remember once a user lands on your homepage and loads the javascript file it will be cached in their browser so subsequent pages will not download the Javascript again.
I would definitely keep the js separate, you could have a snippet on each page that initialise the JS that that particurlar view needs. Put something like the below in the views that need to run JS
$(document).ready(function() {
mysite.mypage();
});
Then the function mysite.mypage() can be defined in the external JS file.
300 lines isnt the end of the world, I would say its probably too early to be worryign about optimisation.
You could always look at minifying that JS file to decrease the size. A quick and easy way to do this is here:
http://www.minifyjavascript.com/
Have you ever heard of require.js? http://requirejs.org/ I find it really useful.
It's a module loader so you are able to split all of your JS code into individual files and load only the ones you need on each page.
I don't know about passing a variable to an external JS file, I don't think its possible / the 'right' way.
You can make each external JS file into a function that accepts and returns parameters. Then in the page you need to use it:
- include the file dependancy
- call the function
Thats what I do, seems like your 2nd suggestion.
for the $(document.ready) question its really up to you. You don't have to use it but its useful for some things , check out this overview:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Help me to understand <script src="some.js?param1=one;param2=two" />

I observed chunks like below sometimes on web pages. So i am curious to know what this really does? or why its written in such a way?
<script src="somefile.js?param1=one&param2=two" />
i can only make out following few intentions behind it
Its not page URL (i mean .aspx/.php/.jsp etc.) so its not hacking kind of code where user can add code like this to pass data without getting users attention as its tag which does not render on UI OR implementing old type of AJAX alternative
This kind of URL param are useful if user do not wish the JS file (any other resource like image) to get cached. This can be quick way to manage caching
But i am unable to figure out following
Looks like page URL parameters but are these parameters anyway readable in JavaScript file and have some additional utility?
Do these parameters have any extra role to play here ?
What are the other possible practical scenarios where code like this can be/is used?
So please provide some inputs related with the same
Thanks,
Running Non-JS Code within .js Extensions
In cases like this, that source .js file might (given proper server-configurations) actually have PHP/.NET code within it, which can read those appended values.
As you said, Avoiding Cache...
Additionally, people will at times append a random string at the end of their referenced elements to avoid loading cached data.
The URL having '.js' means nothing. It could still be handled by a server-side script like an ASP or PHP.
Either the javascript file is not static (it is generated by the server based on the parameters in its querystring)
OR
In the JavaScript file itself, you can have it check its own querystring parameters (not just that of the page, but that of the javascript source url).
OR
(This doesn't exactly match your scenario, but) you can also add parameters at the end of image and script urls as a way of versioning. The version with the url="somescript.js?V=3" will be cached by the user until the page then changes and the url is not="somescript.js?V=4". The file will be replaced by the version on the server no matter what the browser setting may be.
My guess (without looking at this specific case) is that the javascript file is reading its own querystring. I have done this, and its very helpful.
Looks like page URL parameters but are these parameters anyway readable in JavaScript file and have some additional utility?
Yes you can read them in JavaScript, Scriptaculous uses that approach for loading modules, eg:
<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop">
</script>
Do these parameters have any extra role to play here ?
What are the other possible practical scenarios where code like this can be/is used?
That can be also used for server-side script joining and minifying, of course using some url rewriting technique to have the .js extension, and as you say, it's a common technique to add timestamp parameters to break the browser cache.
It can be used for three different reasons:
1) To generate the JavaScript file in the server depending on the parameters;
2) To avoid caching;
3) To pass parameters to JavaScript itself
An example of this in practice would be a server side handler for somefile.js that uses the parameters (names of other scripts) to determine which scripts are actually required and combine/minify them, returning them as a single somefile.js script file.

Categories

Resources