I have found many similar questions on this subject but none really answer my scenario so I decided to post a new question:
I have one page with several hidden sections (the same content in different languages). The hidden section displays based on a dropdown menu of languages (I'm using jQuery for that and it only hides/displays sections on the same page - the page URL stays the same) this is all working. However, I need to find a way to get people to arrive to the page with their language selected, not the default language which is English.
I would use either one of these: (example.com/page/#german) or (example.com/page/?german) but it then needs to hook into the existing jQuery and HTML so that that URL information selects the correct language. How can I do it?
This is the HTML of the language selector:
<select id="language_selector">
<option value="german">Deutsch</option>
<option value="english" selected >English</option>
<option value="spanish">Español</option>
<option value="french">Français</option>
</select>
and this is the jQuery code I am using to display only the selected language HTML content (based on ID):
hideAllDivs = function () {
$("#English").hide();
$("#French").hide();
$("#German").hide();
$("#Spanish").hide();
};
handleNewSelection = function () {
hideAllDivs();
switch ($(this).val()) {
case 'english':
$("#English").show();
break;
case 'french':
$("#French").show();
break;
case 'german':
$("#German").show();
break;
case 'spanish':
$("#Spanish").show();
}
};
I was thinking that the way to go about it would be to get the URL value, select the parameter only, and then pass that to the jQuery to select the right option but I have no clue how to do it, also without breaking my existing language selector (I still want people to be able to change their language manually)
// url : 'example.com/page?language=german';
let language = (new URLSearchParams(window.location.search)).get('language') ?? 'english';
$('#language_selector').val(language);
handleNewSelection();
I have an angular page, where, during an *ngFor loop, I want to update a variable, then write it to the HTML during each iteration of the loop.
Like so:
HTML:
<table *ngFor="let data of Dataset">
somehowRunThis(data)
<div>{{methodResult}}</div>
</table>
TS:
...
methodResult: any;
...
somehowRunThis(data): {
let a;
...
this.methodResult = a;
}
etc etc.
Is there any way this can work? Attempting to add a method that returns within the curly brackets seems to not work, and there appears to be no effective way to run arbitrary methods from the HTML in Angular.
Thank you for any assistance you can provide.
Is there any particular reason why you want to trigger this update in HTML?
Depending on your needs you can use pipe (https://angular.io/guide/pipes) or transform the data to desired format in your component.
I would say it's not a good idea to have a method with side-call effects invoked in HTML.
There are a lot of ways to do this. A general advice: sometimes we are looking for an answer in the wrong places, be open :)
Instead of forcing ngFor, just run a simple array.map on your data before sending it to the template.
displayData = this.data.map(el => this.somehowRunThis(el))
this way you'll avoid having terrible performance.
If you don't care and still want to do this thing for some reason you can make your function return it and actually call in template:
{{ myFunctionReturnsText() }}
This is a bad idea because the function calls will run on each change detection so something like Pipes/Directives will be better.
I have a newbie question in php
When I Select value from dropdown
automated that the value is output in the textbox
for example..
<select></select>
<option>John</option>
</select>
When i select john
automatic
the information of john output on a textbox
How to do this?
thanks in advance..
Sorry for my bad english
You're speaking of something that is typically done on the client side via javascript. PHP on the other hand is a server side scripting language.
If the information about John is stored in a database somewhere you would be doing an ajax call to a php function that retrieves and returns your desired information from the database. You would then use javascript to manipulate the DOM to insert the returned information into your textbox.
I hope this helps and gets you on the right path.
This question is not in php scope, you just need some Javascript to do it:
WORKING DEMO
HTML:
<select id="cbxName">
<option value="Join">John</option>
<option value="TrungDQ">TrungDQ</option>
</select>
<input id="txtName" type="text" value=""/>
Javascript:
var e = document.getElementById("cbxName");
e.onchange = function() {
var strName = e.options[e.selectedIndex].value;
document.getElementById("txtName").value = strName;
}
Since there appears to be a 1024 character limit for hidden input values, what does everyone do for values in excess of this limit? Can a hidden file input (<input type="file" value="some very long value"...) be reasonably used instead? What would the field length restrictions be of any such solution?
<input id="someId" type="hidden"
value="5538680,5538683,5538858,5539195,5540063,5540812,5540814,5541665,5541666,5541667,
5541668,5541669,5541670,5541671,5541672,5541673,5541674,5541675,5541676,5541677,5541678,
5541679,5541680,5541682,5541683,5541684,5541685,5541686,5541687,5541688,5541689,5541690,
5541691,5541692,5541693,5541694,5541695,5541696,5541697,5541698,5541728,5543254,5543501,
5543502,5543949,5543950,5544073,5544867,5545079,5545642,5545827,5545890,5545891,5545895,
5545896,5546323,5546631,5546632,5546972,5547794,5547900,5547945,5547980,554923...735181,
5735182,5735183,5735184,5735185,5735187,5735188,5735189,5735227,5735228,5735229,5735235,
5735236,5735237,5735238,5735239,5735240,5735241,5735242,5735243,5735273,5735744,5735745,
5735746,5735747,5735748,5735749,5735836,5735837,5735838,5735839,5735840,5735841,5735842,
5735843,5735844,5735845,5735846,5735847,5735848,5735849,5735850,5735851,5735852,5735853,
5735854,5735855,5735856,5735857,5735858,5735859,5737183,5738250,5738563,5738564,5738565,
5738566,5738567,5738568,5738569,5738570,5738731,5738732,5738946" name="someName">
I'm using ASP.NET MVC 3, and would appreciate a solution that could integrate with a minimum of effort. Ideally, I'd like to be able to pass model values in excess of 1024 characters with razor syntax.
I also need to be able to manipulate the value client-side, using JavaScript/jQuery.
What does everyone do to get around this issue?
Ideally, I'd like to deal with the value as a single variable. Is there a good way to handle such information? The largest value for my usage appears to be about 40k in size.
Edit: If you note the ... in the value of the input element above, it appears that the value is being shortened to 1024 characters, to fit into the value attribute. I'm not positive of the cause of this issue, but believe it to be a limit on the attribute size. If someone can deny this, and/or explain how to allow for a larger attribute or field somewhere, I would greatly appreciate it. I would prefer keeping the re-factoring to a minimum, as I already have a significant investment in the current architecture. A number of other components currently utilize this list of values in it's current form.
Edit: My mistake! Firebug was reporting the "...", and causing JavaScript errors. It apparently doesn't handle attributes in excess of 1024 characters well. All of the data is in fact populating without issue (when firebug is disabled). This appears to be an issue with firebug. I apologize for the inconvenience.
use the grouping
<input name="someIDs[0]" type="hidden" value="5538680"/>
<input name="someIDs[1]" type="hidden" value="5538683/>
update:
controllers
public ActionResult Test()
{
Random rand = new Random();
List<int> list = new List<int>();
for (int i = 0; i < 10000; i++)
{
list.Add(rand.Next(1,999999));
}
return View(list);
}
[HttpPost]
public ActionResult Test(int[] item)
{
return View(item.ToList());
}
view
#model List<int>
#{
ViewBag.Title = "Test";
}
#using (Html.BeginForm())
{
foreach (int item in Model)
{
<input type="hidden" name="item" value="#item" />
}
<input type="submit" value="submit" />
}
How about a
<textarea name="someName">5538680,5538683,...</textarea>
with a style/css rule of display:none applied to it ?
1024 is the limit of any attribute on an HTML element in HTML 3 and below. To get around it, you could use a text area where you put the value in between the tags.
Since you have so much data, you might be better off implementing some sort of paging on the server side and using AJAX to make a request to get the next set of data.
I think the most "correct" way to do this would be using data attributes.
#my-info {
display: none;
}
<div id="my-info" data-ids="id1,id2,etc"></div>
Or through javascript:
<script>
$("#my-info").data("ids", #Model.JsonIds);
</script>
And have Model.JsonIds populated with a Json string.
I would personally go with the second, probably.
I agree with #Gaby about re-thinking the architecture. But if you really must, I suggest you build up javascript array. That way it will be much easier to work with data. it is pretty simple to do this with razor.
i don't really think there is a limit. so long as you can get your string length between the " " quotes, and on the same line, it should accept it. there's rumours of it being 65000 characters, however someone wrote a javascript and got it well over 2,000,000 characters.
<select id="selectId">
<option>Please select product ...</option>
</select>
i try on firefox and it work
$('selectId').innertHTML = '<option>Test test</option>'
but on ie , it not work, how to add a option by string option like above in ie
Use the Element Class instead:
new Element('option', {
text: 'test option'
}).inject($('selectId'));
Example: http://www.jsfiddle.net/EJH5b/
If you are going to use Mootools, then you should really use the Mootools methods rather than switch between it and vanilla Javascript. One benefit from doing this is that Mootools is already taking care of browser inconsistencies for you. Therefore, if you ignore its methods, you will have to take care of them yourself.
To access the properties of an elements the Mootools way, you can use the set and get methods on any element. The dollar ($) function returns an element so you can just chain set and get to that.
//returns selectId's HTML
var foo = $('selectId').get('html');
//Sets the HTML of selectId to <option>Test test</option>
$('selectId').set('html', '<option>Test test</option>'); //
In this case, you just need to use set.
One thing you should be aware of it is this does not add an option to a select box but instead replaces everything inside of the select box with an option. Consequently, if you wanted to use this to add multiple options to a select box, it will not work as you are resetting the HTML each time. It does not make much sense to have a select box that only has a single option so I will assume you are trying to append an option, rather than replace everything with an option. In that case, do the following:
//get the current options selectId's options
var options = $('selectId').get('html');
//Add your own option onto the end
options = options + '<option>Test test</option>';
//Set the HTML of selectId to whatever is stored in options
$('selectId').set('html', options);