Im using select2.js and i want to add an option that while choose that specific one, it will run a JS function or link to a web.
This is my js code:
jQuery(document).ready(function($) {
$(".client-select").select2({
placeholder: "choose client",
allowClear: true
});
});
You need to add select2:select listener which is similar to onChange,which will trigger function everytime you select a value from options.
Here it is,
jQuery(document).ready(function($) {
$(".client-select").select2({
placeholder: "choose client",
allowClear: true
});
$('.client-select').on('select2:select', function (e) {
var data = e.params.data;
if(data=='your_value'){
yourFunction();
}
});
});
Related
I have a dropdown menu which contains 3 options. This menu is shown inside a modal jQuery UI dialog.
I can open open the dialog and choose one of the three options. The chosen option is stored in a variable. This works fine. But if I open the dialog again and choose another option, the variable does not change - it contains the value of first selection.
$("#button").click(function()
{
var diag = "<select id='diagDropdown'>"
+"<option>Option 1</option>"
+"<option>Option 2</option>"
+"<option>Option 3</option>"
+"</select>";
$(diag).dialog(
{title: "Choose Option"},
{autoOpen: "false"},
{modal: "true"},
{draggable: "false"},
{ buttons: {OK: dialogOK} });
function dialogOK()
{
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
//working with chosen option
$(this).dialog("close");
});
Hope you can help me. Thanks in advance!
The problem is that each time you click on your element with id "button", you are creating a new dropdown with id "diagDropdown" in a new dialog.
Then your code :
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
is always selecting the first dropdown with id "diagDropdown" in the DOM.
Try this :
<input type="button" value="click me" id="button"/>
<script type="text/javascript">
// On DOM ready
$(function() {
var dropdown =
$('<select id="diagDropdown"> ' +
'<option>Option 1</option>' +
'<option>Option 2</option>' +
'<option>Option 3</option>' +
'</select>');
// Create the dialog (only once)
dropdown.dialog({
title: "Choose Option",
autoOpen: false,
modal: true,
draggable: false,
buttons: {
"OK": function() {
var chosenOption=$('#diagDropdown option:selected').val().toLowerCase();
//working with chosen option
$(this).dialog('close');
}
}
});
// Bind click event : on click just open the existing dialog
$('#button').click(function() {
$('#diagDropdown').dialog('open');
});
});
</script>
I am working on creating a dialog plugin using JQuery Dialog . Below are the parameters which can be passed . It includes button text which user wants to add and call back function name which would be executed on click of that button .
var settings = $.extend({
message: 'Your action is successful',
title: 'Message',
showButton: true,
buttonText: 'OK',
onButtonClick: 'OnButtonClick',
allowClose: true
}, options);
I am facing issues to attach that function name to click event of the button . I am trying to do something like below but it throws error .
$('#dialog-message').dialog({
buttons: [{
text: settings.buttonText,
click: window[settings.onButtonClick]()
}],
closeOnEscape: true,
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
}
});
Any suggestions How can I attach that Function Name to click event as I only have the function name .
The callers of your plugin should provide a callback for the onButtonClick option rather than a string. Like so:
function OnButtonClick(){
//does some cool stuff
}
var settings = $.extend({
message: 'Your action is successful',
title: 'Message',
showButton: true,
buttonText: 'OK',
onButtonClick: OnButtonClick,
allowClose: true
}, options);
And then you could bind the incoming function like this:
$('#dialog-message').dialog({
buttons: [{
text: settings.buttonText,
click: settings.onButtonClick
}],
closeOnEscape: true,
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
}
});
This is possible because the onButtonClick variable now holds a reference to the callback that the user of your plugin provided (as opposed to a string) through the settings they used to initialize the plugin.
Hope that helps!
I've seen many questions posted on this topic but none of the answers/suggestions seemed to work for me. I'm fairly new to JQuery so some assistance will be much appreciated!
I've got a table with links. For some reason I can only open the dialog box for the first record (I can do this multiple times). It doesn't work for any other records.
Here's my code:
$(document).ready(function() {
var dlg=$('#ticketDetails').dialog({
title: 'Ticket Details',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:850,
height:700
});
$('#view').click(function(e) {
//testing with static record
dlg.load('displayRecord.php?id=215', function(){
dlg.dialog('open');
});
});
});
all rows in the table has the following table link:
echo '<td>View </td>';
The div to display the dialog:
<div id="ticketDetails"> </div>
I also tried sticking alert('1'); into the $('#view').click function which does not fire for other records.
In your table, each row has the same id, "view". An id is supposed to be unique for a single element on a page, so you should change this to a class:
<td>View</td>
and change your script accordingly:
$('.view').click(function(e) { ... });
Inside the event handler, you can use the event variable e to get the element that was clicked, using its target property:
$('.view').click(function(e) {
alert( $(e.target).text() );
});
I have tried now the last 3 weeks to get a ajaxLink to work with a jQuery Dialog Box. I have a delete Bookmark Function and want that a dialog Box appears, where you have to confirm that you want to delete the Bookmark, before the Ajax Request is fired and deletes the Bookmark.
I assume that I have to add something to the beforeSend function, but I can not figure out what needs to be written in it. Could someone advice what I need to do? I hope someone knows the answer, I run out of ideas. Thank you very much in advance !
Here my sourcecode so far:
echo $this->ajaxLink("Remove Bookmark","/bookmark/remove/article ".$this->escape($entry->id),
array(
'id' => '',
'class' => 'btn orange delete dialog-confirm',
'dataType'=>'JSON',
'method' => 'post',
'update' => '.bookmark',
'beforeSend' => '????',
'complete' => '$("."+data+"").remove();if ($(".watchlist").length == 0){$(".watch").append("<p>No items watched</p>")}'
));
And my jQuery Dialog Box:
$('.dialog-confirm').click(function(e){
e.preventDefault();
var URL = $(this).attr("href");
$(this).css('display','block');
$('#dialogbox').dialog({
resizable: false,
height:180,
width:350,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, delete bookmark": function() {
window.location.href = URL;
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Your Ajax request must be triggered only if a user click on the "Yes, delete bookmark" button. Therefore, you need to add to this button function a jQuery ajax function and remove your first ajaxLink().
//in your view.phtml
<div id="dialogbox" style="display:none">Do you really want to remove this bookmark?</div>
<span style="cursor:pointer" class="btn orange delete dialog-confirm" id="1">Remove Bookmark</span>
<?php $this->jQuery()->addOnload('
$(function() {
var id;
$("#dialogbox").dialog({
resizable: false,
height:180,
width:350,
modal: true,
buttons: {
"Yes, delete bookmark": function() {
$.ajax({
type: "POST",
url: "/bookmark/remove/article",
dataType: "json",
data: "id="+id,
success: function(data, textStatus, jqXHR) {
$("."+data+"").remove();
if ($(".watchlist").length == 0) {
$(".watch").append("<p>No items watched</p>")
}
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$(".delete").click(function(e) {
id = this.id;
console.log(id);
$( "#dialogbox" ).dialog( "open" );
});
});
'); ?>
Now, if you click on Remove Bookmark, it displays a jQuery Dialog with two buttons: Cancel and "Yes, delete bookmark", and once you click on yes, it calls an jQuery.ajax function and send the id to /bookmark/remove/article as a parameter.
Given the following script:
$(function () {
$(".editLink").button();
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$(".editLink").click(function () {
var dialogDiv = $('#editPersonDialog');
var linkObj = $(this);
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updatePersonForm");
// unbind existing validation
$form.unbind();
$form.data("validator", null);
// check document for changes
$.validator.unobtrusive.parse(document);
// re-add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
// open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess() {
if ($("#update-message").html() == "True") {
$('#editPersonDialog').dialog('close');
$("#commonMessage").html("Update Complete");
$("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").show();
}
}
If I click the "X" button on the dialog the form closes fine. If I click the "Close" button then it does not close. I have verified that the code for the "Close" button is being called.
Both the "X" button and the "Close" button are both running the same statement: '$(this).dialog('close');'. Why would one work and the other not work?
As an aside the dialog will not open a second time unless I refresh the page. I imagine that these 2 problems may be related.
I have found many people with similar problems and a number of different solutions that worked for them. Unfortunately none of them worked for me.
Further Info:
The dialog displays a partial view in an Ajax form:
#using (Ajax.BeginForm("Edit", "Person", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
},
new { #id = "updatePersonForm" }))
{
#Html.ValidationSummary(true)
<div id="update-message" class="hiddenDiv"></div>
<div class="blockGraygradient">
#Html.Partial("_CreateEditCommon")
#Html.HiddenFor(model => model.SelectedPerson.Id)
#Html.HiddenFor(model => model.SelectedPerson.RowVersion)
#Html.HiddenFor(model => model.SelectedPerson.CreateTime)
</div><p/>
}
Try using this instead.
$(this).dialog('destroy');
We had exactly the same problem. In the end, every time you re-opened the dialog it was actually re-injecting the dialog markup into the DOM. Then, when you click close (for the second time) it only closes the first occurrence of the dialog, but not necessarily the one that's open. You can check this using a run-time DOM inspector like FireBug or Chrome's built-in developer tools.
I found out that the cause of both problems (the close button not working and being unable to show the dialog more than once without refreshing the page) was that I had included references to my script files in both my main page and the partial view being displayed by the dialog. Once I removed the script references from the partial view the problems disappeared.
(As an aside this has now raised another problem to do with an Ajax update back onto the main page when the dialog is closed. I think this is the reason that I put the scripts into the partial view in the first place).
You have too much recursion. You don't need to subscribe to the close event of your jQuery dialog and invoke $(this).dialog('close'); inside it. Simply comment this line or remove completely the close event subscription:
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
}
});