Below is my code, basically it pulls information from the database and displays the stock associated, from here I have a details button which I want to use to send data to another html page to display more information on the product, add to cart etc.
My question is what is considered "Best practice" to send this information, should I simply make a form that gets the ID from the array and sends it on click? Or is there a more efficient way say using jquery?
I assume best practice would be to have a function which the value is passed to from the button form?
<section>
<div class="row">
<div class="col-md-12">
<div class="heading">
<h1>New Mag Wheel Arrivals</h1>
</div>
</div>
</div>
<div class="row products">
<?php while ($product = mysqli_fetch_assoc($wheelResult)) : ?>
<div class="col-md-3 col-sm-6">
<div class="product border">
<div class="image">
<a href="#"><img src=" <?= "images/wheels/wheelphotos/" . $product["bigpic"]; ?>"
alt="<?= $product["manufacturer"]; ?>" class="img-responsive img-demo"></a>
</div>
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<div class="ribbon ribbon-quick-view logo">
<div class="theribbon"><img src="images/wheels/logos_small/Vs2.png"></div>
<div class="ribbon-background"></div>
</div>
<div class="text text-background">
<h4><?= $product["diam"] . "\" " . $product['manufacturer'] ?></h4>
<p class="brand"><?= "Model " . $product["part_no"]; ?></p>
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
Sudo code form example
EG
<form action=details.php method="GET">
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
hidden-value = $product["recid"]
</form>
As you need to load an entirely new page, so Ajax isn't going to bring any big improvements in terms of user friendliness. I'd suggest you to do this simply like below:
On product listing page (in while loop), place your button like this:
<button class="btn btn-default btn-sm btn-primary" >Details</button>
On detail.php page, simply take the id from $_GET request and then fetch detail for the product from database:
i.e. "SELECT * FROM `products` WHERE `product_id` = ?"
Hint: Use $_GET['id'] for ? as it will contain id of product passed from previous page.
Related
The model is having a unique id for every while loop call as the id's are generated randomly. For each call of while loop the button is having a unique id and is calling a unique model. But the model is not showing by clicking on the button. The model shows up if i exclude giving unique id to each model and button and give them a common id but in this case it is opening the same model for every button click.
"<div class='modal fade' id='myModal[$id]' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h4 class='modal-title' id='myModalLabel'>More About $name</h4>
</div>
<div class='modal-body'>
<center>
<img src='img.jpg' name='dogimage' width='140' height='140' border='0' class='img-circle'>
<h3 class='media-heading'>$name</h3>
<hr>
<center>
<p class='text-left'><strong>Age(in months): </strong> $age
</p>
<p class='text-left'><strong>Weight(in kg): </strong>
$weight.</p>
<p class='text-left'><strong>Breed: </strong>
$breed.</p>
<p class='text-left'><strong>Gender: </strong>
$gender.</p>
</center>
</div>
<div class='modal-footer'>
<center>
<button type='button' class='btn btn-default' data-dismiss='modal'>Know enough about $name</button>
</center>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='row'>
<div class='col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6'>
<div class='well profile'>
<div class='col-xs-12'>
<div class='col-xs-12 col-sm-8'>
<div id='dogrequestmessage'></div>
<h2>$name</h2>
<p><strong>Breed: </strong> $breed </p>
<p><strong>Weight(in kg): </strong> $weight </p>
<p><strong>Gender: </strong> $gender </p>
<p><strong>Age:(in months): </strong> $age </p>
</div>
</div>
<div class='col-xs-12 divider text-center'>
<div class='col-xs-12 col-sm-4 emphasis'>
<button class='btn btn-info btn-block' href='#aboutModal' data-toggle='modal' data-target='#myModal[$id]' name = 'viewprofile[$id]' id= 'view_profile'><span class='fa fa-user'></span> View Profile </button>
</div>
</div>
</div>
</div>
</div>
</div>"
"<div class='modal fade' id='myModal[$id]'
The problem is with the square brackets used in the ID value. Those would need to be escaped, to create a valid CSS selector, but the library used for the functionality probably doesn’t do that.
Use an ID format like modal_$id instead. Assuming the $id values are numeric, that will give you IDs that can be used inside a CSS selector without any additional escaping.
I got a little problem with Javascript in laravel 5.6.
I have a wizard setup here, and there are 3 steps.
Step 1. login or register
Step 2. another div (hidden)
Step 3. another div (hidden)
If I still don't have a login session (here I use the session for the login)
then I want to go directly to step 2 (hidden div 1 and 2)
And my statement is how do I get login session logic on javascript?
This is the markup for the view:
<div class="container">
<div class="stepwizard1">
<div class="stepwizard-row1 setup-panel">
<div class="stepwizard-step1">
<a id="a-step1" href="#step-1" type="button" class="btn btn-primary btn-circle"></a>Step 1</p>
</div>
<div class="stepwizard-step1">
<a id="a-step2" href="#step-2" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 2</p>
</div>
<div class="stepwizard-step1">
<a id="a-step3" href="#step-3" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 3</p>
</div>
</div>
</div>
<div class="tab-panel setup-content" id="step-1">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>masuk</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<form id="form-login">
<div id="label_email">
<input type="text" placeholder="Email" name="email" id="email"/>
</div>
<div id="label_password">
<input type="password" placeholder="Password" name="password" id="password"/>
</div>
<button type="submit" class="button nextBtn">Masuk</button>
</form>
</div>
</section>
</div>
<div class="tab-panel setup-content " id="step-2">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>Alamat</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<div id="label_email">
<input type="text" placeholder="alamat" name="alamat" id="alamat"/>
</div>
<div id="label_password">
<input type="text" placeholder="kodepos" name="kodepos" id="kodepos"/>
</div>
<button type="submit" class="button nextBtn">Next</button>
</div>
</section>
</div>
</div>
</div>
btw, here I use ajax for the login form...
Thanks in advance, and I'm sorry if it's still wrong because I am still relatively new in the world of programs and my bad...very bad English.
First of all, if you are using a laravel then you can take advantage of blade templating engine
#auth
// The user is authenticated...
#endauth
#guest
// The user is not authenticated...
#endguest
Then you could set some classes inside those code blocks and style them. Your steps will be easier to implement.
If, however, you really want to use Ajax to check if user is authenticated, You could make a function in your controller to return a user status like
public function isLogged() {
if (Auth::check()) {
// The user is logged in...
}
}
And set up a root path like
Route::post( '/isUserLogged', 'UserController#isLogged' );
Oh, and one more thing, if you are using steps that could get ugly JS code pretty fast. I would suggest to use a Vuejs framework which has already built in the Laravel.
Good luck :)
I have two collections, one is a Posts collection which has posts, with an id.
And the other is a Sets collection which has an array called ArticleId that can be updated by the user by inserting a post id from the Posts collection into it via a click function with the button toggle-addToSet.
The user Creates the Array called ArticleId, gives it a name and saves articles in it periodically. Think Pinterest Boards or G+ collections.
I have a button on the post item that when a user clicks the icon, all the Sets he has created come up in a dialogue and the user chooses which Set he want to save the post id into.
<template name="summeryArticle">
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
Graphically it looks like this
And when the user clicks the icon modal-trigger to bring up the Sets he created, it looks like this
As you can see, the user has three Sets, Lifestyle, Love, Business, they can choose to save the posts id into any one of those three.
## GOAL ##
I want to be able to choose a Set, click the add button of my chosen Set, and somehow capture the post Id of the current post in my foreach loop, and insert it into that via the click function, at the moment all I have is this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
}
});
and when I console log that, I just get the Set id instead of the post id.
Question
How can I capture the post id of the current post,
Choose a Set of my liking, then insert the post id into my chosen set?
And if there is a better way to achieve this, please let me know.
EDIT AFTER FEEDBACK
I did the second option like this
<template name="summeryArticle">
{{#let article=this}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
my helper is like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
console.log(sid);
console.log(aid);
}
});
However, this is what I'm getting.
and the log looks like this
where 7MgLCEnTWjXFRhLg6 is the Sets_id depending on which of the three buttons I clicked
SECOND EDIT. CONTEXT
when i do this
<template name="summeryArticle">
{{#let article=_id}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{> likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each s in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
I get this
What's going on here is that I have the articles organised in categories, so what's going on now is that the article=_idbeing captured is the last article in the category, no matter what articles I try to add, it's just one article being caught, and its always the one at the bottom. I have no idea why
There are several ways. One would be something like this:
I would but article id and set id to toggle-addToSet button's data-attributes:
<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>
If you call your summeryArticle like this:
{{#each article in articles}}
{{>summeryArticle article=article}}
{{/each}}
(another opotion is use let-helper:
<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>
Then in your summeryArticle-template you can get article id in sets-loop:
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}
Then in template events:
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});
}
});
Note!
This assumes you can update your collection directly from client side! Depending on your situation, but usually it is not recommended. Normally you should deny client side updates and use methods for updating collections:
Method.call('mymethd', sid, aid, function(e, r) {
if (!e) {
console.log(r);
} else {
console.error(e);
}
});
I'm using SQL and PHP to create a table filled with data in a simple html table. It all works fine but I am trying to include each item in its own div in a bootstrap 3 column layout. The issue here is this requires adding rows/columns in a non-repetitive order. Please see the jsfiddle to see the grid layout I am trying to achieve.
Using foreach I get the data to display nicely in a simple table. My question is what would be the best route make the output format like the jsfiddle? Any tips would be greatly appreciated! I am assuming I will need some JS to achieve this? Thank you for your time.
NOTE Make the Javascript tab thin to see the actual effect otherwise it wraps.
Layout I am looking for
<!-- CODE FOR TABLE LAYOUT -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h2>
Database Item 1
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 2
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 3
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>
Database Item 4
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 5
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 6
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
You don't need any javascript, you just need to iterate and close the row div according to number of iteration
echo '<div class="container-fluid">';
for($i=1; $i < count($array) + 1; $i++) {
if(is_int(($i - 1) / 3) || ($i - 1) == 0) {
echo '<div class="row">';
}
echo '<div class="col-md-4">';
echo '<h2>'. $array[$i]['item_name'].'</h2>';
echo '<p>'.$array[$i]['item_descrption'].'</p>';
echo '<p><a class="btn" href="#">View details »</a></p>';
echo '</div>';
if(is_int($i/3) {
echo '</div>';
}
}
echo '</div>';
I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span> Get Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.
Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.