I have below code in a form for which i don't have access to and can not write any code. But in my webpage i have created another form where i can write some script.
My requirement: I have a dropdown and on selection of value from this i need to change the value of another drop-down field which is in different drop-down.
I tried the below script but not working.
Appreciate any help regarding this. Coding is not my profession but i am willing to learn.
enter code here
<script type="text/javascript">// <![CDATA[
function doStuff() {
alert($('#donation_campaign').val());
$('#PC1184$ddlDesignations').html($('#donation_campaign').val());
}
// ]]></script>
<h1>Thank you for support</h1>
<p> </p>
<p><label>Select your supporting chapter</label> <select id="donation_campaign" name="donation[campaign]" onchange=" doStuff()"><option value="Corpus Fund">DC Metro</option><option value="8">Boston</option><option value="13">AZ</option><option value="24">Austin</option><option value="13">JDU</option><option selected="selected" value="13">Common Pool</option></select></p>
form code for which i dont have access to:**
<tr id="PC1184_trDesignation">
<td class="BBFieldCaption DonationFieldCaption DonationFieldDropDownCaption">
<label for="PC1184_ddlDesignations" id="PC1184_lblDesignationCaption">Designation:</label>
</td>
<td colspan="2" class="BBFieldControlCell DonationFieldControlCell">
<select name="PC1184$ddlDesignations" id="PC1184_ddlDesignations" class="BBFormSelectList DonationSelectList">
<option selected="selected" value="8">General Unrestricted Fund</option>
<option value="13">Corpus Fund</option>
<option value="24">Education Fund</option>
</select>
</td>
</tr>
Thanks in advance,
Naveen
The script tag is processed by browser at the moment it appears in the HTML, the code is executed at that very moment. To postpone the execution, you should bind the code you've written to later event, like page load:
$(document).ready(doStuff);
Also, your function seemingly needs to be called everytime when first element is changed. So you need to bind it to change event of this element as well.
$('#donation_campaign').change(doStuff);
put these two lines at the end of your script.
At first, simplest solution is to have updateEverything javascript function that calculates all dependencies and modifies all necessary elements on the page, ensuring everything is correct. And you call this function at the page load and at changing of any element that is involved in dependencies tracked.
Related
I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
I am using MVC3, C#, Razor, EF4.1
I have implemented grids in their most simple form ie Razor Tables. At present I have implemented editing of record fields off page ie Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.
I need an inline solution where only 1 or 2 fields need updating. Typically the user would either click on the row or on "edit" link and the row would change to "edit mode". One would then edit the data. One would then click on "Save" and the row would resort to read only, or the grid would refresh. Can you recommend a simple and robust solution for this. At present I am not thinking about 3rd party component solutions such as Telerik Kendo UI Grids , although in the near future I will no doubt upgrade to something like this. At present I want to keep it really simple.
Thoughts, wisdom, recommendations appreciated.
Many thanks.
EDIT:
Thanks all. I am going to give these suggestions a try.
Here is simplest way of doing it, see fiddle.
Save all your data using JSON web service. You'll end up having either array of cells or array of array of cells. (Alternatively you can put JSON in a hidden input box)
Use $.data api and put all information needed for server to save in data attributes.
You'll endup having something simple as
var f=$('#myform')
, t = $('table')
, inputs = t.find('input')
, b1 = $('button.save1')
, b2 = $('button.save2')
, ta = $('#save')
// update data-val attribute when value changed
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))
// store everything in $.data/data-* attributes
b1.on('click', () => {
var data = []
inputs.each((i,inp) => data.push($(inp).data()) )
ta.text(JSON.stringify(data))
})
// use $.serialize
b2.on('click', () => {
var data = f.serializeArray()
ta.text(JSON.stringify(data))
})
input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr data-row="0">
<th>1</th>
<td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
<td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
<td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
</tr>
<tr data-row="1">
<th>2</th>
<td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
<td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
<td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
</tr>
<tr data-row="2">
<th>3</th>
<td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
<td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
<td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
</tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>
Given that you generate your table in Razor view and don't need to load data into table. So you "loading" data on the server and saving changes with tiny JS snippet above.
You can also style your input cells in the table so they would look different when with focus and not, making it look like Excel spreadsheet (without fancy Excel features though, just look).
Well in that case I will suggest you to add a div with a unique id with each grid row.
and on the click of edit button insert a row having text boxes with value using java script.
Using knockout.js is my preferred approach, and in my opinion, is simple to get started with but flexible enough to keep up with project demands.
Here are examples:
http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html
http://knockoutjs.com/examples/gridEditor.html
If you think this is for you then take an hour or two and go through the tutorials, it's well worth the time:
http://learn.knockoutjs.com/
I have implemented exactly what you are asking for, but I cannot assure you that it is robust. It definitely is not simple. Based on the article Get the Most out of WebGrid in ASP.NET MVC by Stuart Leeks I have created an MVC project which I have heavily modified with my own javascript. In the end I have come up with a solution that works but could be vastly improved. Took me at least a week to implement.
I write tutorial for implementing inline editable grid using mvc, knockoutjs with source code:
http://www.anhbui.net/blog?id=kojs-1
I currently have a link in the below form:
Change
In order to fit the look of the site in which I'm adding this link, I want to change it to a button input, as so:
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')" />
However, I'm running into a snag with this second form: the single quotes around #Url.Action("ChangeNumbers") are being flagged as Unterminated string constant. Can anyone tell me what I'm doing incorrectly and how to fix it?
EDIT
It didn't occur to me to just try the page - it looks like the second form works. So now my question is - why is Visual Studio flagging this as incorrect?
You're not doing anything "incorrectly" per se, it's just that Razor isn't perfect, and things like quotes within quotes tend to cause it to freak.
One quick fix would be to store the URL in a variable and then use the variable:
#{ var url = Url.Action("ChangeNumbers"); }
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#url')" />
However, an even better fix is to not use the onclick attribute at all. Put this where it belongs: in JS.
<script>
$('#myButton').on('click', function () {
changeNumbers('Numbers', '#Url.Action("ChangeNumbers")');
});
</script>
Used jQuery above, since it's included in MVC by default
I've found that to make Visual Studio happy in this scenario, the easiest thing to do is simply change the <input /> element to a <button></button> element and the error will resolve itself:
<button type="button" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')">Change</button>
Otherwise, to continue using an <input /> the markup will need to be changed to the following:
<input type="button" value="Change" onclick="#("changeNumbers('Numbers', '" + Url.Action("ChangeNumbers") + "')")" />
I would like to use Autocomplete script from jquery-ui.min.js. So in code I have:
<select id="country"><option value="">Choice one</option>
<option value="1">US</option>
<option value="2">UK</option></select>
<input type="text" id="city" >
And the script:
<script>
$(function() {
var US= ["City1", "City2", "City3"];
var UK= ["UK_City1", "UK_City2", "UK_City3"];
$("#city").autocomplete({
source: US
});
});
</script>
The question is how to change source dependent on user selected text from Select ID="Country"? Here is also this script: http://jsbin.com/adopo3/35/edit
Simplest way is to use option method to change the source. I have modified your example code to illustrate it here.
Another way would be to supply callback function to the source option. See that here
I have 1 slider and 1 button:
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div><br><br>
<div data-role="fieldcontain">
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
How can I POST (like form action="http://somesite" method="post"), when slider's value is changed? button is pressed?
One solution would be to add a custom data attribute that enables the input to auto submit the form it is child of.
Format of such an attribute could be:
<select name="slider" id="slider" data-role="slider" data-autosubmit="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
The jQuery code to enable auto submit is as easy as below, but we need to make it a bit more complicated for the slider, see the fiddle sample in the end for that.
$('[data-autosubmit="true"]').change(function(){
$(this).parents('form:first').submit();
});
I don't know if you use the native jQuery mobile form handling or a custom one, but if you want to use a custom hook on the submit it could look something like this:
$("form").submit(function() {
//Handle the submit with a jQuery.post or whatever
});
Here is a fiddle with some running sample code: http://jsfiddle.net/4VFgS/1/
The fiddle code got some handling to prevent that you submit the form 100 times per second.
$('#slider').change(function(){
...
$.post(yoururl, yourdata, function(callbackdata){
...
});
});
See jQuery.post() and jQuery.change()
Edit: BTW: Having 2 elements with the same id will likely lead to major problems sooner than later.
Edit 2: If you're trying to get a response from a different domain this way, you're probably out of luck unless they offer you JSONP or the like. You will not be able to fetch content from a 3rd party site via XMLHttpRequest because of Same Origin Policy Limitations.
You could proxy the request through your server, though, so the AJAX call would go to the same domain.