C#•12mo ago

✅ Nested views failing

Hello! so, I've got a small issue. I have this view called Edit which has the following button:

<div class="form-group">
<input type="submit" id="SaveEdit" value="Save" class="btn btn-primary" />
</div>

<div class="form-group">
<input type="submit" id="SaveEdit" value="Save" class="btn btn-primary" />
</div>

I am trying to get it so that when this button is clicked, it takes the user back to having the details view opened in this part of the dashboard view (note the page with the submit button is currently opened in there)

<div class="dash-content col py-3" id="contentArea">

</div>

<div class="dash-content col py-3" id="contentArea">

</div>

this is my current js

$('#SaveEdit').click(function() {
preventDefault(); // Prevent the default action of the link
var submissionId = $(this).attr('value'); // Get the ID of the submission
$.ajax({
url: '/Submission/Edit/' + submissionId,
type: 'GET',
success: function(result) {
$('#contentArea').html(result);
}
});
});

$('#SaveEdit').click(function() {
preventDefault(); // Prevent the default action of the link
var submissionId = $(this).attr('value'); // Get the ID of the submission
$.ajax({
url: '/Submission/Edit/' + submissionId,
type: 'GET',
success: function(result) {
$('#contentArea').html(result);
}
});
});

here's the end point it hits:

[HttpPost]
[ValidateAntiForgeryToken]
[Authorize(Roles = "Admin")]
public async Task<IActionResult> Edit(int id, Event @event)
{
if (id != @event.EventId)
{
return NotFound();
}
ModelState.Remove("");
if (ModelState.IsValid)
{
try
{
var @submission = await _context.Event.FirstOrDefaultAsync(m => m.EventId == id);
@submission.EventEditedDate = @event.EventEditedDate;
_context.Update(@submission);
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!EventExists(@event.EventId))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToAction("Details", new { id = id });
}
return RedirectToAction("Details", new { id = id });
}

[HttpPost]
[ValidateAntiForgeryToken]
[Authorize(Roles = "Admin")]
public async Task<IActionResult> Edit(int id, Event @event)
{
if (id != @event.EventId)
{
return NotFound();
}
ModelState.Remove("");
if (ModelState.IsValid)
{
try
{
var @submission = await _context.Event.FirstOrDefaultAsync(m => m.EventId == id);
@submission.EventEditedDate = @event.EventEditedDate;
_context.Update(@submission);
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!EventExists(@event.EventId))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToAction("Details", new { id = id });
}
return RedirectToAction("Details", new { id = id });
}

and this is the Details end point:

[Authorize(Roles = "Admin")]
public async Task<IActionResult> Edit(int? id)
{
if (id == null || _context.Event == null)
{
return NotFound();
}
var @event = await _context.Event.FindAsync(id);
if (@event == null)
{
return NotFound();
}
return View(@event);
}

[Authorize(Roles = "Admin")]
public async Task<IActionResult> Edit(int? id)
{
if (id == null || _context.Event == null)
{
return NotFound();
}
var @event = await _context.Event.FindAsync(id);
if (@event == null)
{
return NotFound();
}
return View(@event);
}

I have some almost identical code that works fine, but this one seems to just open the view as a whole view instead of nested inside the first

29 Replies

Angius•12mo ago

It's been ages since I used jQuery, don't you need to call preventDefault() on the actual event? Can you really just use it loose like that? Also, any reason why you opted for an <input> instead of a <button>?

x0rld 👻 🎃•12mo ago

in js you call it in the event I'm not sure what magic does JQuery to allow that catderp

Angius•12mo ago

Yeah,

element.addEventListener('click', event => {
    event.preventDefault();
    // ...
})

element.addEventListener('click', event => {
    event.preventDefault();
    // ...
})

I would assume jQ is similar in that regard

x0rld 👻 🎃•12mo ago

anyway js > jquery awesome

EnderWolfOP•12mo ago

I wasn't sure if I needed to use a input for the forum or if I could change it to a button as from memory a input is what came in the views template.

Angius•12mo ago

Well it's not inside of a form in the first place Or at least your code doesn't seem to have it inside of a form So

EnderWolfOP•12mo ago

I'm not very familiar with front end at the moment sorry

Angius•12mo ago

Wait So you want to send a form And at the same time you want to do something else? Or do you want to do that something else instead of sending the form? Because submitting a form in a normal way reloads the page, or redirects you somewhere. So whatever other JS code runs after that, gets halted

EnderWolfOP•12mo ago

I think it's at the same time. so what my goal is, is the edit view is nested inside another view. when you click cancel edit it returns you back to having the details view nested instead of the edit view (works), when you click save, it saves the edit and then returns you back to the details view being nested inside (does not work)

Angius•12mo ago

Just so we're clear, there are no "nested views", you're just getting the raw HTML from a URL and place it onto the page

EnderWolfOP•12mo ago

right okay, I don't really know what words to use so I just came to the conclusion that might be correct, sorry

Angius•12mo ago

And so, the data from your form just doesn't get saved, correct? Or does it, but the HTML substitution doesn't work?

EnderWolfOP•12mo ago

it get's saved, and then opens the details view in full screen where my goal is to make it replace the edit view which was inside another view

Angius•12mo ago

Because both cannot work at the same time If the form is sent, it reloads the page, or specifically it redirects to the URL specified in the form's action That stops any and all JS execution, halts everything, cancels it, and just reloads the page That's where the redirect is coming from, I would assume Your loose preventDefault() strikes me as something that would not work But if it did, it would prevent the form from submitting So you would get no redirect, as desired, and you would fetch the HTML code and substitute it, but... the form would never be submitted If you want both, you will have to send the form with JS

EnderWolfOP•12mo ago

I think this should show more or less what I mean

EnderWolfOP•12mo ago

ah, okay. makes sense

Angius•12mo ago

Yeah, I get it, you're trying to create a pseudo-SPA

EnderWolfOP•12mo ago

so what I need to do is send the data with the JS?

Angius•12mo ago

Idk Haven't used jQuery in ages Hit up the docs and see

EnderWolfOP•12mo ago

will do. thank you for the help!

x0rld 👻 🎃•12mo ago

check for the function fetch

Angius•12mo ago

If you want to ditch jQ, that is

EnderWolfOP•12mo ago

I'm going to guess I do want to. I have very limited knowledge of js, but I at least have some where I know nearly nothing about jq

Angius•12mo ago

If so, then this

$('#SaveEdit').click(function() {
  preventDefault(); // Prevent the default action of the link
  var submissionId = $(this).attr('value'); // Get the ID of the submission
  $.ajax({
    url: '/Submission/Edit/' + submissionId,
    type: 'GET',
    success: function(result) {
      $('#contentArea').html(result);
    }
  });
});

$('#SaveEdit').click(function() {
  preventDefault(); // Prevent the default action of the link
  var submissionId = $(this).attr('value'); // Get the ID of the submission
  $.ajax({
    url: '/Submission/Edit/' + submissionId,
    type: 'GET',
    success: function(result) {
      $('#contentArea').html(result);
    }
  });
});

becomes this:

const btn = document.getElementById('SaveEdit');
const contentArea = document.getElementById('contentArea');
btn.addEventListener('click', async (e) => {
  e.preventDefault();
  const id = btn.value;
  const res = await fetch(`/Submissions/Edit/${id}`);
  if (res.ok) {
    contentArea.innerHtml = await res.text();
  }
});

const btn = document.getElementById('SaveEdit');
const contentArea = document.getElementById('contentArea');
btn.addEventListener('click', async (e) => {
  e.preventDefault();
  const id = btn.value;
  const res = await fetch(`/Submissions/Edit/${id}`);
  if (res.ok) {
    contentArea.innerHtml = await res.text();
  }
});

x0rld 👻 🎃•12mo ago

https://javascript.info this website is a nice resource to learn js

The Modern JavaScript Tutorial

EnderWolfOP•12mo ago

I sees ty I will look into that ty! I got it working! tysm for the help!!

Angius•12mo ago

Nice

x0rld 👻 🎃•12mo ago

you can do /close to mark the thread ✅

EnderWolfOP•12mo ago

oh okay

Gaming

Programming

✅ Nested views failing