I'm the midst of creating a form inside a dialog window with jQuery.
I'm currently loading a partial view with the jQuery load() function, and then adding the view into a jQuery UI dialog box. The partial view contains an html form which also contains a validation script in the markup.
This is how I load the view and instantiate the dialog window:
$('<div/>').load('/controller/view #targetDiv').dialog();
Unfortunately the load() function discards the script inside the partial view. :(
The validation script is important since it makes ajax calls to the form controller on an 'input blur' event, and returns the server side form-validation response. This means that the validation script must run continuously on the form inside the dialog.
The problem is that I load the view but there is no javascript.
Are there any solutions to this problem?
you can save the javascript codes in a separate .js file and use getScript() method.
Load a JavaScript file from the server using a GET HTTP request, then execute it.
Related
I am trying to build this :
There is a button, and if the button is clicked, it sends some request to django server and server returns some form. After that, put the form into a div.
So, my idea is
make a event handling function to handle button click event
put AJAX operation into the event handling function to send request and put a form into a div
Write view to receive request and return form that fits with request
the AJAX operation at Step 2 put returned form into the div
But the problem is, at step 3, returning form.
The form is
form = EventForm({'date':date(year,month,day)})
Which is a ModelForm based on the model Event.
Because Javascript cannot understand Django form object, I need something to parse it into a javascript object, like <div> node, or just some HTML string, but I don't know :(
I know there is {{ form.as_p }} for template, but I wonder whether there is such functions for python view codes.
With ajax, you won't be able to use django forms.
You would have to hand-craft the html form, and then use ajax to send the request to django, which would respond with a json object (most likely) which you would, again using some javascript running on the browser, be able to render on your html.
I want to load a bootstrap modal. The contents of that modal are dynamic based on onclick function on button.For this ,onclick of button, javascript function with one parameter is called.
Function sets $('#modalId').show();
modal should contain content fetched from database based on parameter passed to javascript funtion. So for this I want to transfer the passed parameter from js to jsp of modal body. How to access that parameter which was passed on click.
The jsp code is evaluated on server side before resulting html code is sent to the browser, while js code is evaluated on client side in the browser. So there is no way to pass parameters to jsp code directly.
But of course there is a way to solve your problem. You need to make an ajax request in your javascript code when user clicks on that button. You can pass the parameter in your ajax request which might simply load another jsp which can access the request parameters, perform any database queries you like and return some html.
On client side (in javascript code) you simply need to place the returned html code in your modal dialog or wherever you like and display the results.
I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.
I haven't worked in server side in a while and any help is really appreciated.
I am trying to create a small application that has an index.jsp page. The page has a button which when invoked calls a public SaaS API that does something in an external server with no changes to the view in the browser (still has index.jsp loaded).When the external job is done, my callback servlet is called by the service.
Now I need to update a component of the JSP when the callback servlet is called. So, I am doing a request.forward to the already loaded index.jsp with an attribute which when found in the JSP will invoke a javascript function.
The problem is I am unable to invoke the javascript function at all. I tried document.onload or window.load or document.ready etc. and none of these functions are getting called upon the request.forward to the index.jsp, since it is already loaded.
What is the best solution for this? Any help is really appreciated.
You should model your interactions in such a way that on your button click, send the request to a servlet. From the servlet call the external saas api.
When it completes return the response to the servlet(assuming you want a blocking model). Put the data in the request and forward it to the jsp.
Here we have a <div id="content"> and inside it AJAX loads data from the server. We have preloaded JS scripts in the whole file.
Some of the server's AJAX answers are whole forms. That forms have the same ids, but different structures. What is needed is to pick the data from freshly baked forms came from the server via AJAX, using JavaScript and create a kinda queryString to send its data again to the server via AJAX itself.
What has been tried:
I put a code which is getting data from the form on the page using JS. It works great when the form is a static part of the page and i loaded within the initial DOM loading, but, after AJAX re-loading the real DOM is differ than that in the cache, which has been initially loaded with the page.
I tried to put JS code into the answer from the server with the form. But, it does not work as well. Even simple alert('Hello!') does not work.
I am new in AJAX so, please, do not judge me with all the severity.
Thanks!
If your issue is picking up only the latest baked forms, you can try the following approach:-
In each ajax call of the page, before setting the response content to the desired div, find all objects having class name called 'lastUpdated' (or any other unique class name that you can come up with) and remove all the lastUpdated class associations using the jQuery code
$('.lastUpdated').removeClass("lastUpdated");
Now set the response to the desired div and add the class 'lastUpdated' to this div alone.
Thus at any point of time,
$('.lastUpdated')
will help you pick the data from freshly baked forms came from the server