jQuery mobile and Laravel - jquery-mobile

I am using Jquery mobile and laravel4.
I have 2 views called "mobilepage1" and "mobilepage2".
On every page there is a "Next"button". A very linear app.
This my controller:
public function login(){
View::share('test','test');
return View::make('mobilepages.mobilepage1');
}
On mobilepage1 i do this:
{{$test}}
{{ Form::open(array('url' => 'mobilepage2', 'method' => 'get')) }}
{{Form:: submit("VERDER")}}
{{ Form::close() }}
That goes to mobile page2
On mobilepage2 i also do:
{{$test}}
This does not seem to work. And gives me the "Error loading page" with the error:
{"error":{"type":"ErrorException","message":"Undefined variable: test (View: C:\\Google Drive\\htdocs\\laravel4_test4\\app\\views\\mobilepages\\mobilepage2.blade.php)","file":"C:\\Google Drive\\htdocs\\laravel4_test4\\app\\storage\\views\\cdf5614a0a7f85ce1182cff09ad77222","line":17}}
If i'm right SHARE is supposed to share in all views like a cookie right? Could it be Jquery mobile is interfering?
UPDATE:
I tried turning off ajax on Omars request:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
The variable still is not shared mobilepage2.

$test variable will be available in all views as long as the View::share('test','test'); command is executed.
In your case, this command is executed only in the login() method.
If you place:
View::share('test','test');
in the top of routes.php file you'll see that it will work because this file is executed on every call to your app.
If you don't want to mess your routes.php file with view shares or composers, you can do the following:
Create a new file (E.g. composers.php) inside the app folder (Where routes.php and filters.php live)
Open app/start/global.php and at the end of the file add
require app_path().'/composers.php';
Now your can place View::share('test','test'); inside this file and have it available in every call.

Related

Signal R $.connection.chatHub is undefined in my javascript file

'.chatHub' is undefined on page load after I moved all signal r code to a bundle that gets loaded on every page
I've successfully installed singal r and I can send chat messages from one user to another in my Asp.Net MVC site. But the MS documentation shows the implementation for just a single page, now I want to send the message to another user on a different page.
So I moved the javascript hub connect/initialization code into a file named my-chat.js that gets loaded on every page and I placed the signal r js file and the signal r hubs reference in a bundle like this
bundles.Add(new ScriptBundle("~/bundles/my-base").Include(
"~/Scripts/jquery.signalR-2.3.0.min.js",
"~/signalr/hubs",
"~/Scripts/my-base/my-chat.js"));
and in my layout page it loads in the correct order, like this
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/my-base")
#RenderSection("scripts", required: false)
but when I load up the main/first page, 'my-chat.js' calls
scope.initializeHub()
that looks like this and '$.connection.chatHub' chatHub is undefined
scope.initializeHub = function () {
$(function () {
var chat = $.connection.chatHub;
chat.client.addNewMessageToPage = function (message) {
// do stuff
};
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
chat.server.send(scope.userId, $('#message').val());
});
});
});
};
Is this is the correct way to do this and maybe the
"~/signalr/hubs"
in the bundle isn't where I should be putting it?
I also tried putting
<script src="/signalr/hubs" type="text/javascript"></script>
and
<script src="~/signalr/hubs" type="text/javascript"></script>
in the head section of my layout page but that didn't work, threw an error saying 'unable to get proerty 'signalR' of undefined' or null reference
I solved this by moving the signal R files and everything related out of the bundle and put it all below the last '#Scripts.Render()' area in my layout.

Razor script Intellisense without the script tag

I load all my external script files async, when evrything is loaded, I have a callback that calls the remaining function.
<script>
function executeLayoutInitialization()
{
// Execute basic functions...
#RenderSection("deferredscripts", false)
}
</script>
On some of my views (.cshtml), I load deferred scripts like this:
#section deferredscripts
{
console.info("view loaded");
}
All of this works great, however, I lose JavaScript intellisense in doing so. To combat, I added script tag around the section. It looks like this:
<script>
#section deferredscripts
{
console.info("view loaded");
}
</script>
This now gives me intellisense. However, I don't like that every view now has an empty script tag created. Also, ReSharper 2017.3.2 thinks it's not JS, so it throws error like "; expected" on something like '#Url.Action("Load", "Action"){resharper_errorHere}'
So, my question is, is there a way I can have JS intellisense on my razor view without specifying the script tag? Or, is there a better way to solve this problem? Thank you.

Can't get this simple Google Autocomplete script to work (Rails)

I have this at the bottom of a form partial, which worked previously when I loaded it through application.html.erb, but have since decided to replace it in application.html.erb with Google Maps.
_new.html.erb (with the field appropriately id'd). straight up doesn't work, can't figure out why.
<script>
$(document).ready(function(){
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"));
});
function initAutocomplete(){
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
Try moving
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
to the in application.html.erb head tag
Then put
initAutocomplete = ->
$(document).ready ->
autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('autocomplete'))
return
Into a coffeescript for you front page, or use your existing script inline of the partial to test if you need to.

call custom js function in UIWebView

I'm trying to pre fill in fields to log in to a forum. However, I don't own the forum. So how do I link my own .js file so that I can fire a function that will pre fill the log in fields?
(Remember I don't own the servers that host the html files, so I cannot hook it up via HTML.)
You can inject your own javascript into a page being displayed by a UIWebView by
1) Put your javascript into a file in your app bundle, for example something like this will inject myFunction().
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = function myFunction()
{
alert("my function");
};
document.getElementsByTagName('head')[0].appendChild(script);
2) Load the .js file and run it using stringByEvaluationJavaScriptFromString:
3) If its important your myFunction() doesn't get added until the dom has loaded, then within the same .js file add some other JavaScript that will ensure that the code in part 1) doesn't get run until you get a dom loaded event.
cross domain javascript fails everytime.
use ajax to retrieve the page you wish.
$(document).ready(function(){
jQuery.ajax(’forumlogin’).done(function(data)
{
$(’body’).html(data)
})
})
then fill in the forms using the forms element.

Backbone Views defined in Head not working unless using Routes

I'm using the "rails-backbone" gem in my Rails 3.2 project. By this design my Backbone Views are loaded in the <head> tag. When using Routes everything works fine, but Views do not render if I try to use them directly without Routes. If I put the Views code in <body> everything works as expected.
Is there a way to make the Views work when defined in <head>?
Update:
in <body>:
<script type="text/javascript">
var lv = new ListView();
</script>
in javascript file included in <head>:
window.ListView = Backbone.View.extend({
el: $("#node"), // This does not work
initialize: function(){
_.bindAll(this, 'render');
this.el = $("#node"); // Works if I add this line
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
As I understand it #node does not exist yet, which is why it is not bound to el. I don't quite understands when happens here: var lv = new ListView(), I thought I was creating an instance from a Class (I guess I'm getting a clone of an Object?). Is there another way of making the code work by modifying the code in <body> instead of the included javascript?
Your problem is caused by using a jQuery selector as the value for el in the view.
Read this:
http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/
if you want something to work in the head, but after the DOM is ready, (And apparently since you're using jQuery) just set up your views in the DOMReady event via:
$(document).ready(function(){
...
//set up view here
...
});

Resources