i'm using the jquery noty plugin and when someone clicks the popup, i want it to goto a URL (below) but i cant figure this out... can someone give me a quick fix.. ?
URL i want it to goto: script.php?hidenoty=true
<script type="text/javascript">
function generate(layout) {
var n = noty({
text: "<?php echo $motd?>",
type: 'warning',
dismissQueue: true,
layout: layout,
theme: 'defaultTheme',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 3, // you can set max visible notification for dismissQueue true option
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {
$.ajax({ url: 'script.php?hidenoty=true' });
},
afterClose: function() {}
},
buttons: false // an array of buttons
});
console.log('html: '+n.options.id);
}
function generateAll() {
generate('topCenter');
}
$(document).ready(function() {
generateAll();
});
</script>
Change this line...
$.ajax({ url: 'script.php?hidenoty=true' });
to this...
window.location.href = 'script.php?hidenoty=true';
ajax is used specifically to load something without changing the page, so the opposite of what you want :)
Related
I have this function for tooltip (works fine):
$('.tooltip').jBox('Tooltip', {
closeOnMouseleave: true,
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
and then I have this function for loading a div content every ten seconds (works fine):
$('#responsecontainer').load('live.jsp');
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp');
}, 30000);
$.ajaxSetup({ cache: false });
} );
This links works fine everywhere, except in dynamically loaded div.
<a class="tooltip" data-ajax="id=5" href="tooltip.html"Link</a>
Does anyone know how to make this link work when it is in the contetnt of the dynamically loaded div? Thank you very much
jBox comes with an attach() method: https://stephanwagner.me/jBox/methods#attaching-jbox
You should use this method to attach your jBox and place your jBox in an variable:
var myJBox = new jBox('Tooltip', {
closeOnMouseleave: true,
attach: '.tooltip',
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
Then you can reattach the jBox anytime with myJBox.attach():
$('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
}, 30000);
$.ajaxSetup({ cache: false });
} );
This way you make sure that jBox won't attach itself to an element multiple times.
You will need to reapply the tooltip as the DOM content is changed.
Create a function
function applyTooltip () {
$('.tooltip').jBox('Tooltip', {
closeOnMouseleave: true,
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
}
call the function on JQuery load callback
$('#responsecontainer').load('live.jsp', applyTooltip);
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp', applyTooltip);
}, 30000);
$.ajaxSetup({ cache: false });
} );
On my page i have bootstrap owl carousel and contact form. Problem is either contact form is working or carousel slider sliding pictures - one from both. I found out where the problem is but have no idea how to solve that. Below find my JS code. First is for owl carousel and rest two for my contact form.
<script>
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
});
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
};
</script>
When i use as above - my contact form is working i mean mail i send and message is shown to user - but my carousel is not sliding pictures - it's stack.
If i want my carouse works i have to cut markers at the end like within below:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
this one was cutted from the end:
});
and now carousel works but not contact form. I belive i still have some marker typo within my JS, can you take a look?
FURTHER DISCUSSION:
If i split carousel JS to separate bracket - but without correctly enclosed mark - then everything seems to be working.. ;/ see below:
<script>
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
}
</script>
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
};
</script>
Try below code:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
}
</script>
Try to remove the comment inside the json:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false,
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
});
It is not syntactically correct.
I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});
A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback
i am trying to close the dialog box automatically after i update the button in dialogbox, but it will not close automatically, is there any proper solution to resolve this issue? this is my code.
<script>
jQuery(function () {
var jQuerydialog = jQuery("#view_dialog").dialog({
autoOpen: false,
title: 'Schedule',
height: 200,
width: 350,
resizable: true,
modal: true,
});
jQuery(".view_dialog").click(function () {
jQuerydialog.load(jQuery(this).attr('href'),
function () {
jQuerydialog.dialog('open');
});
return false;
});
});
</script>
$('#view_dialog').dialog('close'); should work fine.
change of code will work. :)
function dialogOpen(param){
//Getting Html For View
var result = jQuery.ajax({
type: "POST",
url: FULL_BASE_URL+"url"+param,
async: false
});
createDialogBoxById('view_dialog','title','350','200',result.responseText);
}
I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});
Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}
I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}