Including or loading a php depending on dropdown value - javascript

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.

Related

Pulling data from a widget in Dashing

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!

Best way to display various information in bootstrap or other jquery dialog box

I have 4 images, each image has its own information and images. Not a lot, but I need it to be displayed in a pop up box. I have decided to use Bootstrap as it's responsive and quite reliable for these thing.
My question is is there any way around copy and pasting the same information, for instance, I have 10 lines of the same code just to show the modal box i.e.
$("#smiley").click(function () {
$('#myModal').modal('show');
});
and 200 of information etc.
Here's example http://jsfiddle.net/jjehfiuehf/0ck8y5jx/
You click image and the modal box appears.
The dialog box doesn't seem to appear for some reason
Is it ok to have a full html page full of information or is there a way to condense it somehow??
Dialog box does not appear because of Jquery version you should use 2.1.3 on left side you have on jfiddle Frameworks & Extensions, framework can be changed.
2.it is OK to have all information in html, and if you do not want all information in html, you should use server side scripting, PHP or else.
You could use one modal and load the information dynamically from a PHP script using AJAX.
Put all of your images, 200 (whatever) of information, etc. into a PHP script - perhaps in an array.
In your HTML, include an ID or data-attribute that corresponds with the key in the array. Each one is unique.
Create a jQuery script that parses the ID or data-attribute, and then calls the PHP script via jQuery's .get() method, which then loads the content into the modal body and displays it.
You could also store all of these as separate HTML documents instead of putting them into PHP, and load each file accordingly...
Also, there's Varying modal content based on trigger button - which may be more inline to what you need
From the Bootstrap docs:
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

New row in asp:repeater by java script

In my aspx page I have repeater to show list something, I want to add new row and show it in repeater without postback. I will send date soon. I don't want to use AJAX
How to add row to asp:repeater by JavaScript?
The best bet is inpect the code using a tool like firebug retrieve the html for the row, and recreate that using javascript and attach it to the DOM. Dirty but doable. Using something like jquery will make your work easier.
I know you dont want to use AJAX but the cleanest method would be to use an UpdatePanel and do is on the server side using a partial postabck
The repeater just generates repeating html so it's definitely possible to insert new html by using javascript. As #mellamokb mentions those changes won't be visible on the server side.
It's generally a bad idea to mix client and server side rendering with ASP.NET Webforms.
In the case of a list of some kind being dependent on e.g. a combobox it's often a better idea to render lists for all options in the ASPX code. Then use javascript to hide every list except the currently active one.

jgGrid customized add new form

When I open a blank form to add new row to the grid, I need some fields on the form to be dynamically updated by going to the database to search for data if I change a field on the form.
I found the code in the javascript to create a form for adding new row, may I change it to read from an external file (like an asp, php page) or is there any way to do it properly??
You must use ajax to make calls to proper functions and change your html according to response data.
More info about ajax
Jquery supports ajax and have many nice features for ajax usage and let you have nice page alteration based on html DOM. So i advice you to have a look at it...

ASP.NET Accessing AJAX created controls on postBack

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.

Categories

Resources