I have a page with a URL that starts with /Plan/Production. I am using the HTML5 History API, and when I click on a certain link, it will change the beginning of the URL to /Plan/Selling. This works great while clicking links and using the forward/back buttons, but when I refresh the page after the start of the URL changes to /Plan/Selling, it doesn't load a layout anymore. My solution was to edit my _ViewStart.cshtml file to check the beginning of the URL, and render a layout based on that, as seen in my code snippet below.
The problem is, if my URL begins with /Plan/Selling, it never even uses the _ViewStart.cshtml file. It only uses this file if the URL begins with /Plan/Production. Adding console.logs confirmed this. To be clear, the location of the file is /Plan/Views/_ViewStart.cshtml. Two examples of URLs I'm using are https://localhost:44301/Plan/Selling/DetailsPPVS/1 (doesn't load a layout and never uses that ViewStart file), and https://localhost:44301/Plan/Production (Loads the proper layout and does use the ViewStart file).
How can I get https://localhost:44301/Plan/Selling/DetailsPPVS/1 to use /Plan/Views/_ViewStart.cshtml?
Code from /Plan/Views/_ViewStart.cshtml:
<script>console.log("Plan/Views/_ViewStart.cshtml");</script>
#{
if (Context.Request.Path.StartsWith("/Plan/Selling", StringComparison.OrdinalIgnoreCase))
{
<script>console.log("Pjax Layout");</script>
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
}
else {
<script>console.log("Regular Layout (~/Areas/Plan/Views/Shared/_Layout.cshtml)");</script>
Layout = "~/Areas/Plan/Views/Shared/_Layout.cshtml";
}
}
_ViewStart.cshtml is not right place for this. try adding your code in _Layout.cshtml.
Related
So... the website i'm working on have three elements that they use on every webpage, the header, footer and a side element (sideLeft). I can access all the files and can even create templates for the post I want to make. The problem is it auot loads those 3 elements so I was hoping that there is a snippet of code that I can implement either into the element file or on the template that would cause it to not laod the sideLeft.el.php element just for that specific webpage?
Why not simply not including the part you don't want to be loaded on that page?
Get the pagename from the url and put condition in sideleft.el.php to not render.
<?php>
$urlPath = $_SERVER['REQUEST_URI'];
if(strpos($urlPath, 'pagename') > 0)
{
// dont display
}else{
//display
}
</?>
I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:
$(function() {
$("#refresh").click(function(evt) {
$(".bgleft").load("left.php")
evt.preventDefault();
})
})
The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out)
and click on "refresh" at the left frame.
Edit:
The HTML snippet: <body class="bgleft">
In left.php there are two lines of code which are showing theese characters.
for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));
Try to remove them, it should help.
Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.
It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.
Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.
PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...
You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.
How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?
$(function() {
$("#refresh").click(function(evt) {
evt.preventDefault();
$(window.top.window).find('frame[name=left]').reload();
})
})
I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.
Thanks for you replies. Sorry, if it doesn't make sense I will try again, I'm probably complicating things!
I have a frameset index.html, with top.php with is just the radio stream, under that is index.php which is the full joomla website with navigation and everything.
The problem is, if users find the website via a search engine. It will take take them to just the index.php and they won't get the frameset with the top.php. I was using this code in the top.php and index.php:
if(self.location==top.location)self.location="index.html";
which works great apart from it takes the user to index.php no matter what page they were looking for via a search engine.
So I found this article (look under 'A better way' section) which shows you how to code it so if the user's content is on about-us.html, it will take you to that page but still ensure it is in the frameset.
http://scriptasylum.com/tutorials/frameredirect/frameredirect.html
I would like something like that but unfortunately with it being a Joomla website, I don't have page1.html, page2.html etc to be able to add the code and change it accordingly as per their instructions. I only have one page index.php which generates the pages dynamically 'on the fly'
So does anyone know a way I can do what I am wanting...
The frame set is at http://www.housocial.com/new/index.html
Just the joomla part http://www.housocial.com/new/index.php
Thanks again
You may extract the filename via RegExp(I'm not sure if this is what you're asking for)
if(self==top)
{
self.location="index.html?"+encodeURIComponent(location.href.match(/\w+\.html$/));
}
A more flexible solution that takes care of GET-parameters and anchors:
(
function(url,pattern,query,hash)
{
var filename=location.pathname.match(pattern);
if(filename)
{
url+=filename;
if(query && location.search)
{
url+=location.search;
}
if(hash)
{
url+=location.hash
}
location.href=url;
}
}
)('http://www.housocial.com/new/index.php/', //target-URL
/\w+\.html$/, //pattern to search for
1, //include QUERY_STRING
1 //include hash
)
i have one website which is working on templates.
in the template there is one main image & i want to replace that main image on some pages only not on full website. what i am looking for is to change the main image to new image on page where i need with ajax.
when i see the css of that template i found following code to show image
.top-bg{
background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
}
and on php page i found following line which bring image.
<div class="top-bg">
i need ajax / jquery code to change image.
my basic logic is, i will get that image URL from MYSQL databse and assign to one variable and then i will change the image which come from database, actually its one page displaying products and i want to display main image of product with ref to loaded product, i hope you will understand what i need at the end...
Thanks
Thanks for every one how reply, i found the solution
$(document).ready(
function(){
$('#imageContainer').css("background-image", "url(images/cube.jpg)");
}
);
this did trick for me what i need, any way thanks and also for -ve voting thanks... :((
While I think Ajax is the wrong solution for your problem, I'll offer you the following (which, at least, meets your question):
$('#changeImage').click(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
return false;
}
);
Clicking an element of id="changeImage" will load the contents of id="imageID" from the php file located at the url of http://path.to.php/file.php into an element (presumably div, but whatever) of id="imageContainer".
That said, I'd suggest following #Nick Craver and #Aaron Digulla's advice and use CSS.
If you view source there's a working demo of jQuery's load on my site (posted in response to a different SO question) at http://davidrhysthomas.co.uk/play/loadDemo.html.
Edited in response to comment from OP.
To do this automatically, on page-load:
$(document).ready(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
}
);
You don't need any JavaScript at all for this, just include another stylesheet (or <style> block) on the webpages you want the imaged changed on. Just have this in there:
.top-bg { background:url(../images/other-image.jpg); }
Or the <style> version:
<style type="text/css">
.top-bg { background:url(../images/other-image.jpg); }
</style>
As long as this is declared after that template stylesheet, that background property will override the template one, and you'll have your custom image on just those pages.
I think AJAX is the wrong approach here. AJAX should be used to load new data when the user interacts with the web page.
Your problem can be solved much more simple: If you can add an AJAX call to the code of the page, why not simply add a new CSS style:
.tob-bg {
background:url(../images/other.jpg) top center no-repeat;
}
Or create a second template and use that for all but the main page.