If I need to call some action method of a controller from within javascript code I can call it just passing the href, right? Something like that:
$.colorbox({ href: '/Calendar/SessionPropertiesEditbox?starts='+start+' })
That's not gonna work. The problem is the exact link should include the domain name also.
But you don't know what the domain name would be. It could be "http://localhost:7741" today, tomorrow could be absolutely different.
So how to emulate ActionLink behavior in javascript code?
You are incorrect; that will work.
It's a domain-relative path, so the browser will automatically add the current domain.
If your application is not running in the domain root, it will not work, since it will look in the domain root.
If so, you'll need to call Url.Action and pass its result to your Javascript.
In a Razor view, that would look like
<script>
var url = "#Server.JavaScriptStringEncode(Url.Action(...))";
</script>
Try to use JsAction
http://jsaction.codeplex.com
Related
I'm trying to create a "Back" button as a function or directive. Upon clicking it, it would call a function that has several things to do before redirecting the user to a url.
Normally, in pure JS, I would have a simple div with an onclick function to which I would pass the URL to go to then the function would do its thing then make a window.location.href = url and it would be ok.
Here in angular, the URL i'm trying to send is part hardcoded, part coming from a ng-model: url="#/clients/editer/{{client._id}}"
When trying to use a simple function to which I would pass this as a string, my function doesent get the client.id as a string though the HTML inspector of firefox says it does. But if I console.log the URL the function gets, it says
"#/clients/editer/{{client._id}}" instead of "#/clients/editer/56684b4fe7b59ff020b85590"
When trying to use a directive instead of a function, as being new to all this, I dont understant how I'm supposed to pass thir URL to the directive. Since the URL could change radically from a module to another (from "#/clients/editer/{{client._id}}" to "#/materiel/editer/{{materiel._id}}", I need to pass the decoded URL directly to the directive which would then execute the onclick function.
Hope someone can help me !
I made simple test code
js
scope.client._id = 9;
scope.somefunction = function (url){
console.log(url)
}
Html
<div ng-click="somefunction('#/clients/editer/{{client._id}}')">link</div>
Result: #/clients/editer/{{client._id}}
<div ng-click="somefunction('#/clients/editer/'+ client._id)">link</div>
Result: #/clients/editer/9
Is this the result you wanted to achieve?
I have a script that loads the code dynamically. It is kind of a search engine. When I press a search button, the action gets triggered and a new page opens with many parameters.
I want to override one of the parameters generated with the script in the new URL. JS code is quite big and hard to read, but I have found the important part in the Firebug DOM editor.
This is the pattern of the URL generated when you perform the search:
http://www.example.com/...?ParameterOne=123&ParameterTwo=Two&ThisParameter=Sth&ParameterFour=Four...
What I want to edit is "ThisParameter" and change its value. This is the part edited in the DOM that does what I want:
Foobar = {
_options: [],
...
var options = {"ParameterOne":123,"ParameterTwo":"Two","ThisParameter":"ABC","ParameterFour":Four,...}
...
And this is the output of "ThisParameter" when you choose "Copy path" in Firebug's DOM tab:
_options[0].ThisParameter
I am wondering it this is possible at all. What makes me think that it is, is the fact that I can change this parameter in Firebug and it works perfectly. So, if Firebug can edit it, there should be a way to influence it with another script.
Looking forward to any suggestions, thank you in advance!
Since you cannot edit the dynamic script you have the following options:
You have to try to give the script the correct input and hope it uses your value.
Add a script to the results page which will read the url and arguments, change it and redirect, as we discussed here. (If you put everything in functions it should not conflict with the dynamic script if the functions are uniquely named.)
You could try adding something like this jQuery code to the page with the search button:
$('input[name=search_button_name]').click(function(e) {
e.preventDefault();
var form_search = $('#search_form_id');
$('<input>').attr({
type: 'hidden',
name: 'ThisParameter',
value: 'SomethingElse'
}).appendTo(form_search);
f.submit();
});
You can override any js function and method, or wrap you code around it. The easiest thing would be to look at the code you get and once it gets loaded, you re-declare a method with your own functionality.
I you are trying to replace a parameter in a specific jquery request, you can even wrap around the jquerys ajax method:
var jquery_ajax = $.ajax
$.ajax = function(options){
// parse only a specific occurence
if(options.url.indexOf("example.com") > -1) {
// change the url/params object - depending on where the parameter is
options.params.ThisParameter = "My Custom value"
}
// call the original jquery ajax function
jquery_ajax(options);
}
But it would be a lot cleaner to override the method that builds the ajax request rather than the ajax request itself.
I would investigate further on the scope of the variable options (var options), is it global? i.e. if you type 'options' in the Firebug console, does it display its properties?
If so, you could then access it via your own script and change is value, e.g.
options.ThisParameter = 'my-own-value';
You might hook your script to the click event of the search button.
I hope this helps, it could be more specific maybe if you have some sample code somewhere.
I have the following Javascript code:
var idJS;
$('.disp').click(function () {
idJS = $(this).attr("id");
})
And then I want to do this:
#Ajax.ActionLink("myMethod", "myMethod", "HomeController", new { id = idJS },
new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "myDiv" })
Is it possible to do this?
This is not possible to do because Razor view code is rendered when the page it loaded, so all that code is resolved (transformed to HTML) before the javascript can even execute.
You can however use Javascript to change properties of a link, like the following for example (using JQuery though I am afraid, look up a javascript equivalent if need be)
$("a").attr("href", "/Home/myMethod/" + idJS);
ok I will look it up then, javascript only:
document.getElementById("link").href = "/Home/myMethod/" + idJS;
No. Server side and client side are two very different things. The server side is rendered before even reaching the client. By the time $(document).ready() is fired, the server is finished.
What you can do is change the id of the link with jQuery. With a little more information, I would be able to help more, but it's a simple thing to change attribute with jQuery.
I would set the id to be hard coded, like "ajaxBtn" or something, then, in your click even for .disp, change a data attribute to what you need it to be. However, without more data, I can't know for sure exactly why you're needing to set the id.
There is a similar post Retrieving HTTP status code from loaded iframe with Javascript but the solution requires the server-side to return javascript calling a function within the iframe. Instead, I would simply like to check the HTTP status code of the iframe without having to call a function within the iframe itself since my app either returns the full site through HTML or the single object as JSON. Essentially I've been trying to implement a callback method which returns success|failure dependent upon the HTTP status code.
Currently I have uploadFrame.onLoad = function() { ... so far pretty empty ... } and I am unsure what to check for when looking for HTTP status codes. Up until now, I've mainly relied upon jQuery's $.ajax() to handle success|failure but would like to further understand the mechanics behind XHR calls and iframe use. Thanks ahead of time.
UPDATE
The solution I came up with using jQuery
form.submit(function() {
uploadFrame.load(function() {
//using eval because the return data is JSON
eval( '(' + uploadFrame[0].contentDocument.body.children[0].innerHTML + ')' );
//code goes here
});
});
I think the best solution is injecting <script> tag into your iframe <head> and insert your "detecting" javascript code there.
something like this:
$('#iframeHolderDivId').html($.get('myPage.php'));
$('#iframeHolderDivId iframe head').delay(1000).append($('<script/>').text('your js function to detect load status'));
Maybe it's not the best solution but I think it works
I am calling a servlet with params
window.location.href = "/csm/csminfo.jsp?CFG_ID="+cfgid+"&path="+path;
In the other csminfo on body load i am calling a function to retrieve these params
<body onload="getConfigDetails(<%= request.getParameter("CFG_ID") %>,<%= request.getParameter("path") %>)">
JS
function getConfigDetails(cfgid,path)
{
alert(cfgid+","+path);
}
But no alert gets popped up, what is the problem here?
I am using firefox, using error console i got this error
You didn't quote the strings properly:
<body onload="getConfigDetails('<%= request.getParameter("CFG_ID") %>','<%= request.getParameter("path") %>')">
Some other issues:
When building the URL on the original page, you should make sure the parameter values are properly encoded by using the JavaScript built-in "encodeURIComponent()" function.
JSP scriptlets are an old, ugly way of doing things, and really have no place in new code. You should look for resources to learn about JSTL:
<body onload="getConfigDetails('${param.CFG_ID}','${param.path}')">
Whether you use JSTL or scriptlets, values you pull from the HTTP parameters and inject into your page source should be run through an HTML escape mechanism. In JSTL, that'd look like this:
<body onload="getConfigDetails('${fn:escapeXml(param.CFG_ID)}','${fn:escapeXml(param.path)}')">