I want to reload the page and navigate to the user's previously active tab after the user has clicked the submit button on a jquery-jtable form. What I have now reloads the page but doesn't navigate to the user's last active tab before the reload. The tabs are created using jquery ui. Here's the shortened html:
<div id="tabs">
<ul>
<li><a href='#tabs-TasksWithRisks'>Tasks With Risks</a></li>
<li><a href='#tabs-Lessons-Learned'>Lessons Learned</a></li>
</ul>
<div id='tabs-TasksWithRisks' class='tab'>
<div id="TasksWithRisksTableContainer" class="jTableContainer" style="width:100%;"></div>
</div>
<div id='tabs-Lessons-Learned' class='tab'>
<div id="LessonsLearnedTableContainer" class="jTableContainer" style="width:100%;"></div>
</div>
</div>
<script type="text/javascript">
var project_id = <?php echo $project_data['project_id']; ?>;
var modify = <?php echo $modify ? 'true' : 'false'; ?>;
$(document).ready(function() {
loadViewProjectTasksWithRisksTable('TasksWithRisksTableContainer', project_id, modify);
loadViewLessonsLearnedTable('LessonsLearnedTableContainer', project_id, modify);
</script>
function loadViewLessonsLearnedTable(ContainerID, project_id, modify, no_toolbar) {
var fields = $.extend(true, fields, LessonsLearnedFields); //copy, don't reference
fields.Responses = getLessonsLearnedResponseChildTable(ContainerID);
$('#' + ContainerID).jtable({
title: 'Lessons Learned',
paging: true,
pageSize: 100,
sorting: true,
defaultSorting: 'WBS ASC',
actions: {
listAction: config.base_url + 'data_fetch/risks_cause_by_project/' + project_id,
deleteAction: config.base_url + 'data_fetch/delete_risk/',
updateAction: config.base_url + 'data_fetch/update_lessons_learned_risk/' + project_id
},
messages: defaultRiskMessages,
fields: fields, ,
formSubmitting: function(event,data){
$('select[name=cause]', data.form).attr('name','cause[]');
location.reload(true);
return data;
}
});
$('#' + ContainerID).jtable('load');
}
I tired location.href = config.base_url + '#tabs-Lessons-Learned'; but that didn't work. Most working solutions that I found online were for bootstrap so they weren't of much help.
I found this question on stackoveflow but I wasn't able to tailor the answer to my needs.
All help is greatly appreciated.
Instead of location.reload(true); I used loaction.assign('address_I_wanted_to_go_to')
Related
Trying to search in Wikipedia by user's input but it doesn't work for some reason. First I thought it could be due to cross domain problem. But .ajax should help with that.
Here is codepen: http://codepen.io/ekilja01/pen/pRerpb
Here is my HTML:
<script src="https://use.fontawesome.com/43f8201759.js">
</script>
<body>
<h2 class="headertext">WIKIPEDIA <br> VIEWER </h2>
<div class="row">
<div class="col-10-md">
<input class="searchRequest blink_me" id="cursor" type="text" placeholder="__"></input>
</div>
<div class="searchIcon col-2-md"> </div>
</div>
<div>
<p class=results></p>
</div>
</body>
Here is my jQuery:
$(document).ready(function() {
var icon = "<i class='fa fa-search fa-2x'></i>";
$('#cursor').on("keydown", function() {
$(this).removeClass("blink_me");
var searchIcon = $(".searchIcon");
searchIcon.empty();
if ($(".searchRequest").val().length > 0) {
searchIcon.append(icon);
}
searchIcon.on("click", function() {
console.log("clicked!");
var search = $(".searchRequest").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + search + "&format=json&callback=?";
$.ajax({
dataType: "jsonp",
url: url,
success: function(data) {
$(".results").html(data[0]);
console.log(data[0]);
}
});
});
});
});
What am doing wrong? Please help.
There's an error in the order of load for your js.
The data object contains the text of the results in the array with index 2, which i assume is what you want to show, change it to
$(".results").html(data[2]);
You can check a modified version of your original code here
http://codepen.io/anon/pen/mRmGXG
I'm trying to add links/urls to the Mixitup plugin filtering menu so that I can link to the specific filtering link from another page. How do I do that? Based on that tutorial I found (filtering via url), this code was supposed to work
$( document ).ready(function() {
var filterOnLoad = window.location.hash ? '.'+(window.location.hash).replace('#','') : 'all';
$('#events-list').mixItUp({
controls: {
enable: true,
},
load: {
filter: filterOnLoad,
},
animation: {
// enable: false,
// duration: 200,
effects: 'fade',
},
layout: {
display: 'inline-block',
},
});
});
But my filtering menu didn't work. Here's my filtering menu in wordpress
<div class="filtermenu">
<ul id="filters">
<li class="filter" data-filter="all" class="selected">All</li>
<?php
$terms = get_terms('category', 'include=6,7&hide_empty=0'); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li class=".filter." data-filter='.".$term->slug."'>" . $term->name . "</li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
</div>
I tried to change the <li> to <a> and adding href="#" but since it was in <?php> tag, it didn't work and I don't know why....
I find lot of posts here like same,sorry for asking again but no post is solved my issue. In my phonegap application when load the index page my init function will be called after depend upon the init my action are performed. After submitting the form i want to go index page but it is not possible.
function init() {
document.addEventListener("deviceready", phoneReady, false);
$(document).on("submit", '#addEditForm', function(e) {
var data = {
firstname: $("#mFirstname").val(),
lastname: $("#mLastname").val(),
id: $("#mId").val()
};
saveDatas(data, "#homePage", function() {
**$.mobile.changePage("index.html");** //here i need to go index page
});
e.preventDefault();
});
$(document).on("pageshow", function() {
getDatas();
});
$(document).on("pageshow", "#editPage", function() {
var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?") + 1, loc.length);
var detailId = qs.split("=")[1];
$("#editFormSubmitButton").attr("disabled", "disabled");
dbShell.transaction(function(tx) {
tx.executeSql("select id,firstname,lastname,gender,dob,email from nameDetail where id=?", [detailId], function(tx, results) {
$("#mId").val(results.rows.item(0).id);
$("#mFirstname").val(results.rows.item(0).firstname);
$("#editFormSubmitButton").removeAttr("disabled");
});
}, dbErrHandler);
} else {
$("#editFormSubmitButton").removeAttr("disabled");
}
});
}
and index.html like:
<body onload="init();">
<div data-role="page" id="homePage">
and addEdit.html like:
<div data-role="page" id="editPage">
<form id="addEditForm" method="post">
<div data-role="fieldcontain">
<input type="submit" id="editFormSubmitButton" value="Save">
</div>
</form>
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="home" >Return Home</a>
</div>
</div>
tied this also
//$.mobile.path.parseUrl("index.html");
// $.mobile.changePage($('#homePage'), 'pop', false, true);
Please suggest some idea to do this...
window.location.href won't grant you the page transitions from jQuery mobile. Try these instead:
$.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
$.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})
Also, $.mobile.changePage() is now deprecated and should no longer be used. http://api.jquerymobile.com/jQuery.mobile.changePage/
I've a index.html page. Also this page contains lots of page like #home, #list #contacts etc.
in #list part i dynamically get data from my webpage and generate listview. I want that, when user click any of list item, redirect to #imageDetail page and pass image URL to page and show image
here is the #imageDetail page part
<div data-role="page" id="detailedIMAGE" data-theme="a">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Image Detail</h1>
</div>
<div data-role="content">
<img id="imageDetayURL" name="imageDetayURL" src="glyphish-icons/158-wrench-2.png"/>
<input type="text" disabled="disabled" id="brewername" name="brewername" />
</div>
</div>
</div>
And below code is my javascript code to get json data dynamically.
<script>
$('#last5').live("click", function() {
$.ajax({
url: "http://mysqlservice.com/getdata.json",
dataType: 'jsonp',
success: function(json_results){
$("#imageListDetay").html('');
console.log(json_results);
$('#imageListDetay').append('<ul data-role="listview" id="tweetul" data-theme="c"></ul>');
listItems = $('#imageListDetay').find('ul');
$.each(json_results.results, function(key) {
html = '<h3>'+json_results.results[key].screen_name+'</h3><span id="detailed_image">'+json_results.results[key].resim_url+'</span><img WIDTH=200 HEIGHT=100 src="http://mywebpage.org/upload/'+json_results.results[key].resim_url+'" /><p class="ui-li-bside"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
listItems.append('<li><a name="imageDetayGoster" href="#detailedIMAGE">'+html+'</a></li>');
});
$('#imageListDetay ul').listview();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//error
}
});
})
$("#detailedIMAGE").live("pagebeforeshow", function (e, data) {
var brewername = $('#detailed_image',data.prevPage).text();
$('#brewername').val(brewername);
$('#imageDetayURL').attr('src', 'http://mobil.harmankaya.org/'+brewername);
alert(brewername);
});
</script>
The problem is after page change alert(brewername) fires. But list all image urls that listed in listview not my selected.
How can i fixed this issue
Thanks in advance.
jQM Docs:
http://jquerymobile.com/test/docs/pages/page-dynamic.html
This is just quoting the docs but if you read the page it should give you an idea on how to accomplish this.
The application uses links with urls that contain a hash that tells
the application what category items to display:
<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
<li>Animals</li>
<li>Colors</li>
<li>Vehicles</li>
</ul>
Well, this is my way and works very good.
HTML
<div data-role="page" id="myPage">
<div data-role="content" id="myContent">
<ul data-role="listview" data-inset="true/false/whatever" id="myList"></ul>
</div>
</div>
Javascript
$("#myPage").live("pageshow",function(event){
// get your id from LINK and parse it to a variable
var json_list_callback = getUrlVars()[id];
// verify the URL id
if (json_list_callback === '') {json_list_callback === ''} //or what value you want
// define your path to JSON file generated by the ID declared upper
var json_URL = 'http://your.path.to.json.file.php.json?id=' + json_list_callback;
// get the JSON data defined earlier and append to your LIST
$.getJSON(json_URL,function(data){
var entries = data;
//populate our list with our json data
$.each(entries,function(index,entry){
// i use dummy data here, you can have whatever you want in youre json
$("#myList").append(
'<li>' +
// remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function
'<a href="page.html?id=' + entry.json_id + '">' + entry.json_title + '<\/a>' +
'<\/li>'
);
});
//must refresh listview for layout to render
$("#myList").listview("refresh");
});
});
//this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?"
// you can define your own symbol with this function
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
This works for me like a charm and i'm using it very often!
live event has been deprecated, use 'on',
exmple: $("#detailedIMAGE").on("pagebeforeshow", function (e, data){ // code });
So, I have observable array with sites, which is shown via template. If I'll add site to this array, template is not updated, but if I'll remove site from array – voila! template became updated and all previously added sites became displayed too.
If I'll use nifty hack (commented in code) with replacement of whole array to new one then everything works.
BTW, I load template via AJAX and use "ko.applyBindings(viewModel)" after. I assume that works fine, because initial sites are displayed correctly.
$(function(){
//site entry in user's sites list
var siteObject = function(url, lastChecked, status){
this.url = url;
this.lastChecked = (lastChecked == 'undefined') ? '' : lastChecked;
this.status = (status == 'undefined') ? 'not_checked_yet' : status;
this.toDelete = false;
this.remove = function() {viewModel.sites.remove(this)};
};
viewModel = {
//=========== sites list managment ==========================
sites: ko.observableArray(),
//on "add" click in "add site" form
addSite: function(){
var $form = $('#add_site_form');
var siteUrl = $form.find('input[name="site"]').val();
/*nifty hack <----
var sites = this.sites();
sites.push(new siteObject(siteUrl));
this.sites(sites);*/
this.sites.push(new siteObject(siteUrl));
},
//on "remove sites" button click
removeSites: function() {
var sitesToRemove = [];
$.each(this.sites(), function(){
if (this.toDelete) sitesToRemove.push(this);
});
if (sitesToRemove.length == 0)
alert("Ни одного сайта не было выбрано для удаления.");
else {
var message = "Вы точно хотите перестать отслеживать";
for (var i in sitesToRemove) {
message += "\n\"" + sitesToRemove[i].url + "\"";
}
message += "?";
if (confirm(message)) {
$.each(sitesToRemove, function(){this.remove()});
//save new sites list to db
this.saveSitesListToDb();
}
}
//hide form
$('#remove_sites_form').slideToggle();
//toggle checkboxes
$('#content_sites_list .site_info input[type="checkbox"]').slideToggle();
};
And the template:
<!-- end of menu -->
<div id="content_sites_list"
class="grid_12"
data-bind="template: {name: 'sites_list_template', foreach: sites}"></div>
<!-- Templates -->
<script id="sites_list_template" type="text/x-jquery-tmpl">
<div class="site">
<div class="site_panel grid_12">
<div class="site_info">
–
<input type="checkbox" value="${url}"
class="delete_checkbox" data-bind="checked: toDelete" />
${url.substr(7)}
{{if status == "200"}}
<img src="img/green_light.png" alt="ok"/>
{{/if}}
</div>
<div class="site_stat">
<div class="site_last_check">Последняя проверка: ${dateTimestamp}</div>
</div>
</div>
</div>
</script>
I've tried this on latest beta on knockoutjs and on stable one.
I have made a jsFiddle which works fine.
There were some problems that JSLint was complaining about in the removeSites function of the viewModel. I fixed those and added a button and input field to be able to give some input, and everything ran smooth.
So you could try updating your removeSites function and see if it helps you,