I've got a following code:
<?php if(UserModel::getInstance()->isLoggedIn()) { ?>
<a class="modal-trigger waves-effect waves-light red btn right" href="#modalNewTopic">+ Add New Topic</a>
<?php } ?>
<?php if(UserModel::getInstance()->isLoggedIn()) { ?>
<div id="modalNewTopic" data-ignore="true" class="modal">
<div class="modal-content">
<h4>Add New Topic</h4>
</div>
<div class="modal-footer">
asdf
</div>
</div>
When I click on a button nothing is showed up. No errors were triggered in javascript console. What could be the problem?
You need to initialise the modal plugin before you can use it. Add this to your JS file:
$(document).ready(function() {
$('.modal').modal();
});
Related
This is Laravel 8.I set '/cart' route to href of add to cart button.but it also didn't work.got an error as 'session not found'.I made this while watching a youtube video.But it's not work.
What is the problem of my code?
Plz help me!
ShopComponent.php
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
use Cart;
class ShopComponent extends Component
{
public function store($product_id,$product_name,$product_price){
Cart::add($product_id,$product_name,1,$product_price)->asseociate('App\Models\Product');
session()->flash('success_message','Item added in Cart');
return redirect()->route('product.cart');
}
public function render()
{
$products = Product::paginate(12);
return view('livewire.shop-component',['products'=>$products])->layout("layouts.base");
}
}
shop-component.blade.php
<div class="product-info">
<span>{{$product->name}}</span>
<div class="wrap-price"><span class="product-price">{{$product->regular_price}}</span></div>
Add To Cart
</div>
web.php
<?php
use App\Http\Livewire\HomeComponent;
use App\Http\Livewire\ShopComponent;
use App\Http\Livewire\CartComponent;
use App\Http\Livewire\CheckoutComponent;
use App\Http\Livewire\DetailsComponent;
use App\Http\Livewire\User\UserDashboardComponent;
use App\Http\Livewire\Admin\AdminDashboardComponent;
use Illuminate\Support\Facades\Route;
Route::get('/cart',CartComponent::class)->name('product.cart');
app.php
'aliases' => Facade::defaultAliases()->merge([
// 'ExampleClass' => App\Example\ExampleClass::class,
])->toArray(),
DetailsComponent.php
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Cart;
class DetailsComponent extends Component
{
public $slug;
public function mount($slug){
$this->slug=$slug;
}
public function store($product_id,$product_name,$product_price){
Cart::add($product_id,$product_name,1,$product_price)->asseociate('App\Models\Product');
session()->flash('success_message','Item added in Cart');
return redirect()->route('product.cart');
}
cart-component.blade.php
<div class=" main-content-area">
<div class="wrap-iten-in-cart">
#if(session::has('success_message'))
<div class="alert alert-success">
<strong>Success</strong>{{Session::get('success_message')}}
</div>
#endif
#if(Cart::count()>0)
<h3 class="box-title">Products Name</h3>
<ul class="products-cart">
#foreach(Cart::content() as $item)
<li class="pr-cart-item">
<div class="product-image">
<figure><img src="{{('assets/images/products')}}/{{$item->image}}" alt="{{$item->model->name}}"></figure>
</div>
<div class="product-name">
<a class="link-to-product" href="{{route('product.details',['slug'=>$item->model->slug])}}">{{$item->model->name}}</a>
</div>
<div class="price-field produtc-price"><p class="price">Rs.{{$item->model->regular_price}}</p></div>
<div class="quantity">
<div class="quantity-input">
<input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >
<a class="btn btn-increase" href="#"></a>
<a class="btn btn-reduce" href="#"></a>
</div>
</div>
<div class="price-field sub-total"><p class="price">Rs.{{$item->subtotal}}</p></div>
<div class="delete">
<a href="#" class="btn btn-delete" title="">
<span>Delete from your cart</span>
<i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
</div>
</li>
#endforeach
</ul>
#else
<p>No Item In Cart</p>
#endif
</div>
Help me please with this question.
Did not see the context menu after executing this code.
file: Grid.js
export default class Grid{
btnAddClick(){
browser.wait(async()=>{
await browser.executeScript('document.querySelector(".Grid--Head--leftButton-plus").click();');
return EC.presenceOf(element(by.css('.item-invoice_form_add_simple_position a')))
&& EC.presenceOf(element(by.css('.contextmenus')));
},
browser.params.timeWaitSelEl,
'Element "menu point Add position" too long in the DOM.');
}
}
test file: test.js
it('test', ()=>{
let grid = new Grid();
grid.btnAddClick();
expect(element(by.css('.contextmenus')).isDisplayed())
.toBeTruthy('contextmenu');
expect(element(by.css('.contextmenus')).isPresent())
.toBeTruthy('cont');
});
html templates:
HTML
<div class="contextmenus"><ul style="z-index: 1000000;">
<li class=" tab-elem item-invoice_form_add_rate_expense_type"><a cid="c855">Добавить</a></li>
<li class=" tab-elem item-invoice_form_add_simple_position"><a cid="c857">Добавить позицию</a></li>
</ul></div>
HTML
<div class="Grid--Head--leftButton theme-color--before Grid--Head--leftButton-plus" style="width: 23px;">
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
</div>
I have one table where I am saving field name.
Now I want to use those fields in another model. So, How can I give name to that field?
e.g.
I have table named as Config with fields(id,key).
Data can be
1, Blog url
2, Site url
Now, I have 1 form where admin will add those value to database.
In Yii2 we create input field like
<?= $form->field($model, 'name')->textInput() ?>
But I want to create two textboxes with name blog url and site url.
So, How can I create it? What I have to write in place of name?
run this code on your command prompt
php composer.phar require --prefer-dist wbraganca/yii2-dynamicform "*"
after completion of above code.
add the following code in your form.
_form.php
<div class="panel panel-default">
<div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i> Addresses</h4></div>
<div class="panel-body">
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 4, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsAddress[0],
'formId' => 'dynamic-form',
'formFields' => [
'name',
],
]); ?>
<div class="container-items"><!-- widgetContainer -->
<?php foreach ($modelsAddress as $i => $modelAddress): ?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="panel-heading">
<h3 class="panel-title pull-left">Address</h3>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<?php
// necessary for update action.
if (! $modelAddress->isNewRecord) {
echo Html::activeHiddenInput($modelAddress, "[{$i}]id");
}
?>
<?= $form->field($model, "[{$i}]name")->textInput(['maxlength' => true]) ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
I am using angularJs, twitter bootstrap with asp.net mvc4. I didn't use angular-strap. I am trying to load a partial view in bootstrap modal. The partial view contains angular code.
Here is my code where I am calling the bootstrap modal:
#model IEnumerable<IMS.Domain.Model.GetAllRequisitions_Result>
#{
ViewBag.Title = "Requisition List";
Layout = "~/Views/Shared/MasterPage.cshtml";
}
Launch demo modal
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
</div>
</div>
<script type="text/javascript">
function loadCreateForm() {
var content = '#Url.Action("Create", "Requisition", new { area = "IMS" })';
$('div.modal-body').load(content);
}
</script>
Here is my code for 'Create' action of 'Requisition' controller:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div ng-app="">
<label>Sample: <input type="text" ng-model="sample" /></label>
<br />
<label>Show Value: {{sample}}</label>
</div>
<div class="ContainerRowButton">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
For ng-model="sample" when I am trying to show data by {{sample}} it stays {{sample}}. It's like my 'Create' action is not getting angularJs.
I've rendered all necessary scrips in the 'MasterPage.cshtml'. My MasterPage.cshtml contains:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/others")
And here is the code of my 'Bundle.config.cs' file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/others").Include(
"~/Content/bootstrap/js/bootstrap.js",
"~/Scripts/jquery.dataTables.js",
"~/Scripts/dataTables_bootstrap.js",
"~/Scripts/bootstrap-dropdown.js",
"~/Scripts/jquery.dataTables.columnFilter.js",
"~/Scripts/Custom/CustomScript.js",
"~/Scripts/jquery.validationEngine-en.js",
"~/Scripts/jquery.validationEngine.js",
"~/Scripts/angular.js"
));
What wrong am I doing? Need help ...
Adding to what #Muctadir said, you need to tell angular to check your modal partial for angular elements. You do that by calling $compile before injecting the partial into the DOM. The problem is that you have to be able to get access to the $compile service and you can't do that inside of your loadCreateForm(), you can only do that from an angular module. So, you need to organize your code in such a way that you can get what you need. Here's my suggestion:
Create a directive to handle your modal and its contents:
.directive('myModal', function($compile){
return {
replace:false,
link: function(scope, element, attrs){
var content = '#Url.Action("Create", "Requisition", new { area = "IMS" })';
elem.load(content, null, function(){
$compile(elem.contents())(scope);
});
}
};
});
That will load the content and then compile the contents using the current scope, but only after the content has been loaded from the server. Hope that helps.
In left pane there are some widgets the below code gives some idea about how the widgets are organized....
<div id="sites-widgets-1375699547529" class="sites-widget-container tab-content-div frog-touch-scroll active">
<div class="ui-editor-box">
<div class="image draggable" data-content="file/widget/0141D9112001BD9824CA7FB813F3CF04088C02AC50F154FA/icon.png" data-uuid="0141D9112001BD9824CA7FB813F3CF04088C02AC50F154FA" style="background-image:url(file/widget/0141D9112001BD9824CA7FB813F3CF04088C02AC50F154FA/icon.png);"/>
<div class="ui-editor-box-label">Text Activity</div>
</div>
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
<div class="ui-editor-box">
</div>
I want to drag and drop a widget to the container provided in the same web page. the code for the container is given below
<div class="sites-layout-one-one">
<div style="clear:both;"/>
<div class="bucket ui-sortable edit" data-order="1" data-attr="bucket"/>
<div style="clear:both;"/>
</div>
I'm trying to drag and drop the widget in to the container, but i cant able to do this, the code that i wrote is below
WebElement dragElement = driver.findElement(By.xpath("//div[#class='sites-widget-container tab-content-div frog-touch-scroll active']/div[#class='ui-editor-box'][1]"));
WebElement dropElement = driver.findElement(By.xpath("//div[#class='sites-layout-one-one']"));
Actions builder = new Actions(driver);
Action dragAndDrop = builder.clickAndHold(dragElement)
.moveToElement(dropElement)
.release(dropElement)
.build();
dragAndDrop.perform();
Thread.sleep(10000);
Please help me to sort out this...
Thanks in Advance
Shiva..
Just use the built in dragAndDrop action to handle this for you:
Actions builder = new Actions(driver);
builder.dragAndDrop(dragElement, dropElement).perform();
The API documentation is located here, which shows the usage for the dragAndDrop action:
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/interactions/Actions.html