I Want to access tab-section with id #hotel-amenities but this link is not working
http://localhost/travel/deals/package?action=packagedetails&destination=singapore&package=FFTS9965#hotel-amenities
while this link is working fine
http://localhost/travel/hotel-detailed.html#hotel-amenities
Please help
<a id="bookmarkme">Add Bookmark</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//Function for add bookmark this page
$(function() {
$('#bookmarkme').click(function() {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title, window.location.href, '');
} else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(location.href, document.title);
} else if (window.opera && window.print) { // Opera Hotlist
this.title = document.title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
</script>
Related
I am working on jQuery mobile dynamic dialog. Everything is working fine except the close event.
$(document).ready(function () {
$('#btnalert').click(function () {
alert('click');
msg('hello', 'info', function () {
alert('call back function');// this line is not called
});
});
});
function msg(_msg, _title, _okCB) {
try {
if (_title == null || _title == undefined || _title == '') {
_title = 'Information';
}
if (_msg == null || _msg == undefined || _msg == '') {
_msg = 'Error found. Please contact your administrator.';
}
// Create it in memory
var dlg = $("<div id=\"dlgAlert\" class=\"ui-corner-all ui-shadow\" data-close-btn=\"right\" />")
.attr("data-role", "dialog")
.attr("id", "dialog");
var header = $("<div />")
.attr("data-role", "header")
.attr("role", "banner")
.html("<h2>" + _title + "</h2>");
var content = $("<div style=\"padding: 15px;\" />")
.attr("data-role", "content")
.append($("<p />").html(_msg));
content.append("<div ><a class='dlgalert' href='#index' data-rel='back' data-role=\"button\" data-theme=\"c\" >Close</a></div>");
dlg.append(header).trigger('create');
dlg.append(content).trigger('create');
dlg.appendTo($.mobile.pageContainer);
$.mobile.changePage(dlg, {
transition: "pop",
role: "dialog",
reverse: false
});
} catch (e) {
alert(e);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<a id="btnalert" data-role="button"> alert</a>
add below code in your function . check here DEMO
dialogs are simply pages which display dialogs . so here you can call pagehide event.
dlg.on("pagehide",function(){
alert("Dialog closed");
});
or check DEMO
dlg.off("pagehide").on("pagehide",function(){
alert("Dialog closed");
});
This is a simple test case for PhantomJS to demonstrate that an event handler that, when invoked, executes an AJAX call, does not work.
I've created a simple test here to try and access some content loaded via AJAX. It's very possible I've done something wrong, in which case I'd appreciate someone pointing out what that is. However, if not, I think there is a problem with PhantomJS.
Here's a simple page with a single that has a change event bound to it. When the value of the changes, it loads some content from the server and replaces the content of a specific <p>
The text of the <p id="bar">foo</p> should change to 'bar' after the ajax call is completed and processed.
Can anyone help me out?
<html>
<head>
<title>AJAX test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$('#getBar').change(function() {
$('#bar').load("/test/bar");
});
});
</script>
</head>
<body>
<h1>Foo</h1>
<div>
<select id="getBar">
<option value=""></option>
<option value="go" id="go">Get Bar Text</option>
</select>
</div>
<p id="bar">foo</p>
</body>
</html>
Here's the script I use to navigate to this simple page and ATTEMPT to use jQuery to change the value of the and trigger the change event.
The steps of the script are broken out into an array of 'step' functions:
var wp = require("webpage");
var system = require('system');
var util = require('./util-module.js'); // my logging API
var baseUrl = 'http://127.0.0.1:8080';
/* Global error handler for phantom */
phantom.onError = function(msg, trace) {
var msgStack = ['PHANTOM ERROR: ' + msg];
if (trace) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line);
});
}
util.log.error(msgStack.join('\n'));
// exit phantom on error
phantom.exit();
};
/* Inject jQuery into the phantom context */
var injected = phantom.injectJs('./jquery.min.js');
util.log.debug('phantom injected jQuery: ' + injected);
/* Create and initialize the page */
var page = wp.create();
var loadInProgress = false;
page.onLoadStarted = function() {
loadInProgress = true;
util.log.debug("page load started: " + page.url);
};
page.onLoadFinished = function() {
loadInProgress = false;
util.log.debug("page load finished: " + page.url);
// inject jquery onto the page
var injected = page.injectJs('./jquery.min.js');
util.log.debug('page injected jQuery: ' + injected);
page.evaluate(function() {
jQuery.noConflict();
});
};
page.onResourceRequested = function(request) {
console.log('Request (#' + request.id + '): ' + JSON.stringify(request));
};
page.onResourceReceived = function(response) {
console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response));
};
/* Redirect all console messages logged on page to debug */
page.onConsoleMessage = function(msg) {
util.log.debug(msg);
};
var steps = [
function() {
util.log.debug('LOAD THE TEST PAGE');
page.open(baseUrl + "/test/foo");
},
function() {
util.log.debug('CHANGE THE SELECT');
// see what the first result is. change the sort. Wait for the ajax update to complete
// start iterating over results.
var oldTitle = page.evaluate(function() {
return jQuery('#bar').text();
});
util.log.debug('OLD TEXT: ' + oldTitle);
page.evaluate(function(){
jQuery('select').val('go');
jQuery('select').trigger('change');
jQuery('select').change();
console.log('SELECT VALUE AFTER UDPATE: ' + jQuery('select').val());
});
loadInProgress = true;
count = 0;
var fint = setInterval(function() {
var newTitle = page.evaluate(function() {
return jQuery('#bar').text();
});
util.log.debug('NEW TEXT: ' + newTitle);
count++;
if (oldTitle != newTitle) {
clearInterval(fint);
loadInProgress = false;
}
if (count > 5) {
clearInterval(fint);
loadInProgress = false;
}
}, 500);
},
function() {
util.log.debug('PRINT PAGE TITLE');
page.evaluate(function(){
console.log(document.title);
});
},
];
// harness that executes each step of the scraper
var testIndex = 0;
interval = setInterval(function() {
if (!loadInProgress && typeof steps[testIndex] == "function") {
util.log.debug("step " + (testIndex + 1));
steps[testIndex]();
testIndex++;
}
if (typeof steps[testIndex] != "function") {
util.log.debug("test complete!");
clearInterval(interval);
phantom.exit();
}
}, 500);
And here is the output. I'm expecting the text to change from 'foo' to 'bar' but it never happens
DEBUG: CHANGE THE SELECT
DEBUG: OLD TEXT: foo
DEBUG: SELECT VALUE AFTER UDPATE: go
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: step 5
DEBUG: PRINT PAGE TITLE
DEBUG: AJAX test
DEBUG: test complete!
BTW, PhantomJS 1.7. This is a great project.
The problem with the example listed above is that I simply injected jQuery into a page that already had jQuery. When I stopped doing that, it worked.
I have a rally.sdk.ui.basic.Dropdown menu in a Rally App that I would like to change based on user input. So I will call display() on the dropdown menu, and then later I want to change the contents of that menu.
Has anybody done this? When I try, it crashes. I've also tried calling destroy() on the dropdown menu and then calling display() on a new menu that I allocate, but that crashes as well with an obscure dojo error.
Any suggestions on how to change dropdown menus on the fly?
I've included a very stripped down example below of trying to destroy and then re-display the menu:
<html>
<head>
<title>Incoming Defects by Severity</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta name="Name" content="Defects by Severity" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.29/sdk.js"></script>
<script type="text/javascript">
function DefectChart() {
this.display = function() {
var defectVersionDropdown;
var count = 1;
function makeDefectChart(results){
initDefectVersionDropdown();
};
function renderPage() {
var queryConfig = [];
var startDate = '2011-06-06';
var endDate = '2012-02-02';
var queryArray = ['CreatedDate >= "' + startDate + '"', 'CreatedDate <= "' + endDate + '"'];
var versionFilter = defectVersionDropdown ? defectVersionDropdown.getDisplayedValue() : 'ALL';
if (versionFilter != 'ALL') {
queryArray.push('FoundInBuild contains "' + versionFilter + '"');
}
// console.log(queryArray);
queryConfig.push({
type : 'Defects',
key : 'defects',
query: rally.sdk.util.Query.and(queryArray),
fetch: 'Severity,State,LastUpdateDate,CreationDate,OpenedDate,AcceptedDate,LastUpdateDate,ClosedDate,Environment,FoundInBuild'
});
rallyDataSource.findAll(queryConfig, makeDefectChart);
}
function defectVersionChange(sender, eventArgs) {
var version = eventArgs.value;
renderPage();
}
function initDefectVersionDropdown() {
if (defectVersionDropdown != null) {
defectVersionDropdown.destroy();
defectVersionDropdown = null;
}
if (defectVersionDropdown == null) {
console.log('initDefectVersionDropdown');
count++;
var menuItems = [{label: "ALL", value: "ALL"}];
for (var i=0; i < count; i++) {
menuItems.push({label: count, value: count});
}
var config = {
label: "Found In Version:",
items: menuItems
};
defectVersionDropdown = new rally.sdk.ui.basic.Dropdown(config);
defectVersionDropdown.addEventListener("onChange", defectVersionChange);
defectVersionDropdown.display("defectVersionDiv");
}
}
var workspaceOid = '__WORKSPACE_OID__'; if (workspaceOid.toString().match(/__/)) { workspaceOid = XXX; }
var projectOid = '__PROJECT_OID__'; if (projectOid.toString().match(/__/)) { projectOid = XXX; }
rallyDataSource = new rally.sdk.data.RallyDataSource( workspaceOid,
projectOid,
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
initDefectVersionDropdown();
renderPage();
}
}
function getDataAndShow() {
var defectChart = new DefectChart();
defectChart.display();
}
function loadRally() {
rally.addOnLoad(getDataAndShow);
}
loadRally();
</script>
</head>
<body>
<div id="defectVersionDiv"></div>
</body>
</html>
Destroying the old one creating and displaying a new one is the correct way to do this. This is a common pattern when developing apps using the App SDK. If you provide a code snipped along with the dojo error you are getting the community can probably be of better assistance.
I'm using a ajax script to load content from other pages, without having to reload the browser.
For now I'm retrieving the content of the #inside div, but I'm using a full-background slideshow (#full) wich needs to be loaded as wel.
Maybe this can be achieved by loading the content of the #full div also, but I don't know how I could do that.
This is my code:
// Self-Executing Anonymous Function to avoid more globals
(function() {
// Home link isn't dynamic, so default set class name to it to match how dynamic classes work in WordPress
$(".home li.home").removeClass("home").addClass("current_page_item");
// Add spinner via JS, cuz would never need it otherweise
$("body").append("<img src='http://themeclubhouse.digwp.com/images/ajax-loader.gif' id='ajax-loader' />");
var
$mainContent = $("#wrapper"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
// Auto-clear search field
$searchInput.focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
$('a:urlInternal').live('click', function(e) {
// Caching
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
// Fancy ALL AJAX Stuff
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #content', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base, '');
location = base + '/#' + diff;
}
});
})(); // End SEAF
try to repeat the procedure:
// Fancy ALL AJAX Stuff
$.address.change(function(event) {
if (event.value) {
//load ajax image
$ajaxSpinner.fadeIn();
$mainContent.empty().load(base + event.value + ' #content', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
// repeat here
//load another div
$mainContent.empty().load(base + event.value + ' #mydiv1', function() {
$mainContent
});
//load another div
$mainContent.empty().load(base + event.value + ' #mydiv2', function() {
$mainContent
});
}
let me know if it works, Ciao! :)
I have a wordpress theme in which i have to create a page that has a movie that goes loop.
it has 3 menu points which change the div text without reloading the page.
So far no problem.
Click here – put it in content box 2
But when im on a different page and i click for example the second link, it should go to the video page and change the text to the second one.
How can i do this?
Is there a way to do that with?
url/wordpressname/#1
Found a Solution: i found a solution here: http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html
which i changed to fit my needs:
jQuery(document).ready(function($) {
var $mainContent = $("#text"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
//location.hash = this.pathname;
//return false;
});
$("#searchform").submit(function(e) {
location.hash = '?s=' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
if (url=="1") {
$mainContent.html('<p>Text1</>');
}
if (url=="2") {
$mainContent.html('<p>Text2</>');
}
if (url=="3") {
$mainContent.html('<p>Text3</>');
}
if (url=="4") {
$mainContent.html('<p>Text4</>');
}
// url = url + "#content";
//$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
//$mainContent.animate({opacity: "1"});
//});
});
$(window).trigger('hashchange');
});