I have used this custom Helper in My Razor View.
#Html.Link("OpenewWindow", Constants.Value, new { k = Constants.k, Staff_ID = LoginHelper.GetLoggedInUser() }, new { id = "mytag", target="_blank" })
When I Click on this link it opens me a new window with the Querystrings ConstantValue/Constants?=someValue&Staff_ID=UserLoggedName.
I want to pick the radio button selected value on the form and pass the checked value in QueryString.
So where can I use Jquery function in my custom Helper method to pick the value from the form.
The Custom Helper method takes this kind of aurguments.
public static IHtmlString Link(this HtmlHelper htmlHelper, string linkText, string baseUrl, object query, object htmlAttributes).
You could use javascript to do that. For example you could subscribe to the click event of the link and then open a popup window by appending the new query string parameter:
$(function() {
$('#id_of_link').click(function() {
var url = this.href;
if (url.indexOf('?') > -1) {
url += '&';
} else {
url += '?';
}
// get the value of the radio button
var value = $(':radio[name="name_of_your_radio_groups"]:checked').val();
url += url + 'radiovalue=' + encodeURIComponent(value);
window.open(url, 'newwindow');
// cancel the default action
return false;
});
});
If you don't need to use javascript then a cleaner approach is to use a form instead of a link. This way the value of the selected radio button will automatically be sent.
Related
I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent
There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.
Here's my very poor attempt at setting this up.
This function creates the popup
function GameObjectPopup(myObject) {
var features = map.queryRenderedFeatures(myObject.point, {
layers: ['seed']
});
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(ClickedGameObject(feature))
.setDOMContent(ClickedGameObject2(feature))
.addTo(map);
};
This function adds the html via the .setHTML
function ClickedGameObject(feature){
console.log("clicked on button");
var html = '';
html += "<div id='mapboxgl-popup'>";
html += "<h2>" + feature.properties.title + "</h2>";
html += "<p>" + feature.properties.description + "</p>";
html += "<button class='content' id='btn-collectobj' value='Collect'>";
html += "</div>";
return html;
}
This function wants to add the DOM content via the .setDOMContent
function ClickedGameObject2(feature){
document.getElementById('btn-collectobj').addEventListener('click', function()
{
console.log("clicked a button");
AddGameObjectToInventory(feature.geometry.coordinates);
});
}
I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()
the error I'm getting when clicking on an object (so as popup is being generated)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Popup#setHTML takes a string that represents some HTML content:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
while Popup#setDOMContent takes actual HTML nodes. i.e:
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);
both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.
The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/
I am using the latest version of TinyMCE and I would like to integrate Google Drive Picker whenever an user clicks on Insert Image.
From the TinyMCE documentation I saw that I should use the file_browser_callback parameter but I am stuck with a couple of problems. First of all, I managed to attach the Google Picker but the Insert Image popup stays on top and there's no way for me to select a file. Even if I solve this problem, how can I set the textbox value from the Google Picker callback function? Below you can see my code, Google Picker code is pretty standard so I won't paste it.
var picker;
tinymce.init({
//other init parameters...
file_browser_callback: function(field_name, url, type, win) {
picker.setVisible(true);
win.document.getElementById(field_name).value = 'my browser value';
}
});
function createPicker() {
// Here I build the Picker...
// var picker = ...
}
function pickerCallback(data) {
//TODO: Find a way to set textbox value with the URL of the Image selected from Drive
}
I think you can hide the modal when you call createPicker():
function createPicker() {
document.getElementById('modal_id').style.display = 'none';
// your picker code here!
}
and then display it back once you get the callback i.e. pickerCallback(data):
function pickerCallback(data) {
document.getElementById('modal_id').style.display = 'block';
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
// set the input text value with the URL:
document.getElementById('source_input_id').value = url;
}
Change modal_id to your modal's div id and source_input_id with your source input field's id.
I am having one issue with document.ready jQuery function.
On load the document.ready function is working fine. When I click on the button or href link, I want to reconnect with the document.ready function where I have set of code in JavaScript file.
Here is the actual scenario. Please find below sample JS code:
$(document).ready(function() {
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
});
After clicking submit button i am adding the input fields data in the below table row. In which description texts are also added in one of table row columns. If description field has more than 100 character, I am pushing the above mentioned JavaScript code from external .JS file. How can i refresh the Java script function without refreshing the page? Anyone have idea?
Please share your opinion.
Create a function, that you can call both in document.ready, and also anywhere else, such as a buttons click event:
function myfunc(){
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
}
$(document).ready(function() {
//call when document is ready
myfunc();
//call again when button is clicked
$('#button').click(myfunc());
});
I would like to add onDblClick event to codemirror 2. I found that onCursorActivity does not deliverer the event so there is no way for me from this method to filter the events.
How can I implement onDbClick event on Codemirror ?
Thanks in advance.
You can call on method on object returned by CodeMirror:
var cm = CodeMirror.fromTextArea(document.querySelector('textarea'));
cm.on('dblclick', function() {
alert('You double click the editor');
});
You can find the list of all available events in documentation.
Register a handler on the element returned by the getWrapperElement() method. Unless you want to not just detect double-clicks, but also prevent the default (select word under mouse cursor) from occurring... in that case I guess some modification of the core code is needed.
http://jsfiddle.net/yusafkhaliq/NZF53/1/
Since codemirror renders inside the element specified you can add an ondblclick event to the element, like below the highlighter renders without line numbers once double clicked that specific elements will display line numbers
var codeelems = document.getElementsByClassName("code");
for (i = 0; i < codeelems.length; i++) {
(function ($this) {
var value = $this.innerHTML;
$this.innerHTML = "";
var editor = CodeMirror($this, {
value: value,
mode: "text/javascript",
lineNumbers: false
});
$this.ondblclick = function () {
editor.setOption("lineNumbers", true);
}
})(codeelems[i]);
}
I have a masterpage on which i displays groups that user can access now i want to gets its selected value in many controllers for saving with the records. I want to know if it is possible in asp.net mvc 2 and if not then what is the way around for it
What you are trying is possible and there are different techniques to achieve it. The best approach would depend on how you are invoking your controller actions. Whether you are using normal hyperlinks, submitting standard <form> or using AJAX. So if you are using standard action links you could add some javascript which binds to the onclick event of each link and adds the selected value of the group. Example:
$(function() {
$('a').click(function() {
// everytime a link is clicked
// add the value of the selected group to the url
var selectedGroup = $('#IdOfYourDdl').val();
if (this.href.indexOf('?') > 0) {
window.location = this.href + '&selectedGroup=' + selectedGroup;
} else {
window.location = this.href + '?selectedGroup=' + selectedGroup;
}
// cancel the default action as it doesn't contain the selectedGroup
// parameter in the request
return false;
});
});
and in your controller action you could have this additional parameter:
public ActionResult Foo(string selectedGroup)
{
...
}
Another example is if you use AJAX you could setup a default data in the master page which will ensure that the value of the dropdown will be sent along each AJAX request you are performing:
$.ajaxSetup({
data: { selectedGroup: $('#IdOfYourDdl').val() }
});
Now whenever you send an AJAX request to your server:
$.get('/foo', { someParam: 'someValue' }, function(result) {
});
the following request will be sent: /foo?someParam=someValue&selectedGroup=123 so you will be able to fetch the value of the selected group back in the controller action.
I hope I understand your question since no code-example is supplied.
You can do this using a viewmodel on the page which contains your display groups. Another option is to get the value from the FormCollection when the page is posted.
For example:
public ActionResult MyAction(MyViewmodel viewModel)
{
//value from your viewmodel, strongtype
var value = viewModel.group;
}
OR
public ActionResult MyAction(FormCollection collection)
{
//value as a string
var value = collection.getValue("MyKey").AttemptedValue;
}
If this answer doesn't statisfy you then please be more clear in your question and i'll try to help you further.
As long as your drop down list is a descendant of the <form> that is submitted, it will be subjected to standard model binding, which means you can include it as a parameter on your action. Ensure the name attribute of the drop down list matches the name of the action parameter.
Final rendered HTML:
<form action="http://.../MyAction" method="post">
<select name="dropDownList">
<option value="a">Option A</option>
<option value="b">Option B</option>
...
</select>
...
</form>
Controller:
[HttpPost]
public ActionResult MyAction(string dropDownList, MyActionModel model)
{
// dropDownList = value attribute of selected <option>
...
}