I am creating an MVC app. The user selects a category from a select list (which is populated by one model, companies). In response, a second select list needs to be updated based on the value selected in the first list (from an different model, applications).
'applications' is too large to load all of the data every time the view is loaded, so it has to be filtered.
I've tried recalling the view with the selected value in 'companies' as a parameter which works just fine to get the proper data from 'applications', but I need a javascript script to run on page reload and the browser won't rerun scripts on reload (or even different scripts).
How can I request the filtered data without reloading the page, OR how can I force the browser to run a script on page reload? Thanks
note: I've tried suggestions I found indicating that removing the script block (or the innerHTML) and rewriting it will fix the script-not-running issue, but none of those suggestions worked.
jQuery AJAX should help you here. Say your select is #target so do:
$('#target').change(function () {
$.getJSON(url, { id: $(this).prop('selectedIndex') })
.done(function () { ... });
});
Related
I want to create a table in jQuery mobile. The table will be updated from mysql. Please tell me the procedure to create and update the table in jQuery mobile.I am completely new to the platform.
You should use AJAX to update your table without refreshing the page. From your jquery/html page you do an ajax call to update the table after you add new data to it (I assume this is why you need to update).
It works something like this:
Have a separate script to DISPLAY your table
Use JQUERY AJAX to display the table for you on page load
$(document).on("pageinit", "#visualUnitList", function () {
LoadVisualUnitTable();
});
Write the function to display the table
function LoadVisualUnitTable() {
$.post('unit_DisplayVisualTable.php', 'unitSearchBox=<?php echo $_POST ['unitSearchBox'];?>, function(data) {
$("#visualUnitListTable-popup-popup").remove(); //<!-- remove "select columns to display" popup from dom before reloading - fix for button not working after reload -->
$("#visualUnitTable").html(data).enhanceWithin();//<!-- load data to div -->
});
return false;
};
This will make your table appear on the screen. If you want to update it/edit the data in the table you need to write more ajax to POST the data to a separate php(?) script. After you have posted your data you will simply run LoadVisualUnitTable() as I have in point 1. within your AJAX.
I hope this can help.
p.s. For any future questions you might ask, it's much easier to write a response if you give more details about what you are trying to achieve, and even better if you can post existing code that you've been working on.
In my view, I have this form with the select function:
<form id="form_id">
<%= form.select('id','name', #document.informations.find(:all).collect {|u| [u.name] },
options={},{:onChange => 'submit()'}) -%>
</form>
How can I use the selected name in the rest of my view ?
I saw this in other topics:
$('#id_name').val();
But it didn't work for me, it says:
`$(' is not allowed as a global variable name
You're getting that particular error because the $('#id_name').val() is JavaScript, not Ruby, but you've put it within erb tags.
When you visit a page /documents/3 in your browser, Rails will run the code in your controller, and send back some HTML to your browser. That HTML can load CSS and JavaScript, but that's run after your Ruby program has finished - and may not be run at all, depending on the browser. How you use the name of the selected item in your view depends on what you're doing with it.
If you're storing it in the database somewhere, then you should start by getting this working just in Ruby. For instance, if your #document has a selected_informations attribute, you could use that in the rest of your page, and pass it to your form.select to pre-select it in the page. The Rails Guides documentation has more info on this.
If you're not storing it in the database, then you can get the value of your box out with JavaScript whenever it changes. Here's some sample code that prints out the name of the selected item to the JavaScript console whenever a <select> box gets changed. I've included it in <script> tags so you can drop it straight into your view for testing, but you should put it into a dedicated JavaScript file if you adapt it for your project.
<script>
$('select').on('change', function(ev) {
var selected_item = $(ev.currentTarget).val();
console.log("Your select value is " + selected_item);
});
</script>
One final thing to note is that your existing form.select tag is set up to call a method submit() whenever its value gets changed. submit is just a name, so that function could do anything... but I'd guess it's submitting the form whenever an item is selected. This sends a request to your Rails server and refreshes the page, so beware - if you're using an event listener on change to update the current page, you won't see those changes on the new, refreshed page (and should use a server-side solution instead).
I'm trying to build some custom navigation in a dynamic application, all screens are obtained from the server and thus I registered the pagebeforechange event and execute my own function.
Everything works as I expected except when I refresh the data I destroy the dynamic pages and try to call the page I was in again using the page Id, but this second time, although my code creates the HTML for the page, jQuery Mobile throws an "c.data("page") is undefined" error.
I bind the pagebeforechange event:
$(document).bind('pagebeforechange', function(e, data) {
if(typeof data.toPage === 'string') {
appobj.dynamicPage(data.toPage, data.options);
}
});
Then in the dynamicPage method I create the HTML for my page based on Underscore.js templates and let jQuery continue changing the page:
$.get('templates/page.tpl.html', function (data) {
html = _.template(data, { /* several template parameters */});
});
page = $(html);
page.appendTo('body').page();
The idea was to use as much of jQM as possible since I'm creating the destination page and injecting it into the DOM.
When I need to update the supporting data, that I store in localStorage, I just find all dynamic pages and destroy them:
var current = $.mobile.activePage.attr('id');
$('.dynamicpage').remove();
$.mobile.changePage('#' + current
When running the application I can easily navigate between various screens/pages, even for pages that don't exist when the application starts but if the data needs to be updated (because the user added elements in the application of data in the database changed) then the removal code is executed but the old page is not regenerated ending in a white page with all the DOM contents hidden, but the page I wanted to navigate too seems to be in the DOM (at least firebug tells me so).
If I were to restart development I would probably use Backbone.js to handle my model updates and view changes but for now I'll have to use only jQM. Any suggestions? I understand that jQM is not finding my page but I don't see why since my event should be called and the page regenerated, even with the allowSamePageTransition flag set.
Regards,
Sérgio Lopes
I have some pages which are filled dynamically by content loaded with Ajax. My problem is that each time I go to this page, the old content is still there if it hasn't been replaced by new content...
I've thought about 2 home solutions like:
Creating a "template" page. By calling "pagebeforeshow", I'll copy the code from the template in the target page, and add there the dynamic content...
Each DOM where dynamic content must be put into, I had a class "clearcache" and by calling "pagebeforeshow" I do a $(".clearcache").empty();
I don't know how to deal with that. Have you ever got the same issue?
EDIT:
I bind the "tap" event to store the block-id into localstorage, to load dynamic content in the #PageBlock
Everything works very well (tap event, localstorage for the var, ajax loading). The issue comes really when I go from block to other blocks. The new content overwrite old content instead of beginning from a new "blank" page.
For example I have a list where I append datas I get from Ajax. If I switch to another block, the list is completed and not refreshed..
I could do something like empty the list, and then appending content, but I'd like something better because I have several pages/lists/dom like that...
Thanks for your help ;)
I faced a similar problem where the new contents where not shown on the page when i tried to append it.There is a simple solution where you can just replace append with prepend.
Example:
Replace
$("#divid").append(content)
with
$("#divid") .prepend(content)
Say I have a list of users in the left column, generated by <%= current_user.clients %> and the second column is empty by default.
However, when the user clicks on one of the links, the second column becomes populated with the projects associated with that user - without the entire page being reloaded (i.e. using AJAX).
I would also like to continue the process, so when they click on a project from that user, the third column is populated with other things (e.g. the name of images, etc.).
How do I accomplish this in Rails?
I assume you are using Rails 3 and jQuery (I'm not well-versed in prototype). It's easy to switch jQuery for prototype in Rails 3: https://github.com/rails/jquery-ujs
For the link:
Something
Using JavaScript and jQuery, write a function that sucks in links of class first_column_link (please rename to something more reasonable, by the way):
$(function() {
$('.first_column_link').bind('click', function() {
$.getJSON('/clients/' + $(this).attr('data-client-id'), function(data) {
// Populate the second column using the response in data
});
});
});
This doesn't work on browsers that don't support or have otherwise disabled JavaScript. Gracefully degrading would likely be a good idea, but without more context, I can't advise you how to best do it.
<%= link_to_remote current_user.clients, go_to_controller_path %>
Proceed from there.
go_to_controller_path routes to an action which renders javascript to update the 2nd column (probably with a partial).