I have a Vendor dropdown in my rails app. I am trying to fetch some data using ajax and currently the returned data is simply displayed in a div on the same page.
I am wondering if it is possible to pass the vendor id to the modal and it then display add the records associated with the vendor after making the ajax call?
here is my current coffeescript code to retrieve the data and display in the div.
$ ->
if $('body.bills.new').length > 0
$('body.bills.new #bill_vendor_id').change ->
$.ajax
url: '/purchase_orders/?vendor_id='+ $('body.bills.new #bill_vendor_id option:selected').val()
success: (data) ->
alert data
$('#data').html data
Of course it is!
You can for example add the class of the dropdown you want to show in the #bill_vendor_id data.
For example:
<input type="text" id="bill_vendor_id" data-dropdown-class="something" ... />
And in the js you find the class and use it to hit the dropdown:
...
$.ajax
url: '/purchase_orders/?vendor_id='+ $('body.bills.new #bill_vendor_id option:selected').val()
success: (data) ->
div_class = $(this).data('dropdown-class')
$('.' + div_class).html data
EDIT
Okay. Yes, it depends. Do you want to change all the html or append some html?
You can either use .html data or .append data
And remember to show the modal, if you're not already doing this.
Related
I have a ColdFusion page that has, among other things, forms that are built using DataTables.
This page manages a handful of things (documents, categories, doctypes, etc) and each tab has CRUD functionality going on.
Initially, on each tab, it simply displays the current set of (fill in the blank) but if you click the create/update links/icons, the form to do so pops up. Some of the form fields are actually lists of the others. For example, if I want to upload a new document, one of the form fields is the category for that document.
I get the information for that form field by using cfinvoke to a get function in a cfc, which returns as a query and I loop through, populating the dropdown.
My problem is this: If I go and create a new category on the category tab I need the dropdown of category choices to update over on the new document form. However, it's already been populated and won't recheck that info until I refresh the page and thus won't show my new category in the dropdown.
The way I see it, I need to reinvoke the CFC method, repopulating the query variable and then refresh the form to make it loop through the new data and fully populate the dropdown.
I've tried to call the cfinvoke and reset the form from within the callbacks section of the DTHelper() but that (kind of as expected) didn't work.
How would I force the refreshing of the data, and subsequently, the form when this all takes place using AJAX and the actual page never reloads? Or should I just be forcing a page reload in this situation? (which works, I tried that, but it's a page refresh)
So, my boss figured it out. You have to use drawCallback().
In my example it worked like so. First, give all your major category select boxes a class:
<select name="majorCategoryID" class="major-category-select">
...
</select>
Then modify the DataTable options for major category:
majorcat_dt = $("#majorcat-dt").DataTable({
ajax: "blah"
columns: [{ blah }],
drawCallback: function() {
/* remove all options from select boxes */
$(".major-category-select option").remove();
/* this is the crazy DataTables api call to get rows */
this.api().rows().data().each(function(row) {
$(".major-category-select").append("<option value='"+row.id+"'>"+row.name+"</option>");
});
}
});
This also removed the need for the cfinvoke in the first place since this also populates the dropdowns on page load as well.
Here is how I did something like that once.
javascript:
var minutes = 10;
var refreshInterval = minutes * 60 * 1000; // to get milliseconds
jQuery.fn.populateCensusDiv = function() {
$.ajax({
type:"POST",
url:"censusData.cfc?method=getCensusData",
cache:false,
success: function(msg) {
$("#census").html(msg);
}
});
setTimeout(function() {
$("#census").populateCensusDiv();
}, refreshInterval);
return this;
ColdFusion function
<cffunction name="getCensusData" access="remote" returntype="string"
//deleted code
returnFormat = "plain">
<cfscript>
var returnString = "";
</cfscript>
more code
<cfsavecontent variable="returnString">
more code
</cfsavecontent>
<cfreturn returnString>
</cffunction>
My context was an html table that got refreshed every 10 minutes. You can adapt it for your own needs.
I need to open a pop up when i click on the link 'Click here to Edit'.
I tried below code
#http.route(['/ftp_server/web/edit_dir/'], type='http', auth="public", website=True)
def edit_dir(self, **kwargs):
cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
print'ftp_server_kwargs', kwargs
values = {}
return request.website.render("website.contentMenu.dialog.edit", values)
But getting an error:
ValueError: External ID not found in the system: website.contentMenu.dialog.edit
I am trying like Edit Menu in website.
You need your popup to have a template with the id "edit" and that will only work if that popup is part of the module "website.contentMenu.dialog".
The form is:
request.website.render("modulename.templateid", {
'data_sent_to_template': data_generated_in_controller
}
<template id="templateid">
//pop up html
</template>
http://www.odoo.com/documentation/9.0/howtos/website.html#templates
Generally, in this kind of case,I would prefer to build the popup in html in the page, use jquery to show and hide and Ajax to post it to the controller and get data from it without rendering the data with python.
I'm using jquery-ui tab example to add extra tabs. I changed that code to be able to add tabs that load a form via Ajax. I was able to create that just changing these:
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
//ajaxOptions: a
});
So I changed the tabTemplate to load the same Form always.
My problem is that I'm not sure how to retrieve, either to tell that every tag from that form use jquery-ui stuff, like buttons, datepickers, etc.
In a regular form I would do something like:
$("#btnRevisar").button()
But when we talk about form load via Ajax it is different.
and also, how can I try to differ one form from other one, if they are all named with the same name, is it possible?
Thanks guys
Carlos.
Within the tabs docs page, tab titled "Events" there is a "load" event. The "ui" argument gives you access to an object that includes the current panel that is loaded. If you are using same ID on forms, beware that ID's must be unique in a page.
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
/* add new option for load event*/
load: function( event, ui){
var $currTabContentPanel=$(ui.panel);
/* only look in currently loaded content for formClass*/
$currTabContentPanel.find('.formClass').doSomething()
}
});
I have a simple form with three textboxes and a <canvas> on the same page and I have to validate these three fields and then get the values (if validated) sent to a javascript function to draw a picture and some text inside the <canvas> element. The form and textboxes wouldn't have to disappear after the values were submitted because the user could try out different results with different values. I've done other forms before but never tried using Ajax. I know I could use a client-side validation and get the textbox values with jQuery but I have more server-side code running that would make use of these three values. How can I do this?
in your controller, create a method to handle the results. I assume that this is for logging only, and does not need to actually return data.
public useResults(string value1, string value2)
{
// ... Do something with the results
return Json(true);
}
In your view, work out a way to construct the url to the above action. Perhaps in a hidden field;
#Html.Hidden("useResultsUrl", Url.Action("useResults", "controllerName"))
Then in your javascript, attach a click event to the button, as you probably have already (to trigger your javascript task) and add in an ajax call.
Note that the following uses JQuery, but you could use microsoft AJAX if you preferred;
$(function () {
$("#button").click(function() {
$.ajax({
url: $("input[name='useResultsUrl']").val(), // Get the url from the hidden field
type: "POST",
dataType: "JSON",
data: $("input[type='text']").serialize() // Get the value of the text inputs and serialise them.
});
});
// ... do other stuff
});
Your View can make an ajax call to the server using JQuery - either using JQuery.post
or JQuery.ajax - you give the Url of the controller action to the JQuery method, and it will handle the AJAX call for you.
Then, in your controller action, you return a JsonResult - which serialize the data for you into JSON format:
e.g. return Json( model );
Finally, implement a success function in the JQuery Ajax call in your view - this wil have the data returned by the controller available for you to do whatever you want with.
I have a <table> in a web page that I populate using JavaScript code like this:
var cellBarcode = row.insertCell(1);
var textNode = document.createTextNode(barcode);
cellBarcode.appendChild(textNode);
var cellItemName = row.insertCell(2);
var textNode = document.createTextNode(itemName);
cellItemName.appendChild(textNode);
I need to save its data to my database... So I need to know how I can submit it to php... Is it possible...? If yes, please provide some sample codes that are easy to understand for a beginner like me... thanks...
Yes, you can submit this information to a server-side script, but not without extra JavaScript code.
The extra JavaScript code would collect the information in the table (either from the DOM you've built, or by accessing the same data you used when building the table) into a string, which can then be sent to the server using one of standard ways.
Since you've used the term "submit", I'm assuming you want to send the table's data as part of an HTML <form> submission, you can put the generated string in an <input type="hidden"> element.