How to navigate? - jquery-mobile

Say I create an HTML file with two .page on it. In the first .page, I'd like to have a link to the second .page.
Is there a way to navigate between pages without having to write my own JS? This seems to suggest I do have to write JS: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/navigation/.
However, I'd would rather set an id attribute for one of the pages, then maybe define some data attribute in the link to tell jQuery mobile where to go. Possible?
I'd also like to specify what kind of transition effect to use.

You can use standard anchor links, just give an id to your page and set the transition via the data attribute
Link to Page 2

Related

Form Dynamic Tag Manager

I'm trying to tracking this form https://secure-www.seat.com/content/lu/brand/fr/contact/arrange-a-test-drive.htx with Dynamic Tag Manager (DTM)of Adobe.
I've create a Rule Based Event like this:
Event Type --> Submit
Apply event handler directly... (In fact I try with check and uncheck)
Element Tag --> form
The same rule, with my personal page form is successful: http://pujoljulia.com/ (!Hablémos! link). As you can see I used form Tag selector, but also I tried other, button, div... and rule doesn't trigger ever.
However, in both pages the Click Map listener recognized event. Honestly I try all options and I can't see why. Can someone help me?
I'm trying to tracking this form
https://secure-www.seat.com/content/lu/brand/fr/contact/arrange-a-test-drive.htx
with Dynamic Tag Manager (DTM)of Adobe.
I took a look at your page and there it looks like DTM is not being loaded on that page. I could not find the _satellite object.
Dynamic form handlers on sites that have customized forms are fairly unstable, usually one or the other breaks. I did not look too deeply to the seat.com page, but it looks to me like JavaScript is used to override default behavior and this could be causing the problem. Clicks do get registered, but this would not solve your problems, as
What I would suggest is that you move the tracking to the next page, where the form has been submitted. This is far more reliable and has a lower chance of causing issues. Usually you can use URL parameters or page naming variables to target on these pages.

How to properly encode links to external URL in MVC Razor

This view suppose to show a list of hyperlinks, each pointing to an external URL. The goal is for the user to click one of these links and have their browser open a new tab with the selected URL.
Currently I have the following markup:
#Html.ActionLink("SomeSite", "http://subdomain.mydomain.com/SomeSite")
This markup produces:
http://localhost:58980/AccessInstance/http%3a/subdomain.mydomain.com/SomeSite
instead of :
http://subdomain.mydomain.com/SomeSite
What can I change in my markup to make this work as I expect?
You don't need to use #Html.ActionLink for that. Just use a plain A tag:
SomeSite
Html.ActionLink is specifically for generating links to actions defined in MVC controllers, in the same app. Since you're linking to an absolute URL, you don't need any of the functionality that Html.ActionLink provides.
Two ways :
1. update the database column with full link:
eg SQL:
update ProductTable set ProductLink='http://www.example.com/Product/Mobiles' where ID=123
In asp mvc view
View
2. Hardcode the http part and list from model
View
Hope helps someone.
While a ViewBag is overused and not the best choice most of the time this is something that I had done when inheriting someone else's mvc app to do a quick fix for a URL that I needed to redirect to with a specific dynamically changing querystring parameter
<a target="_parent" href="http://localhost:56332/services/#ViewBag.factory">View Service</a>
Using .NET Core 6
This seems to be the most correct answer:
Link
This will generate the following result:
As you can see at the bottom left corner of the window before clicking the link, the URL address was rendered as it is (NOTE: The cursor was recorded out of place for some reason, that's a ShareX problem, ignore it).
Than link will be directly saved as a nvarchar(750) type (probably any character like type will do the work). No changes to the original link were made before saving it or on reading:
You need to take into account your RouteConfiguration.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}"
because you are specifying the action link as the entire link that you want to redirect.
I would recommend that you use the #rossipedia answer because you can make tricky things like putting a span inside the link
Here to display link that are clickable in index page
<td>
#Html.ActionLink(item.FileName, "../Uploads/Catalogue/"+item.FileName)
</td>

Change CSS style using drop down menu in MVC

I'm trying to make a drop down menu that has a bunch of items (Amelia, Cerulean, Cosmo, Cyborg, Flatly, Journal). Each of these items represent a css file.
When one of them is selected I want my website to take this selected css file and apply it to the website.
I would like the drop down menu to interact with jquery, meaning when a item is selected jquery takes over and makes a asyn/ajax call to some mvc actionresult.
By the way I'm using MVC 5.
I hope someone can help me sketch the initial groundwork.
I've implemented this in my application.
I'm not sure what to tell you though. It's easier when we have an attempted solution to fix.
Here's an overview of how mine works:
I have created a controller called SharedController. The purpose of it is to contain various actions that render common actions. All of the actions are considered ChildActionOnly.
My _Layout uses RenderAction to render the action NavbarPartial which is in my SharedController.
More importantly the Navbar partial then uses RenderAction to render the action ThemeListPartial. This action is responsible for getting a list of available themes. The list of available themes is determined at applications startup. I've created a ThemeFinder class and ThemeRepository class that are responsible for finding and storing themes. The ThemeFinder finds themes by expressions that you give it. In a new class called App_Start/ThemeConfig I've given it only one expression - "~/Content/themes/{name}.bootstrap.css". This will find all themes with that naming convention in that location.
My razor code will take the ViewModel and display a dropdown menu in the navbar.
To get the themes to change my dropdown menu contains an AJAX link to an action called SaveTheme in ThemeController. This action takes a theme name as a string and tries to save it in a cookie for the user.
If the theme is found and saved successfully, the action responds with a success message.
jQuery then changes the theme by finding the associated link attribute and changing the HREF contents to the new theme. It knows the new theme relative URL because I have it stored in data attributes.
I completed this before I made the switch to AngularJs. The one thing I plan to go back and change is to cut out as much (maybe all) jQuery as possible and replace it with better code.

Editable select/combobox

is there any way (or plugin) to display editable combobox? I have a set of options, but I would like to give possibility to enter custom value.
I've searched the documentation, and I can't find way to do this. I made workaround with javascript, but I'm looking for more elegant solution.
I'm pretty sure that there simply is no HTML form element that does this, and so Rails can't provide you with a helper. As you said, you can work with JS to create something similar (and there should be JS libraries/plugins already out there), or you could just use a select element and add a text field next to it for new values.
HTML5 specification doesn't define such an element. So you may either continue using JS, either try to use autocomplete feature of an input element (although it is not exactly what you want and doesn't compatible with old browsers).

Is there a way to change the browser's address bar without refreshing the page?

I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.
After the user clicked the category I want to change the browser's address bar url from
www.mysite.com/products
to something like
www.mysite.com/products/{selectedCat}
without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?
With HTML5 you can modify the url without reloading:
If you want to make a new post in the browser's history (i.e. back button will work)
window.history.pushState('Object', 'Title', '/new-url');
If you just want to change the url without being able to go back
window.history.replaceState('Object', 'Title', '/another-new-url');
The object can be used for ajax navigation:
window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');
window.onpopstate = function (e) {
var id = e.state.id;
load_item(id);
};
Read more here: http://www.w3.org/TR/html5-author/history.html
A fallback sollution: https://github.com/browserstate/history.js
To add to what the guys have already said edit the window.location.hash property to match the URL you want in your onclick function.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
I believe directly manipulating the address bar to a completely different url without moving to that url isn't allowed for security reasons, if you are happy with it being
www.mysite.com/products/#{selectedCat}
i.e. an anchor style link within the same page then look into the various history/"back button" scripts that are now present in most javascript libraries.
The mention of update panel leads me to guess you are using asp.net, in that case the asp.net ajax history control is a good place to start
I don't think this is possible (at least changing to a totally different address), as it would be an unintuitive misuse of the address bar, and could promote phishing attacks.
This cannot be done the way you're saying it. The method suggested by somej.net is the closest you can get. It's actually very common practice in the AJAX age. Even Gmail uses this.
"window.location.hash"
as suggested by sanchothefat should be the one and only way of doing it. Because all the places that I have seen this feature, it's all the time after the # in URL.

Resources