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.
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 });
} );
i'm using kendo Ui and jbox, i can open many times kendo ui window it's working perfect. i was integrared jbox modal window on Kendo ui Window. if i open jbox modal window on kendo ui window it's too working perfect. if i don't close kendo ui window i can open many times jbox modal window it's working good. if i reopen kendo window i can open jbox modal but in jbox javascript content doesn't work properly. i thinks it's about Jquery but i can't solve .
Jquery 1.9.1 Version
here is my code,
my index;
var ICCANPopUp;
$(document).on("click", ".k-overlay", function () {
ICCANPopUp.close();
});
$("#LoadFormDiv").kendoWindow({
width: "750px",
height: "90%",
draggable: false,
resizable: false,
modal: true,
title: "",
visible: false,
open: function(e) {
this.wrapper.css({ top: 25 });
$("html, body").css("overflow", "hidden");
},
close: function (e) {
$("html, body").css("overflow", "");
}
});
$('#LoadFormDiv').closest(".k-window").css({
position: 'fixed',
margin: 'auto',
top: '20%'
});
var ICCANPOPUPLOCATIONBEFOREOPEN;
function ICCANPopUpShow() {
ICCANPopUp = $("#LoadFormDiv").data("kendoWindow");
ICCANPopUp.content('<div style="margin-left:40%; margin-top:20%; ">Yükleniyor...<br/><img src="/Content/images/iccan-loader.gif" width="54" height="55" alt="iMarket Ürün Yükleniyor..." /></div>');
ICCANPopUp.title("");
ICCANPopUp.refresh({
url: "/IccanApi/GetProductByID",
data: { ID: 3012 }
});
ICCANPOPUPLOCATIONBEFOREOPEN = $(window).scrollTop();
window.scrollTo(0,0);
ICCANPopUp.center().open();
}
$("#LoadFormDiv").data("kendoWindow")
.bind("close", function (e) {
$("html, body").animate({ scrollTop: ICCANPOPUPLOCATIONBEFOREOPEN });
});
kendo ui window script's
$('#FavouriteWrp').jBox('Modal', {
width: 602,
height: 495,
closeButton: true,
ajax: {
url: '/Account/Login',
data: '',
reload: true
},
onClose: function () { ResetAllLoginStuff(); }
});
Jbox Modal Window Conent Script,(if i close and reopen kendo window and after if i open jbox modal window this codes not working)
$("form").submit(function (e) {
$(".ICCAN-Register-processing").css({ "display": "block" });
var emailForRegister = $("#UserName").val();
var passwordForRegister = $("#Password").val();
var passwordValidateForRegister = $("#PasswordValidate").val();
var smsForRegister = $('#Sms').prop('checked');
var mailingForRegister = $('#Mailing').prop('checked');
var agreementForRegister = $('#agreement').prop('checked');
$.ajax({
url: '/Account/Register',
data: JSON.stringify({
UserName: emailForRegister,
Password: passwordForRegister,
PasswordValidate: passwordValidateForRegister,
Sms: smsForRegister,
Mailing: mailingForRegister,
agreement: agreementForRegister
}),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response.isSuccess) {
alert("Kayıt Başarılı");
$(".ICCAN-Register-processing").css({ "display": "none" });
window.location.replace("/");
}
if (!response.isSuccess) {
$(".ICCAN-Register-processing").css({ "display": "none" });
$("#UserName").css({ "border": "1px solid red" });
$("#ResultText").show();
}
}
});
e.preventDefault();
e.unbind();
});
$("#ResultText").hide();
can somebody help me, thanks a lot
When i refreshed page i saw conflict jquery versiob, so i use newest version of jquery and problem is gone.
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 :)
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');
}