Does anyone know how I can update the style attribute of a division using an Ajax request?
For example, I have a division I inline style to display:hidden, and when a user clicks a link it changes the style to display:block
You don't need to perform an AJAX call to perform the above request. Plain old javascript will do. If you are using jQuery, try:
<div id="details">...</div
[Show]
<script type="text/javascript">
$("#toggle").click(function () {
$("#details").show();
});
</script>
For prototype, try:
<div id="details">...</div
[Show]
<script type="text/javascript">
Event.observe('toggle', 'click', function(event) {
$('details').show();
Event.stop(event);
});
</script>
Related
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!
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.
using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade guide;
Deprecated url method and use of title attribute; use aria-controls attribute
(#7132) The url method has been deprecated in favor of leaving the href attribute unmodified even for remote tabs. The href attribute will point to the actual resource and the aria-controls attribute will point to the associated panel. This means that the title attribute will no longer be used to specify a custom panel id.
I have this code:
var $t = $("#tabs");
$t.tabs("url", 0, url);
$t.bind("tabsload", function (event, ui) {
console.log('tabsload fired');
});
$t.tabs("load", 0);
I cannot figure out how to set the url value for the tab (this code is fired when the user clicks on a grid row and the url value is rebuilt based on grid values) now as I do not understand the upgrade guide to use the aria-controls comment.
The approach I have taken is to set the href of the AJAX link and then call the load method to reload the content.
I appreciate that this does not use the aria-controls attribute, but the snippet from the upgrade guide states that this attribute points to the panel - remote tabs receive their content based on anchor contained in the li element, so I figured I should be able to use this approach.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
$('#change-button').click(function (event) {
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
$('#tabs').tabs('load', 0);
event.preventDefault();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li>
<a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
</li>
</ul>
</div>
<button id="change-button">Change</button>
</form>
</body>
</html>
I am using a generic HTTP handler (this is the AJAX request) which simply echos back the text it is passed, e.g., Handler1.ashx?echo=some text to repeat. Note that my tabs consist of only one tab that makes an AJAX call to this handler.
To change the Url, I handle the click event of the button and modify the href of ajax-link like this and then reload it:
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
+ new Date().toTimeString());
$('#tabs').tabs('load', 0);
So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.
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.
});
What's the right way to initialize objects on a jquery mobile page? The events docs say to use "pageInit()" with no examples of that function, but give examples of binding to the "pageinit" method (note case difference). However, I don't see the event firing at all in this simple test page:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live('pageinit',function() {
alert("This never happens");
});
</script>
</body>
</html>
What am I missing? I should add that if you change pageinit to another event like pagecreate this code works.
---- UPDATE ----
This bug is marked as "closed" in the JQM issue tracker. Apparently opinions differ about whether this is working properly or not.
It started working when I embedded script within page div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
Used jQuery Mobile 1.0RC1
.live() is deprecated, suggestion is to use .on() in jQuery 1.7+ :
<script type="text/javascript">
$(document).on('pageinit', '#indexPage', function(){
// code
});
</script>
Check the online doc for more information about .on(): http://api.jquery.com/on/
Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.
jQuery(document).live('pageinit',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!
pageinit will not fire in case it is on secondary pages ( NOT MAIN page ) if it is written in common <script> tag...
I have such a problem - on secondary pages that are not loaded with 'rel="external"', the code in the common <script> tag is never executed...
really this code is always executed...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
althrough if you made "tabbed interface", using of "pageshow" is better
I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.
The easiest way I found to deal with this was to use JQM + Steal. It works like a charm as long as you put:
<script type='text/javascript' src='../steal/steal.js?mypage'></script>
Inside of the data-role='page' div.
Then use AJAX to connect anything that can use the same mypage.js and use an external link (by using the rel="external" tag) to anything that requires a different steal page.
#Wojciech Bańcer
From the jQuery docs:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try this:
$('div.page').live('pageinit', function(e) {
console.log("Event Fired");
});
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>