How can I pass data from blade view to modal dialog :
For example :
I pass $user from controller to view :
$user = User::findOrFail($id);
return view('user.show')->withUser($user);
Next, I want to pass this data $user to a modal included in this view via a button like this :
#include('user.edit',$user);
and there in the modal I can set $user's values (like this : {!! $user->lastname !!} ) to edit them for example.
Please Help me :)
Try out this way. I am using a tag, but the solution should work for you as well with button.
<a
href="#"
data-target="yourModalId"
data-toggle="modal"
data-email="{{ $user->email }}"
data-username="{{ $user->username }}"
>
Edit
</a>
jQuery code:
$('#yourModalId').on('show', function(e) {
var link = e.relatedTarget(),
modal = $(this),
username = link.data("username"),
email = link.data("email");
modal.find("#email").val(email);
modal.find("#username").val(username);
});
Create the input fields inside the modal window with the id that are passed in find method.
That will put the values passed in the input fields inside modal window..
You can use the blade include() function, which accepts an array as the second parameter:
#include('user.edit', ['user' => $user])
Related
I need to simulate focus event on input to open NgbTypeahead dropdown , is it possible? Because i cant do it like:
.ts:
#ViewChild('inputExecutor') inputExecutor: ElementRef
focus$ = new Subject<string>();
click$ = new Subject<string>();
focused(){
this.executorForm.controls['executor'].setValue('');
this.focus$.next(this.executorForm.value.executor);
}
inputFocus(){
this.inputExecutor.nativeElement.focus();
}
html:
<input
class="choose-executor-input"
type="text"
name="executor"
formControlName="executor"
[ngbTypeahead]="searchExecutors"
(focus)="focus$.next($event.target.value); focused()"
(click)="click$.next($event.target.value);"
(selectItem)="itemSelected($event)"
[resultFormatter]="formatExecutors"
[inputFormatter]="formatExecutors"
#instance="ngbTypeahead"
#inputExecutor/>
<button
click)="inputFocus()"
class="btn btn-executor-open"></button>
</button>
So how i can focus on input to open dropdown? Any issues?
To accomplish this, you can fire an input event on the input element the NgbTypeahead is bound to, then call the focus method so that the input has focus and you can start typing immediately.
I started with the Open on focus demo from the ng-bootstrap website, and made the following changes:
Declare a new template variable elem so the DOM element is accessible inside the component TS file (note you can't use the existing instance as that is an NgbTypeahead not an HTML element):
Component HTML:
<input
id="typeahead-focus"
...
#instance="ngbTypeahead"
#elem
/>
Component TS:
#ViewChild('elem') elem: ElementRef;
Add a button to the template which will call a focus function - this is the button that when clicked will open the typeahead and focus on it:
<button (click)="openTypeahead()">Open Typeahead</button>
Add an openTypeahead function in the component TS file as follows:
public openTypeahead(): void {
// Dispatch event on input element that NgbTypeahead is bound to
this.elem.nativeElement.dispatchEvent(new Event('input'));
// Ensure input has focus so the user can start typing
this.elem.nativeElement.focus();
}
Please see this Stackblitz for a demo
I use
HTML:
<input #instance="ngbTypeahead" .../>
<button (click)="openTypeahead(instance)">Open Typeahead</button>
TS:
openTypeahead(inp) {
inp._elementRef.nativeElement.value = '';
inp._elementRef.nativeElement.dispatchEvent(new Event('input'));
inp._elementRef.nativeElement.focus();
}
Im trying to use pass my car value to another function, which i have no idea how. i tried to place the whole function btn-info-add into .span8. But this it will execute twice on the 2nd time.
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
var car; //car must be declared out of your function to be available for both functions
$(".span8").on("click", "table #trID", function() {
car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
You can create a hidden element inside your dialog (input would be great) and assign it your desire value.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input id="carvalue" type="hidden" value=""/>
</div>
Note that I created an input element (hidden, of course) which is going to store the value that I want to access later. After that, you can modify your code like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$("#carvalue").val(car); // Store value into hidden input
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
var car = $("#carvalue").val(); // retrieve value from input hidden
if(car != ""){
selectCourse(car);
}
});
This technique is commonly used in forms to pass additional information on AJAX calls. Your user will not notice its presence and you can keep working. Happy coding!
EDIT:
JQuery has a method called jQuery.data to store information into JQuery elements. So your values are going to be stored on the element itself. Your code will look like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
jQuery.data("#btn-info-add", "car", car); // store data inside jQuery element
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(jQuery.data("#btn-info-add", "car")); //execute ajax
});
I hope it helps you. Happy coding!
I have a problem in my KnockoutJS application that I can't seem to figure out. Basically, I've bound a list to a 'ko.computed' method which allows me to filter items from the main list. I use this list for my main display to the user. On each item in my template, I have one ore more buttons that I need to render as JqueryUI buttons. I can't seem to find the way to redraw the buttons correctly in my model once the computed triggers a change.
Here is a very (very) simple example of a mock view model:
function List(items) {
var self = this;
self.allItems = ko.observableArray(items || []);
self.search = ko.observable('');
self.filtered = ko.computed(function(){
var search = self.search();
return ko.utils.arrayFilter(self.allItems(), function(item){
return item == search;
});
});
}
My view might look like this:
Search: <input type='text' data-bind='value: search' />
<ul data-bind='foreach: filtered'>
<li>
<span data-bind='text: $data'> </span>
<button>NOTICE</button>
</li>
</ul>
And here is how I initialize the display:
$(function(){
var vm = new List(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
ko.applyBindings(vm);
$('button').button(); // <-- notice!
});
Note that everything works fine initially! I get the nice looking JqueryUI button when the page first displays... However, as soon as I enter a into the search box, the button loses it's style completely. I need to find a way to call $('button').button() again.
Is there an event or callback inside of Knockout.js that I could call to setup my ui buttons after the computed method is triggered?
Thanks in advance!
The reason the style is getting reset is because the dom element that the button was previously bound to has been destroyed.
You can solve this by creating a simple custom binding (not-tested)
ko.bindingHandlers.uibutton = {
init: function(element, valueAccessor) {
var $element = $(element), config = valueAccessor();
$element.button();
}
}
This can be added to your template with this addition
<button data-bind="uibutton: {}">NOTICE</button>
You can remove the call to $('button').button();
When using KO we can almost do without standard Jquery expressions altogether, often custom bindings allow us to do the same but with the possibility of more advanced things like reacting to observables etc.
Hope this helps
I am trying to create a button that will print a google map embedded on a webpage
see code:
function print(){
var contents = window.opener.document.getElementById("map_canvas");
document.write(contents.innerHTML);
window.print();
}
this is the div that holds my map
<div id="map_canvas" style="width:800px; height:500px;"></div>
and this is the print button
<input type="button" value="Print" onclick="print()">
When I click the print button I get an error "window.opener is null."
What is the correct code to print the map?
window.opener returns a reference to the window that created the window. No window.opener is needed here since you didn't create any new windows.
Directly use window.document.getElementById.
Try this:
function print(){
var contents = window.document.getElementById("map_canvas");
document.write(contents.innerHTML);
window.print();
}
var content = window.document.getElementById("map-canvas"); // get you map details
var newWindow = window.open(); // open a new window
newWindow.document.write(content.innerHTML); // write the map into the new window
newWindow.print(); // print the new window
Check if DIV that contain map on primary window have div with id="map_canvas"
I have the following scenario:
I have a button\link with a image inside like this:
<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage" />
SaveData!!!</button>
We are OK here! Now what I need to do is:
I want on the click that the image change for a loading element that is previously loaded in the page like this:
<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;" alt="loading"/>
And then when the load complete turn back the old button image, I ended with this code:
function loader() {
var $button = $('#myButton');
if (btnState == '1') {
$button.find('img').hide();
$button.prepend($('#loadingImage'));
$('#loadingImage').css({ 'display': 'inherit' });
btnState = '0';
}
else {
$button.find('img').hide();
$button.prepend($('#defaultImage'));
$('#defaultImage').show();
btnState = '1';
}
}
This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page?
The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.
You should do something like this, it will prevent the user from double submitting:
$('.button').click(function(evt) {
evt.preventDefault();
var button = this;
hideButton(button);
$('ID or CLASS').load('AJAX FILE URL', function() {
//On success, show button remove image
showButton(button);
});
});
function hideButton(button) {
$(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}
function showButton(button) {
$(button).next('img').hide();
$(button).show();
}
All of the code above should be in the $(document).load
Your HTML should look like:
<button type="submit" class="button"><img src="../../Content/images/check.png" />SaveData!!!</button>
There is no need for Id's now on anything.