I am trying to slide my main container #main up before loading the new content inside and then slide down again when the load is complete. This seems to work on the first click but on subsequent clicks the content loads instantly before the slideUp and slideDown animations begin.
$("#access a").address(function() {
$("div#main").slideUp(1111).delay(1200).load($(this).attr('href') + ' #menudropdown, #contentbody', function(){
$("div#main").slideDown(1111);
});
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base, '');
location = base + '/#' + diff;
}
});
Have you tried:
$("#access a").address(function() {
var mainDiv = $("div#main");
var loadLink = $(this).attr('href');
mainDiv.slideUp(1111,function(){
mainDiv.load( loadLink + ' #menudropdown, #contentbody', function(){
mainDiv.slideDown(1111);
});
});
// your other code
});
Have you tried the ready event on slideUp?
$("div#main").slideUp(1111, function () {
$(this).load($("#access a").attr('href') + ' #menudropdown, #contentbody', function(){
$("div#main").slideDown(1111);
});
});
Also I would suggest to hide the content before loading by using the full ajax function:
$.ajax({
url: $("#access a").attr('href'),
success: function (data) {
$("div#main").slideUp(function () {
$(this).hide().empty().append(data.find('#menudropdown, #contentbody')).slideDown();
});
}
});
Related
Im new to using Electron and also kinda new to using the webview tag, so I pre-apologize for maybe not knowing something really obvious.
Im trying to dynamiclly create web views and add the following events to them.
did-start-loading
did-stop-loading
did-finish-load
page-title-updated
dom-ready
Im using a mix of Jquery and pure javascript to do this but currently im not having much luck. I have attached my code below so you can try find anything obvious there. Im not getting any javascript errors in the debug menu but at the same time none of it seems to be working.
function AddTab(URL){
tabcount++;
var NewTab = '<li href="#content-' + tabcount + '" id="tab' + tabcount + '" class="current"><img src="System_Assets/icons/Logo.png" /><span>Tab Home</span><a class="TabClose" href="#"></a></li>';
var NewContent = '<div id="content-' + tabcount + '" class="ContentHolder" style="display:block;"><webview id="webview-content-' + tabcount + '" src="http://www.ohhaibrowser.com"></webview></div>';
ChangeCurrent("");
//Hide current tabs
$(".ContentHolder").css("display", "none");
//Show new tab
$("#tabs-menu").append(NewTab);
$("#BrowserWin").append(NewContent);
$("#CurWebWin").val("webview-content-" + tabcount);
AddListeners("webview-content-" + tabcount,"tab" + tabcount);
UpdateTabCount();
}
function UpdateTabCount(){
$("#HideShow").text(tabcount);
}
function AddListeners(webview,tabid)
{
element = document.getElementById(webview);
element.addEventListener("did-start-loading", function() {
loadstart(tabid);
});
element.addEventListener("did-stop-loading", function() {
loadstop(tabid,webview);
});
element.addEventListener("did-finish-load", function() {
loadstop(tabid,webview);
});
element.addEventListener("page-title-updated", function() {
loadstop(tabid,webview);
});
element.addEventListener("dom-ready", function() {
domloaded(tabid,webview);
});
}
function loadstart(tabid)
{
$("#" + tabid + " span").val('Loading...');
//$("#" + tabid + " img")
}
function loadstop(tabid, webview)
{
$("#" + tabid + " span").val('');
}
function domloaded(tabid, webview)
{
element = document.getElementById(webview);
$("#" + tabid + " span").val(element.getURL());
}
You have to set Preload call to make change in Webview
browser.html
<script src="browser.js"></script>
<webview src="https://www.google.com/watch?v=1osdnKzj-1k" preload="./inject.js" style="width:640px; height:480px"></webview>
create sample js file name called inject.js
inject.js
__myInjection={
onloada : function() {
var script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
$("#header").html('<h1>Sample work</h1>\
<p>Hello, Google</p>\
Click me');
document.body.appendChild(script);
}
}
now in browser.js
onload = function() {
var webview = document.querySelector('webview');
webview.addEventListener("dom-ready", function(){
webview.executeJavaScript('__myInjection.onloada ()')
// webview.openDevTools();
});
doLayout();
this is my first entry on StackOverFlow.
I'm working on a project and it needs jQuery to perform a master/detail table layout.
I have to work in asp.net C#, master and detail table generate dynamically.
So what is my problem:
I generate the master table with ajax:
function refreshMasterTable() {
xhr = $.ajax({
type: "GET",
url: "tablefunctions.aspx?mode=showmastertable",
success: function (html) {
$("#tbl_master").html(html);
prevAjaxReturned = true;
$('input[type=button]').click(function () {
var bid, trid;
bid = (this.id);
trid = $(this).closest('tr').attr('id');
if ($("#detail_" + trid).length == 0) {
detailShow = true;
pointer = $(this).closest('tr');
pointer.after("<tr><td colspan=5><div id=detail_" + trid + "></div></td></tr>");
$.get("tablefunctions.aspx?mode=showdetailtable&id=" + trid, function (response) {
$('#detail_' + trid).html(response);
});
$(document).on('click', '#submitMasterData', function () {
value = $('#name').val();
$.get("tablefunctions.aspx?mode=mastertableupdate&id=" + trid + "&name=" + value);
refreshMasterTable();
});
} else {
detailShow = false;
$(this).closest('tr').next("tr").remove();
}
});
}
});
};
In tablefunctions.aspx there is an entry, what generates the submit button:
html.Append("<tr><td colspan=\"2\" align=\"right\"><input type=\"submit\" id=\"submitMasterData\" /></td></tr>");
So the problem begins here. Each time when I ask a new detail row in the master table, a new submitMasterData instance of button creates and the $(document).on('click', '#submitMasterData', function () event triggers on every previous values. If I reload the page, the first detail request is OK, but the "collection" begins again.
$("#submitMasterData").remove(); didn't solve the problem. Sorry for my bad English, if something is not clear, please ask me...
The problem is the $(document).on() function is binding a new event each time a button is clicked without removing any of the previous events. You can use the off() function to remove the old ones in queue.
function refreshMasterTable() {
xhr = $.ajax({
type: "GET",
url: "tablefunctions.aspx?mode=showmastertable",
success: function (html) {
$("#tbl_master").html(html);
prevAjaxReturned = true;
$('input[type=button]').click(function () {
var bid, trid;
bid = (this.id);
trid = $(this).closest('tr').attr('id');
if ($("#detail_" + trid).length == 0) {
detailShow = true;
pointer = $(this).closest('tr');
pointer.after("<tr><td colspan=5><div id=detail_" + trid + "></div></td></tr>");
$.get("tablefunctions.aspx?mode=showdetailtable&id=" + trid, function (response) {
$('#detail_' + trid).html(response);
});
//need to unbind all the previously attached events
$(document).off('click', '#submitMasterData');
$(document).on('click', '#submitMasterData', function () {
value = $('#name').val();
$.get("tablefunctions.aspx?mode=mastertableupdate&id=" + trid + "&name=" + value);
refreshMasterTable();
});
} else {
detailShow = false;
$(this).closest('tr').next("tr").remove();
}
});
}
});
};
You can view a proof of concept in this JS fiddle: https://jsfiddle.net/bfc6wzt8/
Hope that helps :-)
When submitting the form based on normal method it execute jQuery AJAX perfectly. When submitting the same form used within the popup the jQuery AJAX is not executed. Why is that? The code is given below.
Form submission script:
$("#submit").click(function (e) {
/* $('form').submit(function() { // bind function to submit event of form */
if ($('form').attr('rel') == 'frm_jquery') {
$('#result')
.html('<span id="process">processing....</span>');
$.ajax({
type: $('form').attr('method'), // get type of request from 'method'
url: $('form').attr('action'), // get url of request from 'action'
data: $('form').serialize(), // serialize the form's data
dataType: "json",
success: function (data) {
if (data.status == 'success') {
$('form')[0].reset();
$('#result').html(data.message);
setTimeout(function () {
$('#result').fadeOut('fast');
if (data.url != undefined)
window.location.replace(data.url);
}, 5000);
}
else if (data.status == 'error') {
$('#result').html(data.message);
}
else if (data.status == 'redirect') {
window.location.replace(data.url);
}
}
});
e.preventDefault();
return false; // important: prevent the form from submitting
}
});
Popup script:
$('.pop').click(function () {
var src = $(this).attr('href'); //store url to variable
var width = (($(this).attr('data-popwidth') != undefined) ? $(this).attr('data-popwidth') : 600);
var height = (($(this).attr('data-popheight') != undefined) ? $(this).attr('data-popheight') : 500);
if ($(window).width() < width) {
width = "98%";
var left_pos = "1%";
}
else {
var left_pos = ($(window).width() - width) / 2 + 'px';
width = width + "px";
}
if ($(window).height() < height) {
height = "98%";
var top_pos = "1%";
}
else {
var top_pos = ($(window).height() - height) / 2 + 'px';
height = height + "px";
}
$('#dv_move').remove();
//add to body
$('<div></div>')
.prependTo('body')
.attr('id', 'overlay');// add overlay div to disable the parent page
var title = 'test';
var html = '<div class="main" id="dv_move" style="width:' + width + '; height:' + height + '; left:' + left_pos + '; top:' + top_pos + '">';
html += '<div id="dv_no_move" style="overflow-y: scroll;">';
html += ' </div>';
html += ' </div>';
$('body').append(html);
$("#dv_no_move").load(src);
$("#img_close").click(function () {
$('#overlay').fadeOut('slow');
$('#dv_move').fadeOut('slow');
setTimeout("$('#dv_move').remove();", 1000);
//call Refresh(); if we need to reload the parent page on its closing
parent.Refresh();
});
$("#img_close").mousedown(function () {
return false;
});
//change close icon image on hover
$("#img_close").mouseover(function () {
$(this).css('opacity', '0.6');
// $(this).attr("src", 'close.png');
});
$("#img_close").mouseout(function () {
$(this).css('opacity', '1');
// $(this).attr("src", 'close-red.png');
});
return false;
});
First you attach the event handler to #submit. At that time, the form is not yet loaded, so the event handler isn't attached to anything. After that (when the user clicks on the link) the form is opened in a popup. There is no event handler attached to #submit, since that code ran before #submit was created. Therefore nothing happens when you click it.
So how do you fix it? You need to attach the event handler after the form is loaded:
$("#dv_no_move").load(src, function() {
//This code will run when the content has been loaded into the div.
//Here we can attach the event handler to #submit.
$("#submit").click(function(e) {
//The code to do stuff when #submit is clicked should be placed here.
});
});
Please note that this will attach the event handler to #submit no matter what it is that is loaded. Perhaps you use the same page to load other pages as well where you don't want this behavior? Then the above code will be problematic.
Instead, you could put the JavaScript for the submit button in the page that clicking the popup loads (the one with address src), or include it from there. I think you should also wrap it in $(function() { ... }.
I have the following which works fine:
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
When I have the following, I can't even get to the click to display an alert message:
$.getJSON('/Home/GetLocType', { "locId": loc.locId }, function (result) {
var str = JSON.stringify(result);
if (str == '1') {
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
} else {
$('<li><a id=' + loc.locId + ' href="/DataEntry/PotableForm" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
}
$("#btnList").listview('refresh');
});
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Note sure what the difference is. I need to use Json as based on value, I need to go to a either of the 2 hyperlinks.
Use event delegation since anchor is created dynamically in your ajax call or bind the event (only for the added element) inside the ajax success callback. on syntax will work if your jquery version >= 1.7 for earlier versions take a look at live
$("#btnList").on('click', 'a', function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Your first syntax works because it binds the click event to the anchor that exists underneath btnList, but it doesn't bind event to the ones added during the ajax calls in a later point in time.
I have this working with just one instance of links, but I wanted to consolidate my code and re-use the same snippet for each instance of links.
Presently I have working:
$("nav a").live('click', function(){
window.location.hash = '!/' + usr + '/' + $(this).attr("href").replace('.php', '/');
origHash = $(this).attr("href");
return false;
});
$("#files-left-pane a").live('click', function(){
window.location.hash = '!/' + usr + '/files/' + $(this).attr("href").replace('.php', '/');
origHash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
dump = window.location.hash;
newHash = window.location.hash.substring(3).replace(usr + '/', '').replace('/', '.php');//.replace('files/', '');
//newHash = window.location.hash.replace(dump, origHash, 'g');
console.log(newHash);
if (newHash) {
$wrap.find("#main-content").fadeOut(200, function() {
$wrap.load(newHash + " #main-content", function() {
$content.fadeIn(function() {
$wrap.animate({
height: baseHeight + $content.height() + "px"
}, 500);
});
});
});
}
});
right now, if a user clicks on $("nav a") it will make window.location.hash look like this
(in this example the user clicks on Files)
www.site.com/#!/s2xi/files/
the $(window).bind('hashchange') will then translate the hash into
www.site.com/files.php
Then, if a user clicks on $("#files-left-pane a") which is in a sub menu located in files.php. The window.location.hash will look like this :
(in this example the user clicks on Buy)
www.site.com/#!/s2xi/files/buy/
the $(window).bind('hashchange') should then translate the hash into
www.site.com/buy.php
If all you want is take the last word and add ".php", thats easy
You have two ways for that, i think the easiest one is split (the other one is regex).
var splittedHash = window.location.hash.split("/")
newHash = splittedHash[splittedHash.length - 2] + ".php";
Should easily do the trick.
By the way, the regex version is:
newHash = window.location.hash.match(/[^\/]*\/$/)[0].replace("/","") + ".php"