We Keep Coding

Input Submit Button - Html.buttonfor

I am a bit new to mvc razor and building websites (front and backend). The break down is, I need a button that has a value stored in it be sent to the controller/model. Something similar to html boxtextfor. I have tried giving boxtextfor attributes similar to an input submit button, but it doesn't like that. I have tested the button using javascript and it does have the value within each individual button (# of buttons are dynamic based on previous submit).
I have seen posts like this but I am unsure how to add these to my controller or model so my index page can call it. My model is linked to my index page so I guess I could link these methods in my model.
There's no #Html.Button !
(tried this, but it needs to be linked to my model. A simple button doesn't work.)
Looking for a Html.SubmitButton helper that would accept class attributes in MVC3
I currently don't have access to my code in question. The button needs to be an input submit to go to [HTTPPOST]. However, if you need any more information please let me know.
Thank you for your time,
HtmlNooby

I solved it by wrapping a button with the following. This creates binds each individual button with the given item from an array. Kind of acts like a buttonfor if you will.
Foreach item in array{
#using(Html.BeginForm(…)
{
<button class=input value=item>item</button>
}
}

Calling a click function independently

I'm using the following spell checking javascript. The button that opens the spell checker is defined as button and if a icon, image or text is given the matching id, when this is clicked the spell checker opens.
I want to be able to call the spellchecker directly e.g. onclick="openChecker();" i even tried _openChecker() but cannot seem to call the correct function.
https://raw.github.com/LPology/Javascript-PHP-Spell-Checker/master/spellcheck.js
Can anyone help?
Thanks

The ID property should be unique in the first place so you should not have other elements with the same ID - one of the reasons is what happens to you, you get events triggered when elements with the same ID are clicked. You should fix this and if you do have elements that require the same identificator, you should use a class instead. As for your question you could do something like this:
$("selector").on("click",function(){
//your code here
});

Is there a way to close the dropdown menu for typeahead.js?

I'm using typeahead.js for a typeahead.
I basically want to do the reverse of this: Programmatically triggering typeahead.js result display
I've tried to do a .trigger('blur'); on the typeahead, but I set the value right before that by doing .typeahead('setQuery', value);. Doing 'setQuery' fires off an ajax request to fetch results with the new query term. So the "blur" takes place, but the box is opened soon thereafter.

The proper way to do this, as of version 0.11:
$('.typeahead').typeahead('close');
Manual: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadclose

Ref: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
$('.typeahead-input').typeahead('close');
Undocumented but there is way to set precondition and not allow dropdown to open:
$('.typeahead-input').on('typeahead:beforeopen', function() {
return false;
});

In case someone comes across this in the future, the best way to do this now is:
$('.tt-dropdown-menu').css('display', 'none')
If you open Chrome developer tools and watch what happens as you type and erase, this is all Typeahead is doing, nothing magical.
Besides, if you try with the current version (10.5) to set the query, you'll get an error that looks like this:
Uncaught TypeError: Cannot assign to read only property 'highlight' of

In my particular case the dedicated close method from typeahead API (typeahead.js#0.11.1) did not work. Maybe because of custom CSS or some bug in my code.
While the method described in the other answer of hiding the menu by setting the display property to none worked, I needed to set it then back to display:block to show it back for subsequent use. Plus it is not using the API.
Another better way for me was to clear the value of the input so the dropdown gets hidden:
$('.typeahead').typeahead('val', '');
or
$('#place_typeahead_control').typeahead('val', ''); in case you have multiple search controls on the page and you want to target a specific one.

You can trigger 'blur' in the "opened" event handler. If the drop down flickers for a moment, you can use CSS to hide it for the interim.

Instead of calling setQuery, add another function that doesnt do getSuggestions, and youll have a good time.

Get Element in div with JavaScript

I want to disable/enable a button with JavaScript. Because the JavaScript is called, after a Flash animation is rendered, the button exists at the time of the execution.
The button is in a hierarchy:
<html><body><form#form1><div#control><asp:Button#Export1>
I tried for hours to get a reference to that button, but nothing seems to work:
document.getElementById("Export1")
// and
document.getElementbyId("form1").getElementById("control").getElementById("Export1")
// and many more
How to get a reference to that button (in order to change btnref.disabled = true)?
Thanks a lot for your help!

Have you tried right-clicking in the document and selecting "view source" to see how that code actually renders? An asp:Button is a server control, that gets translated to an input field during render. During this, the ID of the field will not be exactly what you set it to in your aspx.
You can use Export1.ClientID at serverside to get the ID of the control.

If it's the only button in your div, this should work:
var btnref = document.getElementById("controls").getElementsByTagName("button")[0];

Usually the id of the button won't stay the same in the page source. Click on view source in the HTML and look for that tag to find the new id. You can then use that id in something like:
document.getElementbyId("Export1_some_unique_id")...

Javascript function results in HTML page reload: why?

Newbie question...
The objective:
I intend to have an HTML text input field as a kind of command line input.
An unordered HTML list shows the 5 most recent commands. Clicking on one of the last commands in this list should populate the command line input text field with the respective command (in order to re-execute or modify it).
An unordered HTML list contains a result set. Clicking on an ID in this list should bring the respective ID into the command line input text field.
In HTML (DHTML):
Works as expected: when clicking on the the link the command line input text field is populated with a recent command.
<li>here would be one of the recent commands</li>
In Javascript file:
Doesn't work as expected: when clicking on the the link the command-line-input-text-field gets populated with the respective value (as it should), BUT then it seems like the full HTML page is being reloaded, the text input field and all dynamically populated lists become empty.
function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}
Now the Question:
Besides a potential Javascript (syntax) error, what could cause the browser to reload the page?

In both cases, you do nothing to cancel the default function of clicking on a link.
In the plain HTML example, the link to the top of the page is followed.
You don't specify what the href attribute for the second example looks like, but whatever it is, it will be followed.
See http://icant.co.uk/articles/pragmatic-progressive-enhancement/ for a good explanation of event cancelling and good event design. See http://docs.jquery.com/Tutorials:How_jQuery_Works for some jQuery specific guidance.

Change
$('.spa_id_href').click(function(){...
to
$('.spa_id_href').click(function(evt){...//notice the evt param
and in the function, call
evt.preventDefault();

It seems that you just follow the link target URL. That is because you do not prevent the default click action:
e.preventDefault(); // `e` is the object passed to the event handler
// or
return false
Alternatively, you can set up a href starting with #, or not use <a> element at all (use <span style="cursor:pointer"> instead) — if it’s not a real link of course.

It's basically related to event cancelling...
Try this:
try { (
e || window.event).preventDefault();
}
catch( ex )
{
/* do Nothing */
}

While the other answers here make excellent points about canceling events, you will still run into problems if your JavaScript contains errors which prevent your event-canceling code from being run. (As might be the case if you're, say, debugging your code.
As an additional precaution, I strongly recommend you not use href="#" on links which only trigger scripts. Instead, use the void operator:
...
The reason for this is: when the event is not canceled, the browser will attempt to load the URL supplied by the href attribute. The javascript: "protocol" tells the browser to instead use the value of the accompanying code unless that value is undefined. The void operator exists explicitly to return undefined, so the browser stays on the existing page — with no reload/refresh — allowing you to continue debugging your script.
This also allows you to skip the entire event-canceling mess for JS-only links (though you will still need to cancel events in code attached to links which have a "fallback" URL for non-JS clients).