Trying to pass information to laravel ajax jquery function based on html declared value

Question

im beginner in laravel/ajax, and trying to declare object.name inside the html class objectbutton, and if its clicked, to pass object.name to another function that will show object.name in the content-area div.

$(document).on('click', '.block-button', function(){
                // access current block instance by listening to touched class
                var block_id = $(this).attr('block-id');

    $.ajax({
                    // laravel route access
                    url: '{{ route("content:page") }}',
                    type: 'get',
                    data: {input_block: block_id},
                    beforeSend:function(){
                        //in jquery . for class and # for ID

                        //LOADING TEXT
                        $('#content-area').html('Loading........')
                    },
                    success: function(result){
                        $('#content-area').css('background-color', result.color);

                        var blockInfos = '<h3>'+result.name+'</h3><h3>'+result.content+'</h3>';

                        //Loop over objects if exist
                        var objectsInfos = '';
                        if (result.objects.length > 0) {

                            //Loop
                            $.each( result.objects, function( index, object ){
                                objectsInfos = objectsInfos + '<div><a href="" class="object-button" id="'+ +object.name+ '">'+object.name+'</a></div>';


                            });
                        }


                        $('#content-area').html(blockInfos + objectsInfos);
                    }


                });});

as you can see on the code im tryign to pass object.name inside the id of the html, is there any way to place object.name inside the html link so i can retrieve it with another onclick function, how this would work? im not sure if this is possible to do in this way with html. Thank you!

i want to store in the div the variable result.name , so its output would be an html link that stores result.name, and when clicked it can be retrieved and applied in ajax function. im not sure if this is possible to do in this way — Molon
– Molon, Commented Mar 24, 2017 at 23:18
To be honest I still do not understand... what are you trying to do? — Chris
– Chris, Commented Mar 24, 2017 at 23:26
what the function is doing is printing information and a clickable in the loop. so if for example there are 2 items in result.objects. 2 html items will appear, each class will have a stored value that represent the id of each item we can call it x. if we click one of those 2 items in view ( in form of clickable , with x value), we will call another function that will request the value stored in the clicked html with x value, and output it to the html — Molon
– Molon, Commented Mar 24, 2017 at 23:43
Ok I understand that, I will try give an answer with that information in mind. — Chris
– Chris, Commented Mar 25, 2017 at 0:01

Chris · Accepted Answer · 2017-03-25 00:30:08Z

2

Ok so based on your comment this is what I understand what you want: So you want to output a number of clickable elements based on the data you receive back from your ajax call. Then from those elements, once clicked, it will display whatever information they contain.

So with that in mind here is what you need to do:

Currently you loop through your objects that you received and creating some anchor link to represent the data. You need to add something to be able to listen when it is clicked, and also something to identify it so you know what you want to display.

$.each(result.objects, function(index, object){
    objectsInfos = objectsInfos + '<div><a class="object-button" id="'+ +object.name+ '" data-contents="x">'+object.name+'</a></div>';
});

So here we see you already add a class called object-button which is good, because we can use that to listen for the clicks. You also added the name in the id attribute, so when it is clicked we know what it is. I added data-contents="x" because that is the example you used in your comment.

So now we want to listen for the click then display the contents.

$('body').on('click', '.object-button', function(){
    // get the id and contents
    var target_id = $(this).attr('id');
    var contents = $(this).attr('data-contents');

    // All we do now is display the contents
    $('#content-area').html(contents);
});

edited Mar 25, 2017 at 0:30

answered Mar 25, 2017 at 0:13

Chris

9977 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Molon Over a year ago

since the <a doesnt have an href, i cant click on it, how can we do it?

Chris Over a year ago

You should still be able to click on it because we bind the click event to it with this jquery. It won't go anywhere, but that is the whole point of ajax. If for some reason you really need a href, you can just add href='javascript:void(0)'

Molon Over a year ago

i want it to load on the same page as the other function, for what is the url/to/send/to if the function is on the same page? ok fair

Chris Over a year ago

You want to send the data somewhere when it is clicked right? That is where the data gets sent. If you just want everything to load on the same page I would suggest ditching the whole ajax idea and going with something easy like a form post. But that would be a waste in my opinion

Chris Over a year ago

Oh nevermind... I think I understand what you mean, you do not want to store the data, you just want to show it... I will change my answer

|

Collectives™ on Stack Overflow

Trying to pass information to laravel ajax jquery function based on html declared value

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related