Is there a way to get objectId parameter from js and send it as parameter to Url action?
JS:
function ButtonClick(objectId) {
App.testID.fireEvent("click", objectId);
}
Ext.net:
Html.X().ID("testID").DirectEvents
(
de =>
{
de.Click.Url = Url.Action("TestMethod", "TestController");
de.Click.ExtraParams.Add(new Parameter("objectId", "I need objectId here"));
}
)
I came with diferent solution when I saw compiled code in debugger.
You can create direct event like this:
Html.X().ID("testID")
.Listeners
(
l =>
{
l.AfterRender.Handler = #"App.testID.on('testEvent', function(id) {
Ext.net.directRequest({
url: '/TestController/TestMethod',
extraParams:
{
'objectId': id
}
});
});";
}
)
And fire it with:
function ButtonClick(objectId) {
App.testID.fireEvent("testEvent", objectId);
}
Just add the raw code as the value string and add ParameterMode.Raw to the Parameter instance, like this:
de.Click.ExtraParams.Add(new Parameter("objectId", "App.MyComponent.Id", ParameterMode.Raw));
(based on Examples Explorer - Layouts > CardLayout)
Or alternatively, a custom object:
de.Click.ExtraParams.Add(new
{
myTargetId = JRawValue.From("this.up('button').id")
});
(based on Examples Explorer - Models > Data Annotations)
Related
I am using an API that has a lot of different possible calls. I want to change a part of it in VUE so that depending on a different button different call is made.
https://api.themoviedb.org/3/movie/top_rated?api_key=<>&language=en-US&page=1
https://api.themoviedb.org/3/movie/upcoming?api_key=<>&language=en-US&page=1
Here are two different API calls that are possible and I want to make it so that it looks something like this:
"https://api.themoviedb.org/3/movie/" +variable+ "?api_key=<>&language=en-US&page=1"
and then depending on which button I pressed it would either make a call for "top_rated" or if another button is pressed it would be "upcoming"
You can use String literal ` ` to insert dynamic value.
<button #click="apiCall(true)">Upcoming</button>
<button #click="apiCall(false)">Top Rated</button>
...
methods: {
apiCall(isUpcoming) {
const apiType = isUpcoming ? 'upcoming' : 'top_rated';
const url = `https://api.themoviedb.org/3/movie/${apiType}?api_key=<>&language=en-US&page=1`;
// Fetch data with url.
...
}
}
There are many ways to archive this. Without the rest of the code I cannot suggest much.
Eventually you can create a method in your VUE component that returns the "top_rated" or "upconmig".
<template>
<button :href="'https://api.themoviedb.org/3/movie/' + getAction + '/?yourqueryparams'"></button>
</template>
<script>
export default {
name: 'Movie DB',
methods: {
getAction: function(){
return "top_rated"; //put condition here
}
}
}
</script>
I am not sure I understand your question, but maybe you need this:
vue template:
<button #click=handler('top_rated')>this is button no.1</button>
<button #click=handler('upcoming')>this is button no.2</button>
javascript:
methods: {
handler(type) {
const url = "https://api.themoviedb.org/3/movie/" + type + "?api_key=<>&language=en-US&page=1"
return fetch(url)
}
}
Please
I have a form that takes a parent detail and another form which is a modal form that takes a minimal data of a particular student at the point of creating a parent. I want to be able to send the two details at the same time to the controller that handles it in the backend.
This is what I have been trying :
$("#plus").click(function () {
var student = {
"firstName": $("#sfirstName").val(),
"lastName" : $("#slastName").val(),
"middleName" : $("#smiddleName").val(),
}
console.log(student)
});
This manages the modal form and this for the normal form on the page:
$("#addParent").click(function () {
var parentForm = new FormData($('#parentForm')[0]);
parentForm.append("firstName",student[sfirstName]);
parentForm.append("middlesName", student[smiddleName]);
parentForm.append("lastName", student[slastName]);
console.log(parentForm);
})
before I will now send the forms as one the back end using Ajax... But it doesn't seem to be working ... Thanks in advance
Try to fix like this:
$("#plus").click(function () {
var student = {
firstName: $("#sfirstName").val(),
lastName : $("#slastName").val(),
middleName : $("#smiddleName").val()
} // fixed <-- we create an object literal in javascript with name-value pairs wrapped in curly braces
console.log(student)
});
And then:
$("#addParent").click(function () {
var parentForm = new FormData($('#parentForm')[0]);
parentForm.append("firstName",student[firstName]); //fixed typo
parentForm.append("middlesName", student[middleName]); //fixed typo
parentForm.append("lastName", student[lastName]); //fixed typo
console.log(parentForm);
})
On one of my pages I have a for loop to iterate through a list of "Projects" (which is the main model for my website) and display some of their data. The following code is nested in a table and the middle cells removed for redundancy.
foreach (var item in Model.Projects)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.SubmissionNumber)</td>
<td>#Html.DisplayFor(modelItem => item.Status)</td>
<!-- and so on -->
<td>#Html.ActionLink("Detail", "DisplayDetails", new { id = item.ProjectID })</td>
</tr>
}
The "Detail" link in the last cell will ideally make a box pop up (I'm thinking of using a Modal via Bootstrap) containing all of the data for the project. The "DisplayDetails" controller action returns a partial view that presents this information, but since I'm not using JavaScript or anything to render the partial view on the current page it renders it as it's own unformatted page. This is the controller action:
[HttpGet]
public ActionResult DisplayDetails(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Project project = db.Projects.Find(id);
if (project == null)
{
return HttpNotFound();
}
return PartialView("~/Views/Projects/_Detail.cshtml", project);
}
Ideally I would pass the ID to the controller using AJAX like I did below (which is code from another page of my website, again edited to remove redudancy):
$("#show").on("click", function () {
$.ajax({
url: '/Projects/SearchTable',
type: "GET",
data: {
Line1: $('#' + '#Html.IdFor(m => m.Project.ProjectAddress.Line1)').val(),
// and so on
County: $('#' + '#Html.IdFor(m => m.Project.ProjectAddress.County)').val(),
}
}).done(function(partialViewResult) {
$(".wrapper").html(partialViewResult);
$(".wrapper").css('display', 'block');
});
});
And by doing this I can embed the partial view onto the current page instead of it opening as a new page. I'm just not sure how to pass the project ID for a specific row in the table as data to the controller. Is this even possible? If not is there another way to achieve the same result?
You can replace your ActionLink with this:
<td>Details</td>
Then,
$(".details").on("click", function (e) {
e.preventDefault();
var projectId = $(this).data('id');
// Make the AJAX call here...
});
According to doc API we can send the data from another page to previous page as below
oNavContiner.back({
dataToSend: data
});
I have attached the event as below
<NavContainer id="navContainer" afterNavigate ="afterSelectedReferenceLayers">
in XML View, and in the controller the following method is added but data is not coming:
afterSelectedReferenceLayers : function(oControlEvent) {
if (oControlEvent.getParameter('direction') === 'back') {
console.log(oControlEvent.data);
}
}
Please help me how to get this data
As per the API, afterNavigate does not contain data sent from Nav.to and Nav.back. But its the onBeforeShow method of the the view which contains the data.
So in the onBeforeShow method, there are 2 parameters which contains data sent via .to and .back:
data: The "beforeShow" event on the target page will contain data object as "data" property sent with .to() method.
backData: The "beforeShow" event on the target page will contain data object as "backData" property sent with .back() method.
So, I would modify your code as below:
Step : Add onBeforeShow to pages ( where I need back handling)
//this.byId('p1') here refers to my page where I want onBeforeShow associated.
this.byId('p1').addEventDelegate({
'onBeforeShow':function(evt) {
if (evt.direction == 'to') {
var oData = evt.data;
console.log(oData);
} else if (evt.direction === 'back') {
var oData = evt.backData;
console.log(oData);
}
}
});
Let me know if you need additional information.
I've found this great example to implement a twitter like "x new tweets" http://blog.hycus.com/2011/03/14/realtime-updates-like-twitter-using-phpmysqljquery/
In this example the .arte jQuery plug-in is used. However I think it can be done just as the same with .ajax and I've coded as:
$.ajax({
url:'async.php? main='+$('.boxOfMainPage:first').attr('id'),
success:function(results)
{
if(results!='')
{
if(results.indexOf('boxOfMainPage')>=0)
$('#tweetEveryone').prepend(results);
else
$('#newTweet').html("<center><a href=''>I found "+results+" new tweets</a></center>").show();
}
}
});
This checks the results and loads the result to tweetEveryone. Async.php simply makes a mysql_query and brings the new results. I've actually done exactly the same with the example however when I click the 'new tweet's like it sometimes causes a postback. In the example I haven't experience it. Can it be because of the difference between .arte and .ajax ?
It's nothing about the differences between arte and ajax (in fact and in a short way, arte is ajax that is called with an interval, trying to do something like "long polling")
So, u have a link without href value, this must "reload" ur page, ie, it will perform a GET request to the actual URL in window.location. A postback performs a POST request, this is really happening?
--- edited ---
If you wanna to do the same effect from twitter, it's simple.. In async.php, instead u write an link element that shows how many tweets has after the old state, make this page write a JSON object with all tweets, then, ur ajax function must get this JSON and convert it into a JS object. With this object, u'll be able to count how many updates u have to show and exactly which are they.
So, ur function could be like this (assuming that "#boxOfMainPage" is ur tweets container):
$.ajax({
url : 'async.php?main='+$('.boxOfMainPage:first').attr('id'),
success : function (tweets) {
window.NEW_TWEETS = tweets;
if ( NEW_TWEETS && NEW_TWEETS.length ) {
$('#newTweet').html("<center><a href='#' onclick='showNewTweets()'>I found "+NEW_TWEETS.length+" new tweets</a></center>").show();
}
}
});
The showNewTweets functions will be:
function showNewTweets() {
if ( window.NEW_TWEETS && NEW_TWEETS.length ) {
$('#newTweet').hide().html("");
for ( tweet in NEW_TWEETS ) {
$("#boxOfMainPage").prepend(buildTweetHTML(tweet));
}
}
}
And buildTweetHTML:
function buildTweetHTML(tweet) {
var $tweetElm = $("<div class='tweet'>");
$tweetElm.append("<h2>"+tweet.user+" said:</h2>");
$tweetElm.append("<p>"+tweet.content+"</p>");
$tweetElm.append("<p class='time'>"+tweet.time+"</p>");
return $tweetElm;
}
Finally, async.php should write JSON object like this:
[
{ user : 'Rafael', content : 'The content from tweet', time : 'X time ago' },
{ user : 'George', content : 'The content from tweet', time : 'Y time ago' }
{ user : 'Jack', content : 'The content from tweet', time : 'H time ago' }
]