I don't know any better way to ask this question than to give my situation.
I have a reader application that needs to be made, on the page it will have the Table of Contents on the left side and the actual content of the book on right. The TOC content shows chapters and sections within the chapter. The content on the right will only shows one of those sections at a time, no preloading the whole book. When you click on the section in the TOC, makes an API call to a separate server that holds all the book data and returns the HTML to be displayed in the content section.
I want to know if there is a way to make the application to use both unobtrusive javascript and active resource. Active resource would handle the interaction between the Rails Application and the server that holds the book content. The unobtrusive javascript would be the controller between the table of contents and the content on the right.
I guess what I'm wondering most of all, beyond just its possibility, is if I can integrate this is such a way that I don't need to make unnecessary api calls. Currently, I can't figure out how this would work without it making an api call to rails then making another api call to the book content provider.
Thanks for your help in advance!
#tab
Edit:
The Content model would be used to talk to the external API using ActiveResource. UJS would be used to call that model and display that returned content on the page. So the flow would sort of be like, click link myapp.com/book.js. This would go to the controller book#index that would initialize a variable that gets its data from the content model. The content model would use ActiveResource to make an API call to the external content server and would return html. The html that would be returned would be filtered back out and displayed on the page.
There will certainly be some caching, but the page itself will also need to be dynamic enough to allow editing of the content.
I was able to make a test program that used unobtrusive javascript to call a model using an API call.
It works the exact same as any other unobtrusive javascript setup, but instead the controller makes a call to the activeresource model. It acts no differently, I suppose I shouldn't be surprised.
Related
I am developing a web page in Vue with Laravel as the backend.
I have page A which requires script A after the page is loaded.
Now, I navigate to page B which also requires script A after the page is loaded.
Now script A was getting called in a component which is there in both pages.
what script A does is, it looks for a div with ID some_id and and append some HTML to it. Now, when I navigate to page B id no longer exists on the page but when I come back to the page A that script should be re-executed.
I want to make it work without making another call to the server. How can I achieve that ?
Please don't do this ! What you're describing is the essence of spaghetti. In an ideal world, components that are shared between pages shouldn't depend on things in the host page, ids for example. They should be self contained and get called. In this ideal world, scripts don't append HTML. You should try and keep a clear separation between code and markup. In Vue, this means having all your markup in templates.
Then, on the question of avoiding the second network request, is the duplicate request for the script, or is it a request by the script for some data? Can you achieve what you want by setting caching headers on the resource? If not, think about using a containing iframe to preserve some state between page loads.
When NOT using AngularJS, I create a web site that responds to /mysite/users . It returns an HTML page with user records filled within a table-like display.
I wish to try an AngularJS approach. I somehow load the web page, and that page's onload() calls /mysite/users, which returns merely a JSON list of users.
The "somehow" part is what bothers me. So far I'm reduced to first calling /mysite/showUsers. This downloads the HTML page which then itself calls /mysite/users.
Likewise, when editing with AngularJS I think I'll have to call /mysite/userEdit/1 which on load calls /mysite/user/1.
I think I'm missing something. Can I get a clue?
Thanks,
Jerome.
As you've noted, the AngularJS approach is not to load pre-rendered HTML from the server, but instead load a list of JSON data and rely on AngularJS directives to populate the DOM client-side.
A concrete example in your case would be a page which loads an Angular module that fetches a JSON list of users from /api/users, and leverages the ng-repeat directive to populate the data into the page right in the visitor's browser. Here's a JSFiddle I found that illustrates how you'd accomplish this.
It's all a matter of where the data gets inserted into the HTML; It can happen on the server-side or the client-side, and Angular favors the latter. (This is not to say you can't load pre-rendered HTML from the server, but you would be working against the way AngularJS is designed to be used.)
I've had trouble describing what I want to have happen. Perhaps it is because it goes against the grain of Angular.
My server responds to /user/1 with the JSON for user #1. For the browser to deal with it, I must have a web page already there that can display this JSON. Chicken and egg style, how do I get this edit web page into the browser? My classic example is using /user to list the users and having a link on each user to edit it, such as "/SOMETHING/1".
In the meantime, I've decided to go with /user/edit/1. That will cause the server to render an HTML file, using server-side scripting to insert a phrase that on window.onload() fills the skeleton HTML with the result of /user/1.
Thanks, Collin, for replying.
I'm starting to build a UserControl that will live on some SharePoint 2007 PageLayouts. The UserControl's purpose is to display a map of several locations based on the name of the page. So what it needs to do is take the page name, go query a SharePoint list for the relevant collection of geo coordinates, then load them on the map. I've never really done much client side scripting beyond simple modification of elements and academic jquery AJAX calls. So I'm trying to understand what the common practices are for passing data around.
I've seen a lot of stuff online talking about AJAX calls to page methods, which is out because this is a user control. The alternative looks to be ajax calls to a web service. I've built web services before but for consumption by .NET clients. Is this still the way you set up a .net web service to be called by scripts? What about security? What if I only want my page or my site calling the web service and not the general public?
In this case, I'm not sure a service would even be necessary. Can I just retrieve the data and put it on the page during the initial request? Something like json serializing the coordinate collection in the code behind and writing it to a hidden field for javascript to pick up?
There are several ways of passing values from an usercontrol to javascript.
ScriptControl:
Allows you to include a client behavior for your web control. See some Links below:
Creating Script Controls
ASP.NET: Create AJAX Server Controls using the ScriptControl base class
Asp.Net Ajax ScriptControl Tutorial
RegisterStartupScript and RegisterClientScriptBlock:
Allows you to include client side script blocks on the page. See some Links below:
Working with Client-Side Script
Injecting Client-Side Script from an ASP.NET Server Control
HtmlGenericControl:
Nothing stops you from creating a script tag dinamically and inserting all your javascript logic into the InnerHtml property. It could be done during the initial request.
Example:
HtmlGenericControl script = new HtmlGenericControl("script");
script.ID = "script";
script.Attributes.Add("type", "text/javascript");
script.InnerHtml = "alert('Hey');";
//Insert the script into some asp:Panel
panel.Controls.Add(script);
Reading this 4 years later, I can tell my past self this:
Yes, just include the json on the page, hidden for JS to pick up. But be aware that this increases the size of your response that must be downloaded by the client browser. Not only does this take more time, but it uses up more of a mobile user's expensive data. If there is a lot of data and some may not be used, retrieving the data, as needed, from a web service may be a better option.
REST services are a common solution for responding to AJAX requests. There's not much you can do to secure your data from anonymous users if you want to allow client side scripts from anonymous users to get at it.
I have a wordpress site, and i'm not a php developer and not very eager to start either so I'm avoiding it like the plague, but I do have a requirement that requires a little bit of extra coding. I need to:
go to a different website,
download that page,
check for a certain phrase,
if phrase exists, extract a link from that page
and if link is returned I need to show that link on my wordpress site.
Currently, I have an asp.net page that does this and i'm hosting that page in an iframe on my wordpress site. but i'd like to do it without an iframe.
Question is, is there anyway for javascript to go to a different page (my asp.net page) and get a parameter (link) from it. If link is provided i will show certain content on wordpress site.
Or can javascript download a text file from the server? problem with that is i need a trigger to update the text file.
Any advice is appreciated.
Thanks.
What you should understand is that by "avoiding [PHP] like the plague" you're inadvertently avoiding the proper way of doing things. Javascript is a client-side language, and PHP is a server-side language. By asserting that you only want the load on the client's end (the kind of logic involved in what you want to do isn't exactly lightweight), you can potentially end up with a VERY slow webpage.
Not to mention, this type of situation is analogous to using a hammer to do a backhoe's job.
Either way, to answer your question, yes. You can use the jQuery Load method in tandem with Javascript's Match method.
What you should TRY to do, however, is make a CURL request using PHP, and then cache the page on your server. By doing this, you will limit the number of calls to a given page, and optimize load times.
Please consider the second option, even as an attempt in good practice. Good luck.
Use ajax and connect to a different page (on your server) which is written in server-sided language (like asp.net, as you said), that connects to the remote website.
More about Ajax
I read lots of post here, but don't get specific answer.
I have live server on which I have my web services work properly.
now, I want to create one simple html page through which I call that web service.
with javascript this is possible but what is exact.
I repeat again only html and javascript through which I want to call that web service.
you can use jquery to load the data from webservice, but you might need to include jquery js file and your browser(IE) might prompt for security violation and you might need to click yes.