How to call the getStatus() function again inside this view code snippet after clicking a button?
The only thing that works form me is if I refresh the whole page.
<div id="statusContainter"data-bind="css:$data.getStatus('Rendered Approval')"> </div>
Basically, I want the getStatus('Rendered Approval') to fire if I click a button. The function is firing during initial rendering of the page. But I don't want to refresh the whole page to fire the function
Assuming getStatus is a knockout observable the code you have there sets the value, but only once. To get the value of an observable you call the function with no argument.
It sounds like you meant to do this:
<div id="statusContainter"data-bind="css:$data.getStatus()"> </div>
<button data-bind="click: $data.getStatus.bind($data, 'Rendered Approval')">Click to Refresh</button>
Update:
As #Brother Woodrow mentioned, the click binding expects a function for the handler. Passing parameters to the handler can be accomplished by wrapping it in a function literal or by using the this function as described in Note 2 here.
Related
I have a button b, I want the document to understand a key press action has been triggered whenever I click on that button.
For example, when i click on that button, i want the document to recognize that the left key has been pressed and whatever the java script has been written for it should work.
I am unable to figure out how to do this. Please help.
You need to add an event listener to look for a click action. You can do this for a specific button, the first button that your code finds, or all buttons on the page if they all perform the same action. Actually, you can add this listener to just about any html object. Here's a simple snippet I got from https://developer.mozilla.org/en-US/docs/Talk:DOM/element.addEventListener.
<div id="ear">Click me</div>
<div id="display"></div>
<script>
var ear = document.getElementById('ear');
ear.addEventListener("click", listener, false);
function listener() {
document.getElementById('display').innerHTML = "blah blah";
}
</script>
What this is doing is creating a variable called ear, and assigning the div with id='ear' to it. Again, you can just as easily do this with a button, or any other tag. Then ear.addEventListener adds a click event, tells it to run the listener function, and the boolean at the end says if the parent's handlers should be run, as well all ancestors going up. Setting this to true will cause only the tag that was clicked to run.
In my code I'm trying to call an asp-controller action with some arguments. This controller action shows a partial view as modal dialog. View code:
<div style="float: right">
<a asp-controller="MyController" asp-action="MyAction" asp-route-projectId="#Model.ProjectId" asp-route-tag="#Model.Tag" data-target="#modal-container" data-toggle="modal">Execute</a>
</div>
My controller action signature:
public async Task<ActionResult> MyAction(int projectId, string tag)
Now I also want to include a hidden field, and pass it as an argument to my controller.
<div style="float: right">
<a asp-controller="MyController" asp-action="MyAction" asp-route-projectId="#Model.ProjectId" asp-route-tag="#Model.Tag" asp-for-MyNewArgument="MyHiddenField" data-target="#modal-container" data-toggle="modal">Execute</a>
</div>
What is the syntax to do that? I have tried to solve this by including a hidden field on top and doing a form submit, (passing a view model to my controller signature) but unfortunately this makes my modal dialog show as a complete page, instead of a modal dialog.
You're relying on the "remote" functionality of Bootstrap's modal, which is actually deprecated. Essentially, what's happening currently is that Bootstrap is recognizing the the modal activating link has an href to another page, so it's actually performing an AJAX request for that URL and loading it into the modal's body for you. Because this is happening automatically, you have no control over (to pass in a hidden field value or anything else), and as stated previously, you're relying on deprecated functionality that can be removed in any subsequent release of Bootstrap. Additionally, Bootstrap will only load the remote content once, the first time the modal is shown. So, if the hidden input changes after the fact, no new content will be retrieved based on that.
Long and short, you should handle this yourself, with your own JavaScript.
$('#modal-container').on('show.bs.modal', function (e) {
var $modal = $(this);
$.get(e.relatedTarget.href, {
MyHiddenFieldName: $('#MyHiddenField').val()
}, function (html) {
$modal.find('.modal-content').html(html);
});
});
<input type="button" name="reset"
onclick="return ValidateValue(); __doPostBack('ApplyBtn','')" />
The above is the code generated for asp server button button control on browser.
Now my query is that irrespective of ValidateValue() returning true/false __doPostBack('ApplyBtn','') function is not showing any effect for me.
My understanding is that string passed to onclick acts like function body, and return will from first function will return control preventing second function from execution.
Is that correct ?
Please provide helpful inputs.
Your understanding is correct...and it's easily fixed :), instead of this:
return ValidateValue();
Do this:
if(!ValidateValue()) return false;
This way you only abort early if there is a reason to abort, otherwise you continue executing the rest.
I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();
I have a fairly simple ajax action link. The purpose of the action link is to fetch a partial view from the server and replace the contents of a div with new content.
The code looks something like:
<%= Ajax.ActionLink("click me", "GetThing",
new { Mode = "Simple"},
new AjaxOptions {
UpdateTargetId = "thingDiv",
OnComplete = "completeGetThing"
})%>
As you can see, the action link just replaces the content of a div tag in the page (thingDiv) with new content from the server.
I also have a javascript function being called for the OnComplete event. The callback function here needs to do some things with the content that is loaded into thingDiv.
Here is a simplified example of what I'm doing in javascript:
function completeGetThing{
if($("#thingDiv #subThing").length > -1){
doOtherThing();
}
}
I'm just using jQuery to fetch an element called "subThing" from within the div that we are updating.
But what I've discovered is that the OnComplete function appears to fire off before the HTML in thingDiv is actually replaced... so when my callback goes to look for the "subThing" element, it doesn't find it.
This is a VERY simplistic example of what I'm doing.
I am looking for good recommendation for how I might go about solving this problem, or better yet somone to point out something I've overlooked that can get the job done.
Thanks!
You can try to find out if completeGetThing is actually running (put alert there). We had a problem with that and end up with using OnSuccess event instead of OnComplete. We are using this event to colorize loaded tables and it works.
I use OnSuccess. Same as Sly and it works.