electronjs always refresh after clicking a button - electron

I am using electron in building Desktop application when I am clicking on any button it make refresh for the whole application , I need to prevent this refresh
<script>
window.$ = window.jQuery = require('jquery')
$(function(){
var config = require('../jsonFiles/pathData.json');
$("#aspnetCorePathRename").val(config.AspnetCorePath);
$("#angularPathRename").val(config.AngularPath);
});
function ren(e) {
const fs = require("fs");
fs.readFile('./scrips/Rename.ps1', function (err, data) {
if (err) {
$(".Console").html(err.toString());
alert(err.toString());
return console.error(err);
}
alert(data.toString());
});
readFile();
}
</script>

That's most likely not a Problem of electron or your Script, but of the way you defined the buttons in your HTML. If you define it like this:
<input type="submit">
HTML assumes it's send button for a form and will refresh the page. If you define it as button
<button type='button'>Submit</button>
the page will not be refreshed.
If you have to define it as input I'd assume you prevent the default behaviour with jQuery like this:
$("input[type='submit']").click(function() { return false; });

Related

Inserting dynamic panel jquery mobile

In my app I would like to re-use the panel so I call this function when opening index.html:
var add_panel=function() {
//add button
$('[data-role="header"]').append('Menu');
//panel
$.get('panel.html').success(function(data) {
$('div[data-role="page"]').append(data);
$('#leftpanel').trigger('create');
$('#leftpanel').panel();
});
//open panel
$('body').on('click', '.ui-icon-bars', function() {
$("#leftpanel").panel("toggle");
});
}
This works great on the first page and when returning to this page from another page.
I had hoped to call the same function inside "pagecontainertransition" to add the panel to other pages as well, but this doesn't seem to work:
//handle page transitions
$('body').on('pagecontainertransition', function(event, ui) {
add_panel();
});
Can this be done?

JQuery-ui Tabs - reload page with completely new content not working

I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");

Jquerymobile: registering events within pageinit?

I'm writing a simple mobile web site using JQuery Mobile.
I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function and call the function from within the section in the . Here is the code:
function initPage() {
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
}
Here is my HTML fragment calling the code:
<html>
<head>
...
<script type="text/javascript">
initPage();
</script>
...
My code works fine, but I have a doubt, so here comes my question: should I wrap my code with $(document).on('pageinit')? Like this:
function initPage() {
$(document).on('pageinit', function(){
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
});
}
I am not sure whether do I need to do that for stuff that register an event, like vclick on specific elements.
Thanks for support.

How to set jQuery popup back to its initial state after submitting a form

I have a form that pops up using jQuery, when I click on submit, the form submits and then the form is replace with a message. When i press close the popup box closes out. The problem that I am having is this, how can I remove the message that comes in after hitting submit back to initial state (which is the form itself).
This is what my code looks like.
<script type="text/javascript">
$(document).ready(function(){
$('#send').click(function(){
$.post('process.php', {option:$(".option").val(),picid:$("#picid").val() },
function(response){
var message = 'thanks';
$('#formMsg').html(message);
}
);
return false;
});
$('#close').click(function(){
$('#Container').fadeOut();
$("#formData")[0].reset();
});
});
</script>
You can have a message container inside form and show that when you want and hide result all content and vice versa. Try this.
$(document).ready(function(){
$('#send').click(function(){
$.post('process.php', {
option: $(".option").val(),
picid: $("#picid").val()
},
function(response){
var $msg = $('#msgContianer');
if($msg.length == 0){
$msg = $('<div id="msgContainer" />')
.appendTo($('#Container'));
}
$msg.html('thanks').show();
$("#formData").hide();
});
return false;
});
$('#close').click(function(){
$('#Container').fadeOut(500, function(){
$("#formData").show()[0].reset();
$('#msgContianer').hide();
});
});
});
Remove these two lines:
var message = 'thanks';
$('#formMsg').html(message);
You would probably want to cache the form in a variable, then after closing the form window, you would replace the HTML with the HTML from the cached variable. so your code would look like this:
<script type="text/javascript">
$(document).ready(function(){
// cache the formMsg selector and HTML
var formMsg = $('#formMsg'),
formHTML = formMsg.html();
$('#send').click(function(){
$.post('process.php', {option:$(".option").val(),picid:$("#picid").val() },
function(response){
var message = 'thanks';
formMsg.html(message);
}
);
return false;
});
$('#close').click(function(){
$('#Container').fadeOut();
$("#formData")[0].reset();
// replace the formMsg html with the html from the cached variable
formMsg.html(formHTML);
});
});
</script>

Prevent default on a click within a JQuery tabs in Google Chrome

I would like to prevent the default behaviour of a click on a link. I tried the return false; also javascript:void(0); in the href attribute but it doesn’t seem to work. It works fine in Firefox, but not in Chrome and IE.
I have a single tab that loads via AJAX the content which is a simple link.
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
},
success: function() {
alert('hello');
$('#lk').click(function(event) {
alert('Click Me');
event.preventDefault();
return false;
});
}
},
load: function(event, ui) {
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
}
});
});
</script>
<body>
<div id="tabs">
<ul>
<li>Link</li>
</ul>
</div>
</body>
The content of linkChild.htm is
Click Me
So basically when the tab content is loaded with success, a click event is attached to the link “lk”. When I click on the link, the alert is displayed but then link disappears. I check the HTML and the element is actually removed from the DOM.
$('#selector').click(function(event) {
event.preventDefault();
});
The event object is passed to your click handler by default - you have to have something there to receive it. Once you have the event, you can use jQuery's .preventDefault() method to cancel the link's behavior.
Edit:
Here's the fragment of your code, corrected:
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
Notice the addition of the word 'event' when creating the anon function (or you could use just e, or anything else - the name is unimportant, the fact there's a var there is.

Resources