I have tried looking through this site and Google'd many options, there are various ideas about saving the state of the UpdatePanel before the post-back, however I am unsure how to implement such a thing.
I have a UpdatePanel within a ASP.NET Page which refreshes a GridView - my code works well. However on the Async Post-back it causes the JQuery CSS to disappear which makes the text boxes look rounded, colour of text etc...
I do not need to add any JQuery events - however just need to know how to add the styling back into the Panel - adding the whole framework back in could also be an option.
I would add the code to my project but its massive - below are my JQuery references on my Site Master:
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<!-- Apple Settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Apple Icons -->
<link rel="apple-touch-icon" href="/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/touch-icon-ipad-retina.png" />
<link rel="icon" href="/touch-icon-ipad-retina.png" />
<!-- Style Sheets -->
<link rel="stylesheet" href="/themes/Sequencing_App_V2.min.css" />
<link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="/css/Custom.css" />
<!-- JavaScript -->
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/Custom.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.2.0.min.js"></script>
<!-- Content Placeholders -->
<title><asp:ContentPlaceHolder ID="page_title" runat="server"></asp:ContentPlaceHolder></title>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
Can anyone help here?
I appreciate all the help you can offer.
Steve
jQuery mobile adds a lot of extra html elements when you construct it.
These will be lost after a PostBack, and you need to recreate it for the new elements in your UpdatePanel.
If you are using a listview to present your data, you will need to refresh it after the PostBack
<script type="text/javascript">
function handleEndRequest(sender, args)
{
$('table').listview('refresh');
//Refresh any other elements
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>
Related
I think I have followed the steps for a previous post about this question. But I get no error but I get an alternating question mark and exclamation point on the display.
There are no errors in the Chrome debugger console. If I hover over these alternating "buttons" I don't get any tooltip or additional information. So it seems that the class has been recognized and the button loaded but there is some kind of error that I cannot determine.
Here is what I have so far
Downloaded and the zip of the FA components
Add link to index.html under wwwroot (this is a client side Blazor
application)
Referenced the classes in my component
<button class="fas fa-angle-double-up">Up</button>
<button class="fas fa-angle-double-down">Down</button>
But this doesn't seem to work. Ideas?
I have tried including the .js from Fontawesome but still no luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BreakpointManagement.App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BreakpointManagement.App.Client.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
<script src="_content/BlazorTable/BlazorTable.min.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
I added all paths, as #JasonD mentioned
added this line at component file
and added these lines at index.html
and voi-la
[UPDATE]
Please not that most of these elements are loaded from the cache so no need to connect to the database which means it's not a database or server delay.
I'm using Laravel in my project and here's the main header code
<!DOCTYPE html>
<html lang="{{ $lang }}" dir="#if($lang == 'ar') rtl #else ltr #endif">
<head>
<meta charset="utf-8">
<meta name="_token" id="main_token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
<script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
#if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> #endif
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">
And the config public path
'public_path' => 'http://www.example.com/public/',
The elements load in wrong places with wrong sizes then in seconds the stylesheet loads and elements get positiined correctly and resized too which makes the page look ugly at the beginning and I'm talking about css not javascript or jQuery. Why does this happen and how to solve it?
You should be using the asset function instead of PHP shorthand echo tags and config paths.
For example, instead of this:
<?=config("app.public_path")?>js/jquery-2.2.4.min.js
You are supposed to do this:
{{ asset('js/jquery-2.2.4.min.js') }}
Also, consider using defer for your scripts e.g.:
<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I don't know why I get this error when I validate my site, but clearly I am doing something wrong because I get the following error too:
"An body element start tag seen but an element of the same type was already open"
<!DOCTYPE html>
<html lang="en-uk">
<head>
<title> Erasmus+</title>
<meta name="author" content="" />
<meta name="dcterms.rights" content="" />
<meta name="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="" type="text/css" />
<link href="" type="text/css" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<?php wp_head();?>
<!--[if !IE]><!-->
<style>
</style>
<!--<![endif]-->
<script>
</script>
</head>
<body class="home blog">
It is a wordpress website: www.erasmus-plus.ro
I can't find what I am doing wrong.
Thanks!
Edit: I see that if I remove
<?php wp_head();?>
the error is gone, but isn't it needed for wordpress files?
That's not the complete HTML code. Looking at the source, apparently you have:
<input type='hidden' value='http://erasmus-plus.ro/wp-content/plugins/form-maker' id='form_plugins_url' />
In line 41. That's "displayable" code, so I think it's making that the head part closes and opening the <body> implicitly, and hence complaining when it gets to your explicit tag.
I guess that some stray plugin is misbehaving using wp_head to insert that into your . Try disabling your plugins one by one and you'll probably find the culprit. Probably something related to forms?
i am new to anything JQuery and only know basic HTML codes.
So I was wondering what why
<div data-inline="true">
Cancel
Save
</div>
did not work in my html file, even though I blatantly copied off the Jquery Documentation. The buttons did not appear side by side. Whereas when I tried
Cancel
Save
and the buttons appeared side by side.
Does it have to do with my importing the script?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script
I'm not sure, but it is probale that:
the surrounding div causes that the anchors cannot be found by jQuery (or have different style)
you miss data-inline="true" in the upper lines
Cheers
i think you're referring to the documents from here.
my guess is that you didn't include the css file. jqm-docs.css
<head><base href="http://jquerymobile.com/test/docs/buttons/buttons-inline.html">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>jQuery Mobile Docs - Buttons</title>
<link href="../../themes/default/" rel="stylesheet">
<link href="../_assets/css/jqm-docs.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
<script src="../../js/"></script>
<script src="../docs/docs.js"></script>
</head>