Could you point how to adjust this code to present Bootstrap cards in lines/ columns as needed ?

Hey Eduardo,

When you're dealing with Bootstrap, it's usually easier of you don't set you own sizes, so I would remove the width: 22em style as this will break things. Also, you have a row-fluid in there which isn't standard Bootstrap, so not sure whether you've styled that yourself. Finally, if you want 4 columns, then you set the column width to 3 as the bootstrap system is designed with 12 columns in mind (4 columns @ 3 wide = 12). If you set it to 4, then you'll get 3 columns @ 4 wide = 12:

<div class="row">
	@foreach ($campaigns as $campaign)
		<div class="col-sm-3">
			<div class="card-columns-fluid">
				<div class="card  bg-light">
					<div class="card-body">
						<h5 class="card-title"><b>{{$campaign->CampaignID}}">{{$campaign->CampaignName}}</b></h5>
					</div>
				</div>
			</div>
		</div>
	@endforeach
</div>

Select allOpen in new window

Hi Chris

I'm going to start adjusting as you mentioned.
In the meanwhile I completed with something I had adjusted.

Chris


I don't know if I correctly understood.

By going your suggestion it's still disconfigured:

   
   
   @for ($i = 0; $i < count($campaigns) -1 ; $i++)   

		  
		<div class="row">
		
		
			<div class="col-sm-3">
				<div class="card-columns-fluid">
					<div class="card  bg-light" style = "width: 22rem; " >
						<div class="card-body">
							<h5 class="card-title"><b><h3>{{$campaigns[$i]->CampaignName}}</h3></b></h5>
						</div>
					</div>
				</div>
			</div>
		 
		  
		  
		<?php
			if($i < count($campaigns) -1)
			  $i++;
		   else
			  break;
		?>
		
		
	
		 <div class="col-sm-3">
				<div class="card-columns-fluid">
					<div class="card  bg-light" style = "width: 22rem; " >
						<div class="card-body">
							<h5 class="card-title"><b><h3>{{$campaigns[$i]->CampaignName}}</h3></b></h5>
						</div>
					</div>
				</div>
			</div>

		  
		  
		
		<?php
			if($i < count($campaigns) -1)
			  $i++;
		   else
			  break;
		?>
		  
	 
		 <div class="col-sm-3">
				<div class="card-columns-fluid">
					<div class="card  bg-light" style = "width: 22rem; " >
						<div class="card-body">
							<h5 class="card-title"><b><h3>{{$campaigns[$i]->CampaignName}}</h3></b></h5>
						</div>
					</div>
				</div>
			</div>
	  
		  
		  
	  
		<?php
			if($i < count($campaigns) -1)
			  $i++;
		   else
			  break;
		?>
		  

		 <div class="col-sm-3">
				<div class="card-columns-fluid">
					<div class="card  bg-light" style = "width: 22rem; " >
						<div class="card-body">
							<h5 class="card-title"><b><h3>{{$campaigns[$i]->CampaignName}}</h3></b></h5>
						</div>
					</div>
				</div>
			</div>
		
		  
		
	
		<?php
			if($i < count($campaigns) -1)
			  $i++;
		   else
			  break;
		?>
		
	 @endfor

	 
	</div>

Select allOpen in new window

     

I guess what you were meaning is:

      
             @for ($i = 0; $i < count($campaigns) -1 ; $i++)   

  
                <div class="row">
                
                
                  <div class="column">
                    <div class="card" style="width: 30rem;">
                      <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                      
                    </div>
                  </div>
                  
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                
                
                  <div class="column">
                    <div class="card" style="width: 30rem;">
                      <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
                
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                  
                  <div class="column">
                     <div class="card" style="width: 30rem;">
                       <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
              
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                  
                  <div class="column">
                     <div class="card" style="width: 30rem;">
                       <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
                  
                </div>
                
            
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                
             @endfor

Select allOpen in new window

Not really Eduardo,

If you're using BootStrap, why are you hardcoding a width on your columns:

<div class="card" style="width: 30rem;">

That will break your site as it will no longer be responsive.

Also, I can't really see why you've now gone for a for loop instead of the original foreach loop you had. This is what you should be aiming for:

<div class="row">
    @foreach ($campaigns as $campaign)
        <div class="col-3">
            <div class="card  bg-light">
                <div class="card-body">
                    <h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
                </div>
            </div>
        </div>
    @endforeach;
</div>

Select allOpen in new window

That will loop through you campaigns, creating a new card for each. It will lay them out in 4 columns per row (because we've used col-3 to define the column (4*3 = 12). If you wanted 3 columns, then you would use col-4 (3*4 = 12), if you want 2 columns, then use col-6 (2*6 = 12).

The problem Ihas by using that is:

             @foreach ($campaigns as $campaign)  

  
                <div class="row">
                
                     <div class="col-3">
                        <div class="card  bg-light">
                            <div class="card-body">
                                <h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
                            </div>
                         </div>
                    </div>
                
                  
                </div>
                
                
             @endforeach

Select allOpen in new window

Just one column  - I need 04 columns....

So I had used  for  to get the next values on the subsequent card...

Hi Eduardo,

Re-read my previous post carefully - the row goes outside of the loop, like this:

<div class="row">
    @foreach ($campaigns as $campaign)
        <div class="col-3">

Select allOpen in new window

Not this:

@foreach ($campaigns as $campaign)  
    <div class="row">
        <div class="col-3">

Select allOpen in new window

As you have it, you're creating a new ROW for every iteration. My code is creating one row and then a new COLUMN for every iteration.

Oh.. sorry

Now it's ok!

No worries :)

Just another thing.. related to the other question

Here you're using:

<h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>

Select allOpen in new window

I think here is the complete way for capture values.

And at the other question:

<div class="card" data-campaignid="{{ $campaign->CampaignID }}">

Select allOpen in new window

It's 02 different parts, complete code:

            <div class="row">
             @foreach ($campaigns as $campaign)  

                     <div class="col-3">
                        <div class="card  bg-light">
                            <div class="card" data-campaignid="{{ $campaign->CampaignID }}">
                                <img src="/img/favicon-128.png" class="img-fluid img-responsive"/>
                                <h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
                            </div>
                         </div>
                    </div>
                    
                    
             @endforeach
             </div>

Select allOpen in new window

Yeah - that will add the CampaignID to each Card (as a hidden data attribute). You can then bind the click event to each .card and retrieve the CampaignID with:

$(this).data('campaignid')

Select allOpen in new window

Not quite Eduardo,

You're adding 2 .card elements in - you only need one:

<div class="row">
	@foreach ($campaigns as $campaign)  
	<div class="col-3">
		<div class="card bg-light" data-campaignid="{{ $campaign->CampaignID }}">
			<img src="/img/favicon-128.png" class="img-fluid img-responsive">
			<h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
		</div>
	</div>
	@endforeach
</div>

Select allOpen in new window

So, this js (original) would run, ok?

Home.prototype.NewMailing = function (){
   
     
        var pars = { 
            "CampaignID": $('#CampaignID').val(),
            "_token": $('input[name="_token"]').val() 
        };
    

        $.ajax({
            url: '/home/newMailing',
            data: pars,
            type: "POST",
            dataType: "json",
            success: function (data) {
                mailing.displayResult(data);
            }
        });
};

Select allOpen in new window

My issue is to make the "cards" clicable like a button...

No!

In that code, you're retrieving the CampaignID from the element with an ID of #CampaignID:

"CampaignID": $('#CampaignID').val(),

I'm guessing that refers to your <select> element, which you'll no longer be using. If you want to use the card instead, then you'll need to pass the CampaignID into the function explicitly:

Home.prototype.NewMailing = function (camId){
    var pars = { 
        "CampaignID": camId,
        "_token": $('input[name="_token"]').val() 
    };

Select allOpen in new window

And then you need to pass it in wherever you call that method:

$('.card').click(function() {
    let camId = $(this).data('campaignid');

    // now you have the campaign id, so you need to pass it into your NewMailing function, however you do that.
    ......NewMailing(camId);
});

Select allOpen in new window

You'll need to edit that as I don't know how your currently calling your NewMailing method.

The NewMailing method belongs to a js

The blade where the cards belongs:

    <div class="row">
            	@foreach ($campaigns as $campaign)  
            	<div class="col-3">
            		<div class="card bg-light" data-campaignid="{{ $campaign->CampaignID }}">
            			<img src="/img/img_logo.png" class="img-fluid img-responsive">
            			<h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
            		</div>
            	</div>
            	@endforeach
            </div>


  <script src="{{ asset('js/mailing/Mailing.Home.js').'?v='.md5(uniqid()) }}"></script>
    
    
    <script>
        $('.card').click(function() {
        let camId = $(this).data('campaignid');
    
        });
    </script>

Select allOpen in new window

If you're changing the behaviour of your site, then you'll probably need to change the JS file as well.

As it stands, it's hard coded to use the #CampaignID element. There are potentially ways around this, but I'd need to see how you're triggering the NewMailing() method in the first place. I'm guessing it's hooked into the change event of the <select> but you'll need to clarify.

Chris

I guess everything is going to be fine:

This runs at the blade:

    <script>
        $('.card').click(function() {
            
            //console.log('card clicado');
            let camId = $(this).data('campaignid');
            
            console.log(camId);
    
        });
    </script>

Select allOpen in new window

logs correctly.


Just one thing, when the JS is called (1st a card is choosed and a button calls the JS)

This button is calling

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <a href="javascript:void(0);">
                    <div class="btBotaoGenerico"><button type="button" class="btn btn-block btBotaoGenerico" onclick="javascript:home.NewMailing();"><i class="fas fa-file fa-7x" aria-hidden="true"></i><br><br>Em branco</button></div>
                </a>
            </div>

Select allOpen in new window

Home.prototype.NewMailing = function (){
    
       console.log('004');
       
       // camId id not found here...


        var pars = { 
        "CampaignID": camId,
        "_token": $('input[name="_token"]').val() 
        };
     

        $.ajax({
            url: '/home/newMailing',
            data: pars,
            type: "POST",
            dataType: "json",
            success: function (data) {
                mailing.displayResult(data);
            }
        });
};

Select allOpen in new window

Chris


It's perfectly running!!!!

Excellent !

Chris

Thank you very much for one more outstanding help!