Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Tsokotsa's avatar

Generate dynamic Data and Pass To modal

Hi There

I am a code beginner and i tested Zend, it was too complex for me and i decided to move to Laravel which i Love for what i have seen. I manage to have dataTables installed on my project but now i would like to edit the returned data on a modal. on my controller i have the following

$res = User::findOrFail($id); return View('admin.users.popupedit') ->with('res', $res);

I want that popupedit to be a modal. When i go to the popupedit URL, the data is returned but i dont want that in a diferent window.

in addition to that, i am sending my data to the controller using ajax as follows:

$('#users').on( 'click', 'tr', function (e) {
   var t = $(this).closest('tr').find('a').attr('uid');
  
  $( "#dialog-form" ).dialog( "open" );
  $.get('/user/' +t +'/edit/', function( data ) {
        
    });
   
    });  

So i dont know how to proceed. I dont want to get the data with data function and assign values to my form using: $("#name").val(data.name); i want to be able to use the data like {{ $res->name }}

Please help

0 likes
11 replies
SaeedPrez's avatar

Hi @Tsokotsa, try this..

var t = $(this).closest('tr').find('a').attr('uid');

$( "#dialog-form" ).dialog( "open" );

// The element you want to load the result in
$( "#dialog-form" ).load( '/user/' + t +'/edit/' );

Documentation: https://api.jquery.com/load/

Tsokotsa's avatar

Hi @SaeedPrez

Thank you for your quick reply however still facing issue, maybe because i did not clearly explain all the scenario. I am working on (admin.users.index), that is were my datatable results are displayed. I want to be able to click on a DT row. When i click the DT row, i get using the ajax the following: /user/id/edit but when i go to that controler (edit), i return the result to the (admin.users.popups.popupedit) So, so far the data is being sent to that view, but how can i display that view as a popup of (admin.users.index)? i tried to include the (admin.users.popups.popupedit) on my index but still it will give me an erro saying that the variable $user does not exist since the var is empty by the time (admin.users.index) is loaded. Hope you can understand and be able to help.

Thank you in advance. :)

Tsokotsa's avatar

Hi @SaeedPrez

Thank you once again for your reply. Your code make sense if i wanted to load the data on the div that resides on the same view. Do you maybe have an example or a tutorial that could guide me. The problem is if i put the modal on the same page, and echo the variables, i will receive the error that the var is undefined. Do you maybe have skype or something like that? or you can team view to see my code.

Tsokotsa's avatar

Hi @SaeedPrez

Thank you for your assistance, i am afraid i need to dig little bit more. what i want to accomplish i am now able to using jquery but i dont think is the correct way, because for for all my variables on the form i must do something like: $('#users').on('click', '#c-users', function () { dialog.dialog( "open" ); var id = $(this).attr("uid");

    $.get('/user/edit/?uid=' +id, function( data ) {

    $("#exampleModal").find('.modal-title').text('Edit User ' + data.name +' ' +data.surname);
    $("#e-name").val(data.name);
    $("#e-surname").val(data.surname);
    $("#e-username").val(data.username);
    $("#e-email").val(data.email);
    $("#e-contact_number").val(data.contact_number);
    $("#e-nationality").val(data.nationality);
    $("#e-city").val(data.city);
    $("#e-address").val(data.address);
    $("#e-dob").val(data.dob);
    $("#e-id").val(data.id);

but that is painful if you have lots of variables and i dont really like that approach and that is why i am investigating the other way of doing it. Your suggestion works and displays the data but still i cant use that data because those variables only get filled when i click on modal button, before that it will throw an error of undefined var.

SaeedPrez's avatar

@Tsokotsa another option is to put an <iframe></iframe> in your modal body, and when a user clicks to open the modal, you set the iframe URL. It will then work like a mini-website inside your modal and you can use blade variables, submit form, and son on without closing the modal.

Tsokotsa's avatar

Hi @SaeedPrez

I see what you have done, and i thank you for all your effort. But the diference with your scenario is that your modals only get the data once you click on the modal button. A similar scenario would be if on your modal you had a variable called {{ $loaded_content }} inside your div target. If you do so, your page wouldnt be able to load because yo would get an error saying that you have undefined variable. So how would i load data passed from the controller to the $loaded_content inside the modal body? send me your email and i will send a prt sc of my scenario [email protected]

SaeedPrez's avatar

@Tsokotsa I will assist you as much as I can here so that others with similar problem can find this thread. If you want to upload images, you can do so via one of many free image hosts ( i.e. https://postimage.io/ )

Using <iframe> you load a full page inside your modal, so you send the variable via the controller method you call, which returns the view that is displayed in the modal iframe. Unless I'm not understanding you, there's really nothing advanced going on, basic Laravel stuff.

Please or to participate in this conversation.