I created a widget with a drop down menu and i want to update my ruby query with the value selected in the HTML drop down menu. I am currently using nokogiri to pull the localhost dashboard. nokogiri is able to pull the data from the sample.erb. However, the HTML files that contain the actual information (including the drop down) is not grabbed by nokogiri. the HTML grabbed stops with the data-binding div, nothing inside of that appears when i print out the nokogiri pull. Is there anyway i can grab the entire HTML or pass the value to the ruby from the HTML or coffeescript?
In your widget, you need to grab the data from the DOM. nokogiri can only grab the server-side HTML that you're rendering (what is sent to the client).
The HTML with the data that the user is selecting options in is actually called the DOM, which you can get information from using JavaScript -- or in this case, coffeescript.
Say you have a dropdown like this:
<select id='day-of-week'>
You can bind a handler to it's change event and respond to it like this:
dropdown = $('#day-of-week'); // Use jQuery to get the select by id
dropdown.on 'change', () ->
selectedValue = $(this).val(); // jQuery to get selected value of dropdown
You probably want to learn a bit more about HTML / JS before embarking on your widget-building journey. Here's some documentation on the DOM to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Good luck!
Related
I would like to dynamically include different php files, containing a form (which is different for any entry in the dropdown), while changing a dropdown .
Even using jQuery would be ok.
I read that jQuery works client side, while php server side, so looking for an alternative.
basically I would like to have something like this code.
If value of the dropdown is 1 then include file1.php, if it is 2, then include file2.php, and this before pressing a button, but only while changing the dropdown.
You could try using AJAX, using the onChange option on a dropdown (select) run a ajax request. Check which ajax file to load using the select value and display it.
Here is a quick how-to on ajax, http://www.w3schools.com/ajax/ajax_intro.asp
Ajax can update a page without reloading it.
I am using ASP.NET MVC 5.
My idea is to have modal view like on the picture.
When I click on "Add" I would like to add dropdownlist with same items inside like the others before. (Dynamically adding Html helper controls) At the end when I have selected values I would like to put strings together and send then to one string argument in POST method.
So in example if I have Steven in first drop down and Peter chosen in second drop down I would like to send PeterSteven (or Peter,Steven or Peter Steven) in my POST method in controller.
I have tried using partial view for that part of the modal view but the problem is that all my drop down ID's are the same and that is not valid HTML.
I have used this approach for adding drop downs and it worked, just the ID's were the same and I could not get every selected value and put them together and send them to POST method in my controller.
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
I am open for new ideas, because I do not like the concept that I am using now.
I have a dropdown, on its change I need to load the contents related to it on the same page. Which I did using jQuery. Now the question is how do I make edits on this data and store it on my database. If I am wrong in using jQuery for loading my data then what else should I use? I am using PHP as my server side scripting language.
More detail -
Simply taking there a list of details I need to display as per the country you select, which I am displaying currently in a nice grid(textboxes)!
Now the data from this grid should be copied to another textbox on "EDIT" button click from where I edit them and store it in my database. I am not able to make the values copy into a another textbox
You could do this:
Display the data in some form of editable div, textarea, or other element.
Make a hidden field somewhere and when you display the data
Set the row id from your database to the hidden field
On your change event, grab the id from the hidden field along with the edited data.
Using Jquery/ajax, send that data to a php page that will save thee data to your database using the passed in id.
You could do that.
However, if it were me (and if you're not married to your current databse / mySQL etc..), I would use parse.com. The service is free up to a significant amount of usage (which Ive never come close to) and it really simplifies everything. See the below post if you're interested in that approach:
Save and retrieve user input from database with javascript?
I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.
I am generating 2 dropdown boxes and a CheckBoxList control at runtime using AJAX callbacks to a web service (.asmx file). The service creates the two Dropdowns and CheckBoxList on the server and returns the rendered html as a string which is injected into the web page at runtime, using javascript functions.
During postBack I want to obtain the values of the two dropdown boxes and also determine which (if any) of the checkboxes have been ticked.
Am I right in thinking that the HTML that is injected into the page at runtime is not sent back to the server during postback? If this is the case what would be the most sensible way of obtaining my values?
I'm thinking that the best way to obtain the values of the dynamic controls will be to use javascript to read the values and write them to a hidden field that's part of the page class, just before the postback.
If there is a better way to do this then please share!
One method of retrieving your values during a postback is by saving values in a hidden field which as the element name suggest is invisible on the page -
<asp:HiddenField id="countrySelected" value="" />
In your javascript before the post back you can populate your required information -
document.getElementById('countrySelected').value = 'USA';
In your codebehind you could then select the value to be used -
countrySelected.value
Since the webservice creates the html which is later injected in the page they are not server controls and therefore, the server has no way of knowing they exist. The Hidden html element seems to me the way to go on this case.