We Keep Coding

HTML in Sweet Alert

This has been answered several times but it seems Sweet Alert has made changes and html:true no longer works, just trying to add a clickable URL
Docs say
HTML is no longer used. Instead, use the content object.
but they don't really provide any examples
Below code works but displays the entire <a href .... </a> rather than just the CLICK HERE
swal({
title: "TITLE HERE",
//text: "<a href='#'>CLICK HERE<a>",
html: true
});

This code should work . You can use content now with specific DOM element
var el = document.createElement("a");
el.href = "www.stackoverflow.com";
el.innerText = "Click here";
swal("Write something here:", {
content: el,
});
check this here :
https://sweetalert.js.org/docs/#content
as shown in the sample you can pass a slider input to the alert
Here is a working fiddle
https://jsfiddle.net/vq13hac4/2/

Sweet Alert can handle the creation of the html element for you. So the answer by Niladri can be rewritten as:
swal("Write something here:", {
content: {
element: "a",
attributes: {
href: "http://www.stackoverflow.com",
innerText: "Click here"}}});

#Niladri options is good for Sweet Alert 2.
var form = document.createElement("div");
form.innerHTML = `
<span id="tfHours">0</span> hours<br>
<input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
onchange="window.changeHours(this.value)"
oninput="window.changeHours(this.value)"
><br>
<span id="tfMinutes">0</span> min<br>
<input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
onchange="window.changeMinutes(this.value)"
oninput="window.changeMinutes(this.value)"
>`;
swal({
title: 'Request time to XXX',
text: 'Select time to send / request',
content: form,
buttons: {
cancel: "Cancel",
catch: {
text: "Create",
value: 5,
},
}
}).then((value) => {
//console.log(slider.value);
});
I have created a Codepen with a Sweet Alert form data inside. Try it here!

How to get dataItem of modal window (Kendo-UI)

I'm trying to get an instance of the current modal window (to save the data of the modal window to a file). But no success. I tried to do this via onActivate and then console.log($(this));
What is the correct method for doing this? Or I should have filled the data via template and then use content property of the kendoWindow ? THX!
Grid:
$("#grid")
.kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/GridData/GetCustomers",
dataType: "json"
}
}
},
columns: [
{
command: { text: "View Details", click: viewDt },
title: "View DT",
width: "100px"
}
]
});
HTML:
<form id="formViewDetail">
Имя клиента:<br>
<input type="text" name="ClientName" id="ClientNameViewDetail" value="">
<br>
ОКПО:<br>
<input type="text" name="ClientOKPO" id="ClientOKPOViewDetail">
<br>
Дата регистрации:<br>
<input type="text" name="RegistrationDate" id="RegistrationDateViewDetail">
<br>
Дата закрытия:<br>
<input type="text" name="RemovalFromClientsDate" id="RemovalFromClientsDateViewDetail">
<br>
Комментарий:<br>
<input type="text" name="Comment" id="CommentViewDetail">
<br>
<button id="SubmitViewDetail">Сохранить</button> <button id="CloseViewDetail">Закрыть</button>
</form>
Modal window:
var myWindow = $("#window");
myWindow.kendoWindow({
width: "600px",
title: "Редактирование данных клиента:",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
activate: onActivateWnd
//close: onClose
});
function onActivateWnd(e) {
console.log($(this));
}
Fill in data:
function viewDt(e) {
var dItem = this.dataItem($(e.currentTarget).closest("tr"));
console.log(dItem);
myWindow.data("kendoWindow").center().open();
//disabling input
$("#formViewDetail").find("#ClientNameViewDetail").prop('disabled', true);
$("#formViewDetail").find("#ClientOKPOViewDetail").prop('disabled', true);
$("#formViewDetail").find("#RegistrationDateViewDetail").prop('disabled', true);
$("#formViewDetail").find("#RemovalFromClientsDateViewDetail").prop('disabled', true);
//passing data to form input
$("#formViewDetail").find("#ClientNameViewDetail").val(dItem.ClientName);
$("#formViewDetail").find("#ClientOKPOViewDetail").val(dItem.ClientOKPO);
$("#formViewDetail").find("#RegistrationDateViewDetail").val(dItem.RegistrationDate);
$("#formViewDetail").find("#RemovalFromClientsDateViewDetail").val(dItem.RemovalFromClientsDate);
}

The provided information suggests that the Window holds one data item from the Grid, which is displayed when the user clicks on a button inside a Grid row. In this case, it will be a lot easier to retrieve the desired information from the Grid's data item, instead of the Window's content. The Grid data item is available in the dItem variable.
If you want to save the Customer information after the user has edited it, then consider using the Grid's built-in popup editing and the save event. In this way, the Grid data item will always hold the latest values.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save
http://demos.telerik.com/kendo-ui/grid/editing-popup
It is also possible to use popup editing with a custom popup edit form template:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template
Finally, in order to get a data item with the Kendo UI-related stuff inside, use toJSON() to get a plain object:
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-toJSON

Why jQuery is not working on the printed-element via PHP?

I tried validation on HTML element which get printed via PHP but it is not working, but it does work when I put the same HTML without PHP.
Below is the HTML in which the actual data will be printed via AJAX:
<div class="row" id="live_data">
// here will all radio buttons and images echo via ajax
</div>
Here is the AJAX:
function fetch_all() {
var form_name = 'package_form2';
$.post('ajax/ajax_form_get_all_packages.php',{form_name:form_name}, function(result) {
console.log(result);
$('#live_data').html(result);
});
} fetch_all();
Here is the actual data which gets echoed via Ajax:
$output .= '
<div class="col-md-4">
<label for="'.$id.'">
<img src="uploads/'.$img.'" class="img-responsive">
</label>
<div>
<div class="radio text-center">
<input type="radio" id="'.$id.'" value="'.$code.'" name="optradio" class="optradio">
</div>
</div>
</div>
';
Here is the code of FormValidation:
$(document).ready(function() {
$('#menu1_info').formValidation({
message: 'This value is not valid',
icon: {
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
optradio: {
validators: {
notEmpty: {
message: 'Please choose one of the Package'
}
}
}
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var fv = $form.data('formValidator');
$form.bootstrapValidator('disableSubmitButtons', false);
});
});

There is no element with class optradio in your markup. Instead there is one with attribute name equal to optradio:
$(document).on('change', '[name="optradio"]', function() {
alert("Radio button clicked");
});
UPDATE
If I understood correctly, #menu1_info element comes from the ajax response
$(document).ready(function() {
$('#menu1_info').formValidation({
Here you are trying to select an element on document ready, but this element is not present to the DOM yet because it is appended asynchronously (after document ready event).
So, you have to initialize your plugin after the target element is present to the DOM (in the ajax callback function).
// The $('#menu1_info') element is not present now
$.ajax({
url: '...',
...,
success: function(data) {
// Append data from ajax call
$('#target').append(data);
// Now, $('#menu1_info') element is present
$('#menu1_info').formValidation({ ... });
}
});

There is no such element in the response '.optradio'.
Better to change to this:
$('#live_data').on('change', ':radio', function() {
alert("Radio button clicked");
});
Also you can delegate to closest static parent which in your case is #live_data

jQuery UI dialog closes on enter in input field

I open my dialog with a button then I place my cursor in a input field and presses enter my dialog closes and this line is inserted to the address bar:
jQuery:
$('#dialog').load("form-incident.php").dialog({
title: "Add Incident",
autoOpen: false,
resizable: false,
width: 800,
modal:true,
position: ['center', 'top+50'],
buttons: {
Add: function(){
$.ajax({
url : 'save.php',
type : 'POST',
data : $('form').serialize(),
context: $(this),
success: function (result) {
if (result === "true") {
alert('Incident has been added successfully');
} else {
alert('ERROR: Cannot insert data to MySQL table');
}
window.location.reload();
$(this).dialog( "close" );
},
error : function(){
alert('ERROR: Check database connection');
}
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
form-incident.php:
<form>
Name: <input type="text" name="name" id="name"><br><br>
Project:
<select name="project" id="project">
<option value="test">Test</option>
</select><br><br>
Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea>
</form>
How can I fix the problem so the dialog box does not close but still reacts to enter if there was some suggestions from earlier where the form was filled out?

Okay, I forgot that implicit submission will still happen if there is only a single input element in the form, even if there isn't a submit button.
So, it looks like the problem is happening from the form being submitted. But in that case, calling preventDefault() on the submit even will fix it.
I threw together a fiddle with your code snippets from above, and was able to reproduce the problem. Once I put in the preventDefault(), it stopped happening. Please check it out, and see how it differs from your live code.
https://jsfiddle.net/elezar/u0sfx22p/2/

Typeahead submit with enter

I'm using bootstrap typeahead and I'm wondering, how do I make it submit when clicking the enter button? In other words, if I typed "hello" into the typeahead input and pressed enter, how would I submit "hello"?
I've already made it so that the typeahead doesn't auto-select the first result.
This is my code:
<form method="POST" action="script.php">
<input name="typeahead_field" class="typeahead" data-provide="typeahead" autocomplete="off" type="text">
</form>
jQuery:
$('.typeahead').typeahead({
items: 10,
source: function (query, process) {
$.ajax({
url: 'typeahead.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data) {
process(data);
}
});
},
highlighter: function(data) {
// code that returns each result
return html;
},
updater: function(data) {
// code that redirects the user if they click the selection
},
});
Please help!

Old question, but worth answering. Here is a possible solution:
$('.typeahead').on('keydown', function(e) {
if (e.keyCode == 13) {
var ta = $(this).data('typeahead');
var val = ta.$menu.find('.active').data('value');
if (!val)
$('#your-form').submit();
}
}
EDIT: First attempt was very naive :)

You need a submit button to enable submit on enter. You can hide the button with this CSS:
<input type="submit" style="position: absolute; left: -9999px">
(from https://stackoverflow.com/a/477699/759971)

works well, but doesn't highlight selection like mouse-over event does. Maybe this solution would work better as seems to encapsulate the gist of previous answer.
https://bwbecker.github.io/blog/2015/08/29/pain-with-twitter-typeahead-widget/