JQuery Autocomplete Stops Working After Postback - jquery-ui

I have an autocomplete script that works ok in the sense that it shows the options to select from after the user types 2 letters. Now, the problem I have is that after the selection is made and the text field is filled out, the script stops. For example, if I make a selection from the given entries, and for some reason I have clear the text field, once I start typing again, the autocomplete doesn't show anything at all.
The form performs a postback everytime I select values from a couple of dropdown controls, and I noticed the script stops once the postbacks are triggered. Is there any way I can
have the scripts running after each postback?
If anybody can point the right directions, I would really appreciate it.
Thanks.
<script language="javascript" src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" src="/Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" src="/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link href="/Scripts/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
//Wait ##### seconds for form to load before calling the function.
window.onload = function(){
window.setTimeout(readyCall, 1000);
}
function readyCall(){
//Variable for Array where Title column values will be pushed to.
var Requestors = [];
//Variable for the Requestor Text Field.
var RequestorField = "input[id$='FormControl0_V1_I1_T2']"
//Call the SPServices library.
$().SPServices({
operation: "GetListItems",
listName: "Requestor",
CAMLViewFields: "",
async: false,
completefunc: function (xData, Status){
$(xData.responseXML).SPFilterNode("z:row").each(function(){
Requestors.push($(this).attr("ows_Title"));
});
}
});
//Input field from form.
$(RequestorField).autocomplete({
source: Requestors,
minLength: 3,
focus: function(event, ui){
$(RequestorField).val(ui.item.value);
return false;
}
});
}
</script>

Related

jQuery: how to trigger a click on document.ready only once?

I need to trigger a link, but only one time.
The problem is that the link loads the same page with some additional informations from a GET-function. So the page is in an endless reloading cycle.
This is my (dummy) code:
<a id="sendbutton" href="myurl.com/data1&data2">CLICK</a>
<script type="text/javascript">
$(document).ready(function(){
$('#sendbutton')[0].click();
});
</script>
PS: This is related to a cron job. This event only has to occur once a day.
You could verify the URL, and if it contains parameters, do not trigger the link.
<a id="sendbutton" href="myurl.com/data1&data2">CLICK</a>
<script type="text/javascript">
$(document).ready(function(){
if(location.pathname == "" ){
$('#sendbutton')[0].click();
}
});
</script>
I'm using the global variable "location" which store information about the current URL. Try this!

Change page on swipeleft/swiperight

I have problem with mobile/tablet version of page which I create
I need this: When someone look at product detail and move him to right/left (touch/swipe) then I need load next/previous product detail (= Example: Now I on page with id=2 when I go right, then I load page with id=3, npw I on page with id=3 and I go left then I load page with id=2.. etc.. with different pages id).
I look in thread here, but this solution is not dynamic and I have problem applicate it. Next I inspirated in W3C here.
Now I have these codes which not work:
JS file:
$(document).on('pageinit', function() {
$('.epicFullscreen').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
});
$('.epicFullscreen').bind('swiperight', function()
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide");
});
});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });
HTML:
<script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="funkce/skripty.js" type="text/javascript"></script>
I need use old JQuery 1.7.1. because this site using it and everything works fine, with newer JQuery I can have new problems. For that I use older JQuery-mobile 1.3.2. which must work with JQuery 1.7.1. ("jQuery Mobile 1.3 supports jQuery 1.7 and newer") . I can´t include "jquery.mobile-1.3.2.min.css" because this styles not work together with my styles correctly.
HTML in body is like that:
<div class="epicFullscreen">
<img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
</div>
Now I have dynamic solution with arrows (right/left) and with adding correct urls with PHP, but on tablet/mobile user like using touch not clicking on arrows etc...
=> Where I have problem and why not work my current solution? And how I can change this static JS to dynamic JS?
try this simple code .....
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I found solution for that I make this answer. I simplify my problem and create simple page.
Code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).on("pageinit",function(){
var pathname = $(location).attr('href');
var leva = $('#le').attr("href");
var prava = $('#pr').attr("href");
$("body").on("swiperight",function(){
<!--alert("You swiped right!");-->
location.href=prava;
});
$("body").on("swipeleft",function(){
<!--alert("You swiped left!");-->
location.href=leva;
});
});
</script>
</head>
<body>
<div id="test_div" style="display: block;">
<img src="test.gif" width="100px">
<a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
<a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>
</body>
</html>
I have this one hack - in PHP I know on which page I am, which page is before and which is next, I add this links it to arrows (which have tag "a"). This function working perfect. But I use this functional code to get correct URL => I don´t need some big function in JQuery which can split actual url with RegEx, know on which page I am, know if exist next page etc... Now I must only style this code to my page, but this is working.
I thank Omar for his time and I close this topic.

How do run javascript after loading PartialView in ASP.NET MVC?

I'm trying to get jQuery plug-in meioMask to work in a MVC Partial View.
As a trial, the following works:
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
$('#StartTimeText').setMask('time');
});
</script>
</head>
<body>
<input type="text" id="StartTimeText" />
</body>
The text edit box gets a mask edit applied. However, my text edit box is in a MVC partial view that gets shown when user clicks on an item in the main view. In the main view's <head> I added the following:
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.meio.mask.min.js")" type="text/javascript"></script>
In CustomFormPartialView.cshtml, I have the following:
<script type="text/javascript">
jQuery.ajax(
function ($) {
$('#StartTimeText').setMask('time');
}
);
</script>
<input type="text" id="StartTimeText" />
But the text box remains a regular text box with no edit mask applied. I assume this is because the setMask function isn't getting run. I've tried using jQuery.get and jQuery.post as well, none of them made any difference.
Sorry if this has already been asked, I've tried other solutions without any luck. I'm a bit new in this area, so if someone can post as complete code example as possible it'll be greatly appreciated. Thanks.
EDIT:
Following JasCav's suggestion, I've put the following in the <head> section of the file. As far as I can tell, the ajax function isn't getting run at all. This is using DevExpress's MVC Scheduler if that's any help. I'm not getting any errors in FireBug.
<script type="text/javascript">
jQuery.ajax({
url: '/WebTMS_MVC/Calendar/SchedulerPartial',
type: 'POST',
success: function (data, textStatus, xhr) {
$('#StartTimeText').setMask('time');
}
});
</script>
You can use jQuery's ajax function provides a number of callbacks that you can use to perform specific actions after completion of the ajax call (success and complete are two). See more at jQuery's documentation for the ajax function.
$.ajax({
url: yourUrl,
type: "GET",
data: formData,
success: function(data) {
// Do your stuff here.
});

JQuery UI Dialog not found

I'm trying to implement the pop up contact us dialog in this tutorial:
http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx
I have a working version of the solution that runs absolutely fine.
While trying to integrate this into my own solution I've ran into a problem.
I've created a contactdialog.js file in my scripts directory:
/// <reference path="jquery-1.6.2.min.js"/>
/// <reference path="jquery-ui-1.8.11.js"/>
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("</div>")
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
Then in my view I have near the top:
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="~/Scripts/contactdialog.js" type="text/javascript"></script>
And further down:
#Html.ActionLink("Contact Us", "ContactUs", "Home", null, new { #class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "Contact Us"})
Now my link succesfully enters the javascript function, and seems to do the add class OK.
However when it gets to the .dialog function it throws the following exception:
"Object doesn't support property or method dialog"
Which would seem to indicate the jquery-UI hasn't been loaded.
However I can't figure out why?
If I load up the page in Chrome and check the page source the links to the jquery-ui-1.8.11.js happily open ok.
Some hints:
Is jqueryUI being loaded by another partial view (which is why you see it get loaded in developer tools) but the JS that calls .dialog is being rendered in a different partial view?
Try placing jqueryUI in the master/layout views?
I've changed to using bundling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/contact")
For reasons completely beyond me at present this has kicked it into life, and the dialog is now being presented!

TypeError: $("#datepicker").datepicker is not a function

Ive read the other questions about this and I know that this is related to date picker not loaded on the page. however I would like to know how to figure out which functions have loaded with JQuery.
The code I'm using is quite basic so I'm not certain why this is failing anyways:
<script type='text/JavaScript' src='jquery.js'></script>
<script type='text/JavaScript' src='jquery.ui.core.js'></script>
<script type='text/JavaScript' src='jquery.ui.widget.js'></script>
<script type='text/JavaScript' src='jquery.ui.datepicker.js'></script>
<script src='jquery.validate.js' type='text/javascript'></script>
<link href='jquery_ui_base\jquery.ui.all.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
jQuery(function() {
calender();
});
function calender(){
$( '#datepicker' ).datepicker()
}
</script>
this usually happens when the jquery core and/or the datepicker js is not being loaded.
check if it's loading (a 200 response). Make sure you have the correct paths and proper read permissions.
also, make sure the jquery core is loaded before the datepicker, and that datepicker is loaded before $( '#datepicker' ).datepicker() .
Also, you could try uploading a new version of datepicker.

Resources