I have an ajax request and the result shound go in a bootstrap tooltip field.
´´´
function loadTooltip(idExecution) {
$('#tooltip' + idExecution).attr('title', "");
$.ajax({
url: (URL + "managementExecution/getAllPartecipantsExecution/"),
type: "POST",
dataType: "json",
data: {
idExecution: idExecution
},
success: function (text) {
$('body').tooltip({
selector: '[rel=tooltip]'
});
$.each(text, function (k, v) {
var oldTitle = "";
var lastname = v.lastname;
var oldTitle = $('#tooltip' + idExecution).attr('title');
$('#tooltip' + idExecution).tooltip({html:true}).attr('title', oldTitle + "<br>" + lastname);
});
}
});
}
This is my html:
<a id="tooltip<?php echo $e['id'];?>" onmouseover="loadTooltip('<?php echo $e['id'];?>')" href="<?php echo URL . 'managementExecution/getDataExecution/' . $e[DB_EXECUTION_ID]; ?>">
<?php echo date("d.m.y", strtotime($e[DB_EXECUTION_START]))."<br>".date("d.m.y", strtotime($e[DB_EXECUTION_END])); ?>
</a>
It's working but the text is not going to a new line, the <br> tag is not recognized and i have the text with <br> inside
Related
I'm trying to create filters using a Select2 dropdown and I do not know why the Select2:select event stop working after updating the html with the data that comes via Ajax.
Please help - My PHP is:
<div class="select-yellow fecha-container">
<select id="fecha" class="select2 fecha-addon" data-minimum-results-for-search="Infinity">
<?php foreach($fechas as $fecha): ?>
<option value="<?php echo $fecha; ?>"><?php echo formatDate($fecha); ?></option>
<?php endforeach; ?>
</select>
</div>
The JS file:
$('#fecha').on("select2:select", function(e) {
// here it's working
var fecha = $('#fecha').val();
var provincia = $('#provincia').val();
var request = $.ajax({
url: app.base_url + "/ajax-gallery/",
method: "GET",
data: {
provincia: provincia,
fecha: fecha,
tag: provincia
},
dataType: "html"
});
request.done(function (msg) {
if($.trim(msg).length) {
$('.gallery-container').html(msg);
var $filter = $('.gallery-container').find('.fecha-addon');
$('.fecha-container').html($filter);
$("#fecha option").each(function(){
if($(this).val()==fecha){
$(this).attr("selected","selected");
}
});
$('#fecha').select2({
minimumResultsForSearch: -1
});
//after rebind the event doesn't work
}else{
$('#gallery-notices').html('<strong>No hay más imagenes con esta fecha</strong>');
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
I would like to close my modalbox, so I return to the same page, after I click the "Select" button.
I am on shuffle.php. I open the modalbox and call the code in updaterecords.php. When I click Select I should return to shuffle.php. The problem is right now that I am redirected to updaterecords.php.
I try to solve that with adding this code to my AJAX call:
$('#editBox').on('hide.bs.modal', function (data) {
$('#editBox').modal('hide')
})
But I am still redirected. Is the code I added in the wrong place?
shuffle.php
<div class="modal-footer msg">
<form action="updaterecords.php" method="post">
<input type="hidden" id="fantasy-id" value="" name="id" />
<button type="submit" name="selectStore" >Select</button>
<button type="button" data-dismiss="modal">Close</button>
</form>
</div>
updaterecords.php
$(document).ready(function() {
$(".btn-open-modal").click(function() {
var id = $(this).data("id");
$.ajax({
type: 'post',
url: 'getdata.php',
data: {
post_id: id
},
success: function(data) {
console.log(data);
var jdata = JSON.parse(data);
if (jdata) {
console.log("is json");
$("#editBox").modal().show();
$('#id').val(jdata.id);
$("#editBox .modal-title").html(jdata.headline);
$("#editBox .modal-body").html("Weekday: " + jdata.weekday + "<br><br>Description: " + jdata.description); // + " " + $query $query => query
$('#editBox').on('hide.bs.modal', function (data) {
$('#editBox').modal('hide')
})
} else {
console.log("not valid json: " + data);
}
}
});
});
});
Please try to use $('.modal').modal('hide'); on updaterecords.php.
$(document).ready(function() {
$(".btn-open-modal").click(function() {
var id = $(this).data("id");
$('.modal').modal('hide');
$.ajax({
type: 'post',
url: 'getdata.php',
data: {
post_id: id
},
success: function(data) {
console.log(data);
var jdata = JSON.parse(data);
if (jdata) {
console.log("is json");
$("#editBox").modal().show();
$('#id').val(jdata.id);
$("#editBox .modal-title").html(jdata.headline);
$("#editBox .modal-body").html("Weekday: " + jdata.weekday + "<br><br>Description: " + jdata.description); // + " " + $query $query => query
$('#editBox').on('hide.bs.modal', function (data) {
$('#editBox').modal('hide')
})
} else {
console.log("not valid json: " + data);
}
}
});
});
});
i have problem replacing my ng-repeat
my html inside ng-app
<a href="#proceed" ng-click="order.submitOrderAjax()">
<?php print t('Finish order'); ?>
</a>
<ul>
<li ng-repeat="error in order.errors">{{ error.text }}</li>
</ul>
controller app.js
app.controller('orderController', function() {
this.errors = [];
this.submitOrderAjax = function(){
var data = {} // some data here like name, phone
jQuery.ajax({
type: 'POST',
url: Drupal.settings.basePath + 'ajax/submit_cart',
data: { 'order': data },
dataType: 'json',
success: function(response){
if(response.status == true){
var link = response.link.replace(/\\\//g, "/");
window.location.href = link;
}else{
this.errors = response.errors;
console.log(this.errors);
}
},
});
};
console.log returns what i need but ng-repeat is not updating
Actually html renders before response so you need render ng-repeat after response
<a href="#proceed" ng-click="order.submitOrderAjax()">
<?php print t('Finish order'); ?>
</a>
<ul ng-if="flag">
<li ng-repeat="error in order.errors">{{ error.text }}</li>
</ul>
Controller
app.controller('orderController', function($scope) {
this.errors = [];
$scope.flag=false;
this.submitOrderAjax = function(){
var data = {} // some data here like name, phone
jQuery.ajax({
type: 'POST',
url: Drupal.settings.basePath + 'ajax/submit_cart',
data: { 'order': data },
dataType: 'json',
success: function(response){
if(response.status == true){
var link = response.link.replace(/\\\//g, "/");
window.location.href = link;
}else{
this.errors = response.errors;
console.log(this.errors);
$scope.flag=true;
}
},
});
};
I have a problem with my script. Why this AJAX don't do anything..
Thanks For help..
In body tag
<div class="share_playlist">
<a href="#" data-toggle="tooltip" title="add to playlist" class="plyshr" id="<?php echo $tracks['track_id']; ?>">
<img src="assets/img/ico/share_icon.png" width="28">
</a>
</div>
and AJAX
$(document).ready(function(){
$(".plyshr").click(function() {
var id = $(this).attr('id');
var dataString = 'id='+ id ;
var parent = $(this);
//alert (data);
$.ajax({
type: "POST",
url: "playlist.php",
success: function(html)
data: dataString,
cache: false,
success: function(html)
}).done(function( msg ) {
parent.html(html);
});
});
});
some more details
And in playlist.php
include 'connect.php';
session_start();
$ip=$_SESSION['id'];
if ($_POST['id'])
{
$id=$_POST['id'];
$ip_sql="insert into playlist (id_user, track_id) values ('$ip','$id')";
$list = mysql_query($ip_sql);
if(isset ($list)){
echo ("succes");
}
else
{
echo("failed");
}
}
you are having a syntax error in your javascript
success: function(html){
data: dataString,
there should be a brace
I have to execute a authentication process using JQuery. I have two textbox UserName and Password and two button are Login and Submit.
If i am clicking on Submit button then it will automatically fire validation that good and this functionality i have to implement on Login button click.
So how could i achieve automatic validation on button click?
Why i would like this:
Usin JQuery it is sending a request to the server with UserName and
Password during that time i will display Processing....
Then it will verify supplied value with database and return response
with Success or Failed then i will display either Success or Failed.
Here is the code snippet:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")
#using (Html.BeginForm(null, null, FormMethod.Get, new { id = "Form1", name = "Form1" }))
{
<table>
<tr>
<td>
User Name
</td>
<td>#Html.TextBoxFor(u => u.UserName, new { id = "txtUser" }) #Html.ValidationMessageFor(u => u.UserName)
</td>
</tr>
<tr>
<td>
Password
</td>
<td>#Html.TextBoxFor(u => u.Password, new { id = "txtPassword" }) #Html.ValidationMessageFor(u => u.Password)
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="Login" onclick="checkAuthentication();" />
<input type="submit" value="Submit" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvStatus" class="loginMessageStatus">
</div>
</td>
</tr>
</table>
}
<script language="javascript" type="text/javascript">
function getUserCredentials() {
var user = jQuery('#txtUserName').val();
var pass = jQuery('#txtPassword').val();
return { UserName: user, Password: pass };
}
function clearUserCredentials() {
jQuery('#txtUserName').val("");
jQuery('#txtPassword').val("");
jQuery('#txtUserName').focus();
}
function checkAuthentication() {
jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
var postData = getUserCredentials();
var ajaxResponse = $.ajax({
type: "post",
url: '#Url.Action("Index", "Login")',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postData),
success: function (result) {
var res = jQuery.parseJSON(result);
if (res.Success == true) {
jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
jQuery.doTimeout(100, redirectToPage);
}
else {
jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
}
}
});
}
function redirectToPage() {
href = '#Url.Action("Index", "TabMaster")';
window.location.href = href;
}
Note:-
Validation completely work with Submit button
Verifying process completely work with Login button ( just i have to integrate validation with Login button)
you can do the validation using the onclick of the submit button with the following event handler:
Add an identifier to the button:
<input id="SubmitButton" type="submit" value="Submit" />
JavaScript:
$(document).ready(function(){
$("#SubmitButton").click(function(){
return checkAuthentication();
});
});
Change the Validation method to return whether it failed or not:
function checkAuthentication() {
var _user = jQuery.trim(jQuery('#txtUserName').val());
var _pass = jQuery.trim(jQuery('#txtPassword').val());
if (_user.length == 0 || _pass.length == 0) {
jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>User Name and Password are required!</div>")
return false;
}
else {
jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
var postData = getUserCredentials();
var ajaxResponse = $.ajax({
type: "post",
url: '#Url.Action("Index", "Login")',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postData),
success: function (result) {
var res = jQuery.parseJSON(result);
if (res.Success == true) {
jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
jQuery.doTimeout(100, redirectToPage);
}
else {
jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
}
}
});
return true;
}
}
This should then stop the submit if the validation fails.
I have solved this one:
I have used only submit button
<input id="btnLogin" type="submit" value="Login" />
Following are the updated code
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//$.preloadCssImages();
$("#btnLogin").click(function () {
if ($("#Form1").valid() == true) {
checkAuthentication();
return false;
}
});
});
function getUserCredentials() {
var user = jQuery('#txtUserName').val();
var pass = jQuery('#txtPassword').val();
return { UserName: user, Password: pass };
}
function clearUserCredentials() {
jQuery('#txtUserName').val("");
jQuery('#txtPassword').val("");
jQuery('#txtUserName').focus();
}
function checkAuthentication() {
jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
var postData = getUserCredentials();
var ajaxResponse = $.ajax({
type: "post",
url: '#Url.Action("Index", "Login")',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postData),
success: function (result) {
var res = jQuery.parseJSON(result);
if (res.Success == true) {
jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
jQuery.doTimeout(100, redirectToPage);
}
else {
jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
}
}
});
}
function redirectToPage() {
href = '#Url.Action("Index", "TabMaster")';
window.location.href = href;
}
</script>